Fabri cJs - Как переоценить точки в объекте после поворота объекта

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/fabric@1.7.11/dist/fabric.js"></script>
<canvas id="c" width="500" height="300"></canvas>

У меня есть прямоугольный объект fabri c и множество точек относительно прямоугольника. Мне удалось расположить точки внутри прямоугольника с помощью простого logi c

Теперь, если я поверну прямоугольный объект на угол, есть ли способ оценить положение точек относительно повернутого прямоугольника .

Я не специалист в математике, поэтому мне нужны указания, пожалуйста, помогите.

Answer 1

Возможно, вы можете использовать группу fabri c вместо своей математической логики c.

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

 canvas.add(group);

Я подготовил пример для более подробного объяснения моего решения, вы можете увидеть его здесь https://codesandbox.io/s/mutable-bash-k01wv?file= / src / index. js