Проблемы с углами позиционирования при изменении размера и переворачивания форм на холсте HTML5 ⇐ Javascript

[Anonymous]

Я разрабатываю редактор веб -изображений, который использует HTML5 Canvas. Одной из ключевых особенностей является изменение размера форм. Чтобы правильно обрабатывать размеры, я внедрил «флип» логику, которая предотвращает отрицательную ширину или высоту. Это происходит, когда пользователь перетаскивает угол на противоположную сторону, а размеры Neww или newh становятся отрицательными; В этом случае я инвертирую их знак и меняю активный угол (

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

activeCorner

).
Проблема возникает, когда после такого «переворачивания», особенно для определенных комбинаций углов (например, при перемещении от нижнего правого к нижнему левому при перевороте вдоль оси x или от нижнего левого до уровня в верхней части (/код> при перевороте y-axis). Это приводит к резким изменениям размера. Я подозреваю, что проблема заключается в неточной пересчете Newx и Newy после инверсии размера и активного изменения угла. Координаты. Переменные mousestartx , mousestarty сохраняют начальные координаты мыши, оригинал , originy , Originalwidth , OriginalHeight сохраняет начальные параметры формы и POS сохраняет текущие координаты мышей относительно CANVAS. SelectedShape.Rotation указывает вращение формы (в градусах).

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

        if (isResizing && (event.buttons & 1)) {
const rotation = selectedShape.rotation;
const dx = pos.x - mouseStartX;
const dy = pos.y - mouseStartY;

let newX = originalX;
let newY = originalY;
let newW = originalWidth;
let newH = originalHeight;

const cos = Math.cos(-rotation * Math.PI / 180);
const sin = Math.sin(-rotation * Math.PI / 180);

const localDx = dx * cos - dy * sin;
const localDy = dx * sin + dy * cos;

let flipX = false, flipY = false;

if (activeCorner === 'top-left') {
newW = originalWidth - localDx;
newH = originalHeight - localDy;

if (newW < 0) {
flipX = true;
newW = -newW;
}
if (newH < 0) {
flipY = true;
newH = -newH;
}

if (flipX && flipY) {
newX = originalX + originalWidth;
newY = originalY + originalHeight;
activeCorner = 'bottom-right';
}
else if (flipX) {
newX = originalX + originalWidth;
newY = originalY + localDy;
activeCorner = 'top-right';
}
else if (flipY) {
newX = originalX + localDx;
newY = originalY + originalHeight;
activeCorner = 'bottom-left';
}
else {
newX = originalX + localDx;
newY = originalY + localDy;
}
}
else if (activeCorner === 'top-right') {
newW = originalWidth + localDx;
newH = originalHeight - localDy;

if (newW < 0) {
flipX = true;
newW = -newW;
}
if (newH < 0) {
flipY = true;
newH = -newH;
}

if (flipX && flipY) {
newX = originalX - (newW - originalWidth);
newY = originalY + originalHeight;
activeCorner = 'bottom-left';
}
else if (flipX) {
newX = originalX - (newW - originalWidth);
newY = originalY + localDy;
activeCorner = 'top-left';
}
else if (flipY) {
newX = originalX;
newY = originalY + originalHeight;
activeCorner = 'bottom-right';
}
else {
newX = originalX;
newY = originalY + localDy;
}
}
else if (activeCorner === 'bottom-left') {
newW = originalWidth - localDx;
newH = originalHeight + localDy;

if (newW < 0) {
flipX = true;
newW = -newW;
}
if (newH < 0) {
flipY = true;
newH = -newH;
}

if (flipX && flipY) {
newX = originalX + originalWidth;
newY = originalY - (newH - originalHeight);
activeCorner = 'top-right';
}
else if (flipX) {
newX = originalX + originalWidth;
newY = originalY;
activeCorner = 'bottom-right';
}
else if (flipY) {
newX = originalX + localDx;
newY = originalY - (newH - originalHeight);
activeCorner = 'top-left';
}
else {
newX = originalX + localDx;
newY = originalY;
}
}
else if (activeCorner === 'bottom-right') {
newW = originalWidth  + localDx;
newH = originalHeight + localDy;

if (newW <  0) {
flipX = true;
newW = -newW;
}
if (newH < 0) {
flipY = true;
newH = -newH;
}

if (flipX && flipY) {
newX = originalX - (newW - originalWidth);
newY = originalY - (newH - originalHeight);
activeCorner = 'top-left';
}
else if (flipX) {
newX = originalX - (newW - originalWidth);
newY = originalY;
activeCorner = 'bottom-left';
}
else if (flipY) {
newX = originalX;
newY = originalY - (newH - originalHeight);
activeCorner = 'top-right';
}
else {
newX = originalX;
newY = originalY;
}
}

selectedShape.x = newX;
selectedShape.y = newY;
selectedShape.width = newW;
selectedShape.height = newH;

if (flipX || flipY) {
mouseStartX = pos.x;
mouseStartY = pos.y;
originalX = newX;
originalY = newY;
originalWidth  = newW;
originalHeight = newH;
}

redrawAll();
updateRectAnglePropertyPanel();
return;
}

Я подозреваю, что проблема заключается в неточной пересчете Newx и newy после инвертирования размеров и изменения активного угла.
Пока что можно исправить, формируется прямоугольник без поворота. ActiveCorner) в условиях «Flip» для повернутого прямоугольника, чтобы его позиционирование и изменение размера оставались гладкими и точными, без прыжков и накопления ошибок во время нескольких записей? < /p>
Если вам нужен дополнительный код, спросите. Я также открыт для полного изменения логики изменения размера, если вы ее предлагаете.

Подробнее здесь: https://stackoverflow.com/questions/796 ... html5-canv