Fabricjs: неправильное отображение многоугольников после обновления точки и расширения/вращения ⇐ Javascript

[Anonymous]

У меня есть многоугольник в Fabric.js. После обновления точек все работает нормально с перемещением многоугольника, но когда я пытаюсь его растянуть/повернуть, многоугольник отображается неправильно.

Код: Выделить всё

const canvas = new Canvas('canvas');

const points = [
{
x: 3,
y: 4,
},
{
x: 16,
y: 3,
},
{
x: 30,
y: 5,
},
{
x: 25,
y: 55,
},
{
x: 19,
y: 44,
},
{
x: 15,
y: 30,
},
{
x: 15,
y: 55,
},
{
x: 9,
y: 55,
},
{
x: 6,
y: 53,
},
{
x: -2,
y: 55,
},
{
x: -4,
y: 40,
},
{
x: 0,
y: 20,
},
];

const poly = new Polygon(points, {
left: 200,
top: 50,

fill: 'yellow',
strokeWidth: 1,
stroke: 'grey',

objectCaching: false,
transparentCorners: false,
cornerColor: 'blue',
});

canvas.add(poly);

poly.on('modified', () => {
const points = RecalculatePointsInPolygon(poly);

poly.set({ points });

poly.setCoords();
poly.setBoundingBox(true);
});

function RecalculatePointsInPolygon(polygon: Polygon): Point[] {
const matrix = polygon.calcTransformMatrix();

return polygon
.get('points')
.map(
(p: Point) =>
new Point(p.x - polygon.pathOffset.x, p.y - polygon.pathOffset.y),
)
.map((p: Point) => util.transformPoint(p, matrix));
}

Прежде чем изменить размер, у меня есть правильная форма:


но после изменения размера (а также поворота):


Похоже, чтоboundingBox реализован правильно, но содержимое внутри больше. Я также заметил, что точки из RecalculatePointsInPolygon считаются исправленными.
Пожалуйста, помогите, я понятия не имею, где я делаю ошибку.
Я ожидаю правильную форму после изменения размера. /rotate.
РЕДАКТИРОВАТЬ. Мне удалось правильно растянуть полигон после расчета точек. К сожалению, я понятия не имею, что делать с ротацией.

Код: Выделить всё

    poly.on('modified', () => {
var width = poly.width;
var height = poly.height;
var scaleX = poly.scaleX;
var scaleY = poly.scaleY;

const points = RecalculatePointsInPolygon(poly);

poly.set({
points,

width: width * scaleX,
height: height * scaleY,
scaleY: 1,
scaleX: 1,
});

poly.setBoundingBox(true);
});

С помощью этого кода вы можете обновлять точки в многоугольнике и изменять этот многоугольник без проблем (кроме вращения).
Итак, теперь после изменения размера его внешний вид должен выглядеть следующим образом:
< img alt="как должно выглядеть" src="https://i.sstatic.net/n4ZjUWPN.png" />
Но всё равно есть проблема с вращением:



Подробнее здесь: https://stackoverflow.com/questions/793 ... n-rotation