FabricJs - 如何在对象旋转后重新评估对象内的点。

Question

var canvas = new fabric.Canvas("c", {
  selection: false
});

var refRect = new fabric.Rect({
  left: 250,
  top: 150,
  width: 200,
  height: 100,
  fill: 'transparent',
  stroke: 'blue',
  originX: 'center',
  originY: 'center'
});

canvas.add(refRect);

var refPoints = [
{ x: 0, y: 0 }, { x: 200, y: 0 }, { x: 0, y: 100 },
  { x: 200, y: 100 }, { x: 30, y: 50 },
  { x: 50, y: 30 }

];

refPoints.map(function(point) {
  return new fabric.Circle({
    left: refRect.left - (refRect.width / 2) + point.x,
    top: refRect.top - (refRect.height / 2) + point.y,
    radius: 10,
    fill: 'blue',
    originX: 'center',
    originY: 'center'
  });
}).forEach(function(refPoint) {
  canvas.add(refPoint);

});


var tarRect = new fabric.Rect({
    left: 250, top: 150,
    width: 200, height: 100,
    fill: 'transparent',
    angle:45,
    stroke: 'red',
    originX: 'center',
    originY: 'center'
});

canvas.add(tarRect);

var matrix = tarRect.calcTransformMatrix();

refPoints.map(function(point) {
  return new fabric.Circle({
    left: tarRect.left - (tarRect.width / 2) + point.x,
    top: tarRect.top - (tarRect.height / 2) + point.y,
    radius: 5,
    fill: 'red',
    originX: 'center',
    originY: 'center'
  });
}).forEach(function(refPoint) {
  canvas.add(refPoint);
});

canvas {
  border: 1px solid;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/fabric.js"></script>
<canvas id="c" width="500" height="300"></canvas>

我有一个织物矩形对象和一堆相对于矩形的点。我能够使用一个简单的逻辑来定位矩形中的点。

现在，如果我将矩形对象旋转一个角度，是否有办法评估各点相对于旋转矩形的位置。

我不是数学专家，所以我需要一些指导，请协助。

Answer 1

也许你可以用 fabric group 来代替你的数学逻辑。

 const group = new fabric.Group([...points, rect]);

 canvas.add(group);

我准备了一个例子来解释我的解决方案，你可以在这里看到它。https:/codesandbox.iosmutable-bash-k01wv?file=srcindex.js。