Как Force Fabric.js Polygon правильно обновлять свои очки после изменения ⇐ Javascript

[Anonymous]

Я использую последнюю версию Fabric.js, и у меня есть проблема с полигоном. Как мы знаем, в Fabric.js поле точек многоугольника не обновляется после модификации (он всегда содержит начальные точки). < /P>
Я хочу пересчитать точки многоугольника после модификации Чтобы получить текущую позицию каждой точки. Чтобы достичь этого, я использую трюк с Calctransformmatrix (точки рассчитываются правильно), а затем назначаю новые точки существующему многоугольнику. < /P>
Проблема возникает, когда я пытаюсь масштабировать или Поверните многоугольник с обновленными точками - это приводит к сбоям и ошибкам, и я не знаю, почему. < /p>
Вот мой код: < /p>
const canvas = new fabric.Canvas("canvas", {
width: 600,
height: 600,
backgroundColor: "lightgray",
});

const polygonPoints = [
{ x: 100, y: 50 },
{ x: 200, y: 80 },
{ x: 250, y: 200 },
{ x: 150, y: 300 },
{ x: 50, y: 200 },
];

const polygon = new fabric.Polygon(polygonPoints, {
fill: "rgba(0, 128, 255, 0.5)",
stroke: "blue",
strokeWidth: 2,
selectable: true,
});

canvas.add(polygon);

// On modified
polygon.on("modified", (o) => {
// Calculate new points
const newPoints = polygon
.get("points")
.map(
(p) =>
new fabric.Point(p.x - polygon.pathOffset.x, p.y - polygon.pathOffset.y)
)
.map((p) => p.transform(polygon.calcTransformMatrix()));

polygon.set({ points: newPoints });
polygon.setBoundingBox(true);
canvas.requestRenderAll();

// Now after recalculate points it work fine when drag but scale/rotate dont work correctly
polygon.points.forEach((e) => {
canvas.add(
new fabric.Rect({
left: e.x,
top: e.y,
width: 5,
height: 5,
fill: "red",
})
);
});
});






Fabric js








< /code>
после перетаскивания, когда мы пытаемся масштабировать или вращаться, мы можем увидеть странное поведение. < /p>
Я ожидаю, что после обновления точек, вращения или масштабирования не должен сломать полигон.
Вот демо-код:
https://codesandbox.io/p/devbox/vibrant ... imunawsdev
Если вы попробуете масштабировать /вращаться после перетаскивания (так что после точек обновления) вы увидите сбои.
после перетаскивания/масштаба/вращения или просто масштаб/вращения:
< img alt = "Введите описание изображения здесь" src = "https://i.sstatic.net/ov5ue018.png"/>

Подробнее здесь: https://stackoverflow.com/questions/794 ... ter-modify