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

Posted 2023-03-24

【中文标题】在 fabric.js 中没有默认选择的画线

【英文标题】：draw line without default selection in fabric.js

【发布时间】：2022-01-24 00:57:06

【问题描述】：

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

现在我的代码画线并使其被选中。我想划分这个功能。我应该如何解决我的问题？

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"   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>

【参考方案1】：

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

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

所以您所要做的就是设置两个按钮（选择/绘制），将canvas.selection 设置为所需状态并在进行任何绘制之前从 mouseMove 处理程序返回以防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"   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>