const canvas = new fabric.Canvas("c", {
selection: false
});
const refRect = new fabric.Rect({
left: 250,
top: 150,
width: 200,
height: 100,
fill: 'transparent',
stroke: 'blue',
originX: 'center',
originY: 'center'
});
canvas.add(refRect);
const 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);
});
const 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);
const 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ed8b8c8f9f848eaddcc3dac3dcdc">[email protected]</a>/dist/fabric.js"></script>
<canvas id="c" width="500" height="300"></canvas>I am using a fabric rectangle object along with multiple points positioned relative to the rectangle. I have successfully integrated these points within the rectangle utilizing a straightforward approach.
However, if I were to rotate the rectangle object by an angle, I am uncertain about how to determine the updated positions of the points concerning the rotated rectangle.
As my expertise in mathematics is limited, I would appreciate any guidance or assistance on this matter.