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

Question

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

• 不正确的文本位置:

  

• 文本位置必须是:

  

• 我的代码是:

       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)更改为中心，剩下的只是 Angular 一些数学和条件。我的方法是保持文本的可读性并且不与行重叠。

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>