fabric.js 中没有默认选择的画线

Question

亲爱的同学们，晚安！我需要两个带有两个按钮的绘图应用程序：selection 和 draw line。按钮“selection”应该 select 形状来改变它们。按钮画线应该画线。

现在我的代码画线并使其成为 selected。我想分配这个功能。我该如何解决我的问题？

var Line = (function() {
  function Line(canvas) {
    this.canvas = canvas;
    this.isDrawing = false;
    this.bindEvents();
  }

  Line.prototype.bindEvents = function() {
    var inst = this;
    inst.canvas.on('mouse:down', function(o) {
      inst.onMouseDown(o);
    });
    inst.canvas.on('mouse:move', function(o) {
      inst.onMouseMove(o);
    });
    inst.canvas.on('mouse:up', function(o) {
      inst.onMouseUp(o);
    });
    inst.canvas.on('object:moving', function(o) {
      inst.disable();
    })
  }

  Line.prototype.onMouseUp = function(o) {
    var inst = this;
    if (inst.isEnable()) {
      inst.disable();
    }
  };

  Line.prototype.onMouseMove = function(o) {
    var inst = this;
    if (!inst.isEnable()) {
      return;
    }

    var pointer = inst.canvas.getPointer(o.e);
    var activeObj = inst.canvas.getActiveObject();

    activeObj.set({
      x2: pointer.x,
      y2: pointer.y
    });
    activeObj.setCoords();
    inst.canvas.renderAll();
  };

  Line.prototype.onMouseDown = function(o) {
    var inst = this;
    inst.enable();

    var pointer = inst.canvas.getPointer(o.e);
    origX = pointer.x;
    origY = pointer.y;

    var points = [pointer.x, pointer.y, pointer.x, pointer.y];
    var line = new fabric.Line(points, {
      strokeWidth: 5,
      stroke: 'red',
      fill: 'red',
      originX: 'center',
      originY: 'center',
      hasBorders: false,
      hasControls: false
    });
    inst.canvas.add(line).setActiveObject(line);
  };

  Line.prototype.isEnable = function() {
    return this.isDrawing;
  }

  Line.prototype.enable = function() {
    this.isDrawing = true;
  }

  Line.prototype.disable = function() {
    this.isDrawing = false;
  }

  return Line;
}());
console.log(fabric);
var canvas = new fabric.Canvas('canvas');
var line = new Line(canvas);

<div id="canvasContainer">
  <canvas id="canvas" width="400" height="400" style="border: solid 1px"></canvas>
</div>
  <script
    type="text/javascript"
    src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"
  ></script>

Answer 1

目前您同时拥有绘图和选择功能，因为 Fabric 使其关联 canvas 默认可选择。

通过调用 new fabric.Canvas().[=15 更改对象 return 上的布尔值 .selection 属性来控制此行为=]

因此，您所要做的就是设置两个按钮 (Select/Draw)，将 canvas.selection 设置为所需状态，并在进行任何绘图之前从 mouseMove 处理程序设置 return 以防万一selection==true.

这是一个例子：

function select(state) {
  canvas.selection = state;
}

var Line = (function() {
  function Line(canvas) {
    this.canvas = canvas;
    this.isDrawing = false;
    this.bindEvents();
  }

  Line.prototype.bindEvents = function() {
    var inst = this;
    inst.canvas.on('mouse:down', function(o) {
      inst.onMouseDown(o);
    });
    inst.canvas.on('mouse:move', function(o) {
      inst.onMouseMove(o);
    });
    inst.canvas.on('mouse:up', function(o) {
      inst.onMouseUp(o);
    });
    inst.canvas.on('object:moving', function(o) {
      inst.disable();
    })
  }

  Line.prototype.onMouseUp = function(o) {
    var inst = this;
    if (inst.isEnable()) {
      inst.disable();
    }
  };

  Line.prototype.onMouseMove = function(o) {
    var inst = this;
    if (!inst.isEnable() || canvas.selection) {
      return;
    }

    var pointer = inst.canvas.getPointer(o.e);
    var activeObj = inst.canvas.getActiveObject();

    activeObj.set({
      x2: pointer.x,
      y2: pointer.y
    });
    activeObj.setCoords();
    inst.canvas.renderAll();
  };

  Line.prototype.onMouseDown = function(o) {
    var inst = this;
    inst.enable();

    var pointer = inst.canvas.getPointer(o.e);
    origX = pointer.x;
    origY = pointer.y;

    var points = [pointer.x, pointer.y, pointer.x, pointer.y];
    var line = new fabric.Line(points, {
      strokeWidth: 5,
      stroke: 'red',
      fill: 'red',
      originX: 'center',
      originY: 'center',
      hasBorders: false,
      hasControls: false
    });
    inst.canvas.add(line).setActiveObject(line);
  };

  Line.prototype.isEnable = function() {
    return this.isDrawing;
  }

  Line.prototype.enable = function() {
    this.isDrawing = true;
  }

  Line.prototype.disable = function() {
    this.isDrawing = false;
  }

  return Line;
}());
var canvas = new fabric.Canvas('canvas');
canvas.selection = false;
var line = new Line(canvas);

<div id="canvasContainer">
  <canvas id="canvas" width="400" height="400" style="border: solid 1px"></canvas>
</div>
<button onclick='select(true);'>Select</button>
<button onclick='select(false);'>Draw</button>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>

fabric.js 中没有默认选择的画线

draw line without default selection in fabric.js

javascript

canvas

html5-canvas

fabricjs