Question

我有一个通过Fabric.js使用HTML5画布的应用程序。我想用文字做箭头。然后移动箭头文本位置正确，但旋转：

有问题

文字位置不正确：
文字位置必须是：

我的代码是：

     var canvas = new fabric.Canvas('c');
     var line = new fabric.Line([10, 50, 200, 50], {
       stroke: 'black',
       strokeWidth: 3,
       strokeDashArray: [10, 5]
     });
     var line2 = new fabric.Line([199, 50, 180, 60], {
      stroke: 'black',
      strokeWidth: 3
     });
     var line3 = new fabric.Line([199, 50, 180, 40], {
      stroke: 'black',
      strokeWidth: 3
     });
     var strele = new fabric.Group([line, line2, line3], {});

     tekst = new fabric.IText('<<extend>>', {
       left: 50,
       top: 20,
       fontFamily: 'Arial',
       fill: '#333',
       fontSize: 20

    });
    canvas.add(strele, tekst);

   function onMoving(options) {
     if (options.target === strele) {
       tekst.left = strele.left + ((strele.width * strele.scaleX) / 2) - (tekst.width * tekst.scaleX) / 2;
       tekst.top = strele.top - strele.height * strele.scaleY;
     } else if (options.target === tekst) {
        strele.left = tekst.left - ((strele.width * strele.scaleX) / 2 - (tekst.width * tekst.scaleX) / 2);
        strele.top = tekst.top + strele.height * strele.scaleY;
     }
   canvas.forEachObject(function(o) {
  o.setCoords()
  });
}

function onRotating(options) {
  if (options.target === strele) {
   tekst.angle = strele.angle;
   tekst.left = strele.left((strele.width * strele.scaleX) / 2) - (tekst.width * tekst.scaleX) / 2;
   tekst.top = strele.top - strele.height * strele.scaleY;

 }
}

canvas.on('object:moving', onMoving);
canvas.on('object:rotating', onRotating);

我在fiddle

我该如何解决这个问题？

Answer 1

这是一种非常类似于您的图像的方法。

为简化计算，我将对象原点（X＆Y）更改为居中，其余只是角度的一些数学和条件。我的方法是保持文本可读性并且不使行重叠。

var canvas = new fabric.Canvas('c');
var line = new fabric.Line([160, 100, 350, 100], {stroke: 'black',  strokeWidth: 3, strokeDashArray: [10, 5]});
var line2 = new fabric.Line([350, 100, 330, 110], {stroke: 'black',  strokeWidth: 3});
var line3 = new fabric.Line([350, 100, 330, 90], {stroke: 'black',  strokeWidth: 3});
var strele = new fabric.Group([line, line2, line3], {originX: "center", originY: "center"});
var tekst = new fabric.IText('<<extend>>', {left: 160,  top: 70,  fontFamily: 'Arial',fill: 'red',  fontSize: 20, selectable: false,
  originX: "center", originY: "center"
});
canvas.add(strele, tekst);
canvas.setActiveObject(canvas.item(0));
canvas.on('object:moving', onMoving);
canvas.on('object:rotating', onRotating);

function onMoving() {
  tekst.left = strele.left + 20 * Math.sin(strele.angle * Math.PI /180);
  tekst.top = strele.top - 20 * Math.cos(strele.angle * Math.PI /180);
}

function onRotating() {
  var ang = strele.angle % 360;
  if (ang < 270) {
    if (ang > 180) {
      ang = strele.angle % 180;
    } else if (ang > 90) {
      ang = 180+strele.angle;
    }
  }
  tekst.angle = ang
  onMoving() 
}

function rotate() {
  strele.angle += 22.2;
  strele.setCoords()
  onRotating()
  canvas.renderAll();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.4/fabric.min.js"></script>
<button id="rotate" onclick="rotate()">rotate</button>
<canvas id="c" width="600" height="600"></canvas>

Fabric.js - 旋转一个对象，另一个旋转

1 个答案: