如何在fabric.js中标记双头箭头的大小

编程问答 2022-08-15

问题描述

首先感谢this answer，它解决了我绘制双箭头的需要。

但在此基础上，我还有另一个问题：

  1. 在绘制双头箭头之后如何添加.as-console-wrapper { max-height: 100% !important; top: 0; }来表示线的长度？
  2. 如何使TextBox与行平行？这意味着需要计算角度值。
  3. 完成以上两点后，如何使用TextBox组合LineArrow和TextBox？
fabric.Group
// Extended fabric line class
fabric.LineArrow = fabric.util.createClass(fabric.Line,{

  type: 'lineArrow',initialize: function(element,options) {
    options || (options = {});
    this.callSuper('initialize',element,options);
  },toObject: function() {
    return fabric.util.object.extend(this.callSuper('toObject'));
  },_render: function(ctx) {
    this.ctx = ctx;
    this.callSuper('_render',ctx);
    let p = this.calcLinePoints();
    let xDiff = this.x2 - this.x1;
    let yDiff = this.y2 - this.y1;
    let angle = Math.atan2(yDiff,xDiff);
    this.drawArrow(angle,p.x2,p.y2);
    ctx.save();
    xDiff = -this.x2 + this.x1;
    yDiff = -this.y2 + this.y1;
    angle = Math.atan2(yDiff,p.x1,p.y1);
  },drawArrow: function(angle,xPos,yPos) {
    this.ctx.save();
    this.ctx.translate(xPos,yPos);
    this.ctx.rotate(angle);
    this.ctx.beginPath();
    // Move 5px in front of line to start the arrow so it does not have the square line end showing in front (0,0)
    this.ctx.moveto(10,0);
    this.ctx.lineto(-15,15);
    this.ctx.lineto(-15,-15);
    this.ctx.closePath();
    this.ctx.fillStyle = this.stroke;
    this.ctx.fill();
    this.ctx.restore();
  }
});



fabric.LineArrow.fromObject = function(object,callback) {
  callback && callback(new fabric.LineArrow([object.x1,object.y1,object.x2,object.y2],object));
};

fabric.LineArrow.async = true;


var Arrow = (function() {
  function Arrow(canvas) {
    this.canvas = canvas;
    this.className = 'Arrow';
    this.isDrawing = false;
    this.bindEvents();
  }

  Arrow.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();
    })
  }

  Arrow.prototype.onmouseup = function(o) {
    var inst = this;
    // Calculate the length of the LineArrow
    var a = this.line.x2 - this.line.x1
    var b = this.line.y2 - this.line.y1
    var lineLength = Math.floor(Math.sqrt(a * a + b * b));
    if (lineLength === 0) {
      inst.canvas.remove(this.line);
      return;
    }

    var textBox = new fabric.TextBox(lineLength.toFixed(),{
      hasBorders: true,hasControls: false,selectable: true,borderColor: 'red',fill: 'red',left: this.line.left,top: this.line.top
    }).setCoords();

    textBox.set('angle',this.line.angle / (Math.PI / 180));

    inst.canvas.add(textBox).setActiveObject(textBox);

    this.line.set({
      dirty: true,objectCaching: true
    });
    inst.canvas.renderAll();
    inst.disable();
  };

  Arrow.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();
  };

  Arrow.prototype.onMouseDown = function(o) {
    var inst = this;
    inst.enable();
    var pointer = inst.canvas.getPointer(o.e);

    var points = [pointer.x,pointer.y,pointer.x,pointer.y];
    this.line = new fabric.LineArrow(points,{
      strokeWidth: 5,stroke: 'red',originX: 'center',originY: 'center',hasBorders: false,objectCaching: false,perPixelTargetFind: true
    });

    inst.canvas.add(this.line).setActiveObject(this.line);
  };

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

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

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

  return Arrow;
}());

var canvas = new fabric.Canvas('canvas',{
  selection: false
});
var arrow = new Arrow(canvas);

上面是我修改的代码，实际上并不完美，希望有人可以帮助我。

谢谢。

解决方法

关于问题2，以下似乎在您的onMouseUp函数中起作用：

var angle = Math.atan2(this.line.y2 - this.line.y1,this.line.x2 - this.line.x1);

textBox.set('angle',angle / (Math.PI / 180));

因此，基本上，我们计算箭头和x轴之间的atan并相应地旋转。

问题3-下面的问题似乎将其归为一组，请检查以下摘要是否有帮助（位于onMouseUp的底部：

    var group = new fabric.Group();
    group.addWithUpdate(fabric.util.object.clone(this.line));
    group.addWithUpdate(textBox);
    inst.canvas.add(group).setActiveObject(group);
    inst.canvas.remove(this.line);
    inst.canvas.renderAll();
    inst.disable();

注意函数内容的底部。

这是一个汇总代码段：

// Extended fabric line class
fabric.LineArrow = fabric.util.createClass(fabric.Line,{

  type: 'lineArrow',initialize: function(element,options) {
    options || (options = {});
    this.callSuper('initialize',element,options);
  },toObject: function() {
    return fabric.util.object.extend(this.callSuper('toObject'));
  },_render: function(ctx) {
    this.ctx = ctx;
    this.callSuper('_render',ctx);
    let p = this.calcLinePoints();
    let xDiff = this.x2 - this.x1;
    let yDiff = this.y2 - this.y1;
    let angle = Math.atan2(yDiff,xDiff);
    this.drawArrow(angle,p.x2,p.y2);
    ctx.save();
    xDiff = -this.x2 + this.x1;
    yDiff = -this.y2 + this.y1;
    angle = Math.atan2(yDiff,p.x1,p.y1);
  },drawArrow: function(angle,xPos,yPos) {
    this.ctx.save();
    this.ctx.translate(xPos,yPos);
    this.ctx.rotate(angle);
    this.ctx.beginPath();
    // Move 5px in front of line to start the arrow so it does not have the square line end showing in front (0,0)
    this.ctx.moveTo(10,0);
    this.ctx.lineTo(-15,15);
    this.ctx.lineTo(-15,-15);
    this.ctx.closePath();
    this.ctx.fillStyle = this.stroke;
    this.ctx.fill();
    this.ctx.restore();
  }
});



fabric.LineArrow.fromObject = function(object,callback) {
  callback && callback(new fabric.LineArrow([object.x1,object.y1,object.x2,object.y2],object));
};

fabric.LineArrow.async = true;


var Arrow = (function() {
  function Arrow(canvas) {
    this.canvas = canvas;
    this.className = 'Arrow';
    this.isDrawing = false;
    this.bindEvents();
  }

  Arrow.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();
    })
  }

  Arrow.prototype.onMouseUp = function(o) {
    var inst = this;
    // Calculate the length of the LineArrow
    var a = this.line.x2 - this.line.x1
    var b = this.line.y2 - this.line.y1
    var lineLength = Math.floor(Math.sqrt(a * a + b * b));
    if (lineLength === 0) {
      inst.canvas.remove(this.line);
      return;
    }

    var textBox = new fabric.Textbox(lineLength.toFixed(),{
      hasBorders: true,hasControls: false,selectable: true,borderColor: 'red',fill: 'red',left: this.line.left,top: this.line.top
    }).setCoords();
    
    var angle = Math.atan2(this.line.y2 - this.line.y1,this.line.x2 - this.line.x1);

    textBox.set('angle',angle / (Math.PI / 180));

    this.line.set({
      dirty: true,objectCaching: true
    });
    
    var group = new fabric.Group();
    group.addWithUpdate(fabric.util.object.clone(this.line));
    group.addWithUpdate(textBox);
    inst.canvas.add(group).setActiveObject(group);
    inst.canvas.remove(this.line);
    inst.canvas.renderAll();
    inst.disable();
  };

  Arrow.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();
  };

  Arrow.prototype.onMouseDown = function(o) {
    var inst = this;
    inst.enable();
    var pointer = inst.canvas.getPointer(o.e);

    var points = [pointer.x,pointer.y,pointer.x,pointer.y];
    this.line = new fabric.LineArrow(points,{
      strokeWidth: 5,stroke: 'red',originX: 'center',originY: 'center',hasBorders: false,objectCaching: false,perPixelTargetFind: true
    });

    inst.canvas.add(this.line).setActiveObject(this.line);
  };

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

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

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

  return Arrow;
}());

var canvas = new fabric.Canvas('canvas',{
  selection: false
});
var arrow = new Arrow(canvas);
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.17/fabric.min.js"></script>
Please draw arrow here

<div id="canvasContainer">
  <canvas id="canvas" width="400" height="400" style="border: solid 1px"></canvas>
</div>

至于第1点-您所说的之后是什么意思，即在时间或空间上之后？ ：D

fabricjshtml5-canvasjavascript