Próbuję umieścić uchwyty zmiany rozmiaru na czterech rogach prostokąta, które można przeciągać, aby zmienić rozmiar prostokąta. Mam problem z obliczeniem nowej szerokości, nowej wysokości i nowych punktów prostokąta po przeciągnięciu jednego z punktów prostokąta.

Jeśli prostokąt nie zostałby obrócony, byłoby to oczywiście bardzo łatwe, ponieważ szerokość i wysokość zmieniłyby się o tę samą amout, co offsetX myszy i offsetY. Jednak ten prostokąt MOŻE zostać obrócony, więc offsetX i offsetY nie pasują do zmian szerokości / wysokości.

Na powyższym obrazku przedstawiłem informacje, które już mam w kolorze czarnym, oraz informacje, które chcę znaleźć w kolorze jasnoszarym. Próbowałem pokazać, jak prostokąt powinien się zmienić, jeśli przeciągnąłem róg a1 w górę i w prawo.

Czy ktoś mógłby mi pomóc dowiedzieć się, jak obliczyć brakujące informacje?

Dzięki za pomoc! To bardzo doceniane.

-

EDYCJA: Mam przeciągnij start, przeciągnij ruch i przeciągnij połączenia zwrotne na każdym uchwycie. Mój obecny kod po prostu otrzymuje nowy punkt (w tym przykładzie a2). Niestety, po prostu przesuwa uchwyt, który aktualnie przeciągamy, do nowej pozycji, ale oczywiście nie ma wpływu na szerokość / wysokość prostokąta i położenie jego innych punktów. Liczę na pomoc w obliczeniu nowej szerokości i wysokości oraz nowej pozycji innych punktów, w oparciu o ten opór.

Obsługuj współrzędne (przed przeciągnięciem)

handles: { 
  a: { x: 11, y: 31 },
  b: { x: 44, y: 12 }, 
  c: { x: 39, y: 2 }, 
  d: { x: 6, y: 21 }
};

Callbacki:

// Save the original x and original y coordinates
// of the handle, before dragging
onDragStart: function(x, y, handle) {
  handle.data({
   ox: x,
   oy: y
  });
}

// While dragging the handle, update it's coordinates to 
// reflect its new position
onDragMove: function(dx, dy, handle) {
  handle.attr({
   x: handle.data('ox') + dx,
   y: handle.data('oy') + dy
  });
}

// Not currently using the drag end callback
onDragEnd: function(x,y,handle) {}