javascript - Paper.js Resize Raster/TextItem/Path arrastrando

javascript-events mouseevent

Question

Soy consciente de que puedo scale un objeto Raster en Paper.js , así como un elemento TextItem y una Path .

Sin embargo, me gustaría hacer esto al arrastrar las líneas de selección o el cuadro delimitador de un Raster , TextItem o Path , tal como lo haría al cambiar el tamaño de una imagen en un programa como Word. Estos límites forman un objeto Rectangle . ¿Puedo conectarme a esto, tal vez usando el método fitBounds ? O más ampliamente, ¿cómo puedo capturar un evento de arrastre del mouse en las líneas de selección de un Raster, TextItem o Path? Supongo que una vez que pueda hacer eso, puedo usar el método de scale para aumentar / reducir el objeto.

Aquí hay un sketch Paper.js para comenzar y para la experimentación, tomado de @Christoph. Consulte también la documentation para Paper.js.

Answer 1

Construir la implementación real sería una molestia, pero aquí hay un 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

Solo calcule la posición del lienzo y luego arrastre :)