问在fabric.js中无默认选择地画线
EN

Stack Overflow用户

提问于 2021-12-22 13:14:17

回答 1查看 183关注 0票数 0

晚安，亲爱的同学们！我需要两个绘图应用程序与两个按钮:选择和绘制线。按钮“选择”应该选择形状来转换它们。THe按钮画线应该画线。

现在，我的代码画了一行，并选择了它。我想分道扬镳。我该如何解决我的问题？

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>

javascript

canvas

html5-canvas

fabricjs

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-12-23 04:42:57

目前您有绘图和选择，因为Fabric使它的关联画布在默认情况下是可选择的。

此行为通过更改调用.selection返回的对象上的布尔值new fabric.Canvas() 属性来控制。

因此，您所要做的就是设置两个按钮(选择/绘制)，将canvas.selection设置为所需的状态，并在进行任何selection==true绘图之前从mouseMove处理程序返回。

下面是一个例子：

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>