Paper.js Resize Raster/TextItem/Ścieżka przeciągając

Question

Zdaję sobie sprawę, że mogę scaleRaster obiekt w Paper.js, jak również TextItem i Path.

jednak chciałbym to zrobić na przeciąganie linii wyboru lub Obwiednia z Raster, TextItem lub Path, tak samo jak podczas zmiany rozmiaru obrazu w programach takich jak Word. Te granice tworzą obiekt Rectangle. Czy mogę się do tego podłączyć, być może używając metody fitBounds? Lub szerzej, w jaki sposób mogę uchwycić zdarzenie przeciągania myszy na liniach wyboru Rastra, TextItem lub Ścieżki? Przypuszczam, że gdy już to zrobię, mogę użyć metody scale do powiększania/pomniejszania obiektu.

Oto Paper.js sketch, aby zacząć i eksperymentować, zapożyczone z @ Christophoph. Zobacz także documentation dla Paper.js.

Answer 1

Budowanie rzeczywiste wdrożenie byłoby uciążliwe, ale tutaj jest POC https://jsfiddle.net/f8h3j7v4/

c.addEventListener('mousedown',function(e){//c = context, check the fiddle 
//Calculate the position of the edges, currently hardcoded values for fiddle 
//For example getPosition(c).y + y * scaleY 
//I should mention that rotate starts at the top left corner; 
//the whole canvas gets rotated(+transform exists) 
//There is actually a pretty clever way to handle rotation; 
//rotate the mouse position 
if(e.clientY > 15 && e.clientY < 25) 
    dragNorth = true 
else 
    dragNorth = false 
if(e.clientX > 15 && e.clientX < 25) 
    dragWest = true 
else 
    dragWest = false 
if(e.clientX > 165 && e.clientX < 175) 
    dragEast = true 
else 
    dragEast = false 
if(e.clientY > 165 && e.clientY < 175) 
    dragSouth = true 
else 
    dragSouth = false 
}) 

function getPosition(element) { 
var xPosition = 0; 
var yPosition = 0; 

while(element) { 
    xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft); 
    yPosition += (element.offsetTop - element.scrollTop + element.clientTop); 
    element = element.offsetParent; 
} 
return { x: xPosition, y: yPosition }; 
} 
//Thanks to 
//http://www.kirupa.com/html5/get_element_position_using_javascript.htm 

Wystarczy calc pozycję płótnie, a następnie przeciągnij go :)