Paper.js Resize Raster/TextItem/Path by Dragging

Question

I'm aware that I can scale a Raster object in Paper.js, as well as a TextItem and a Path.

However, I'd like to do this on dragging the selection lines or bounding box of a Raster, TextItem, or Path, just as you would when resizing an image in a program like Word. These bounds form a Rectangle object. Can I hook into this, perhaps using the fitBounds method? Or more broadly, how can I capture a mouse drag event on the selection lines of a Raster, TextItem, or Path? I suppose once I can do that I can use the scale method to grow/shrink the object.

Here's a Paper.js sketch to get you started and for experimentation, borrowed from @Christoph. See also the documentation for Paper.js.

Valeryvalerye

Maybe this'll help you https://mcmap.net/q/821198/-transform-bounding-box-in-paper-js (working sketch included) – Hyperactive

I am not familiar with the tech, but could you just calc the areas? For example... the draggable area should be width : 0; width: currentWidth, and the same for height. All you have to know is where the image starts, which is the x and y of the rectangle object. – Dickson

Answer 1

Building the actual implementation would be bothersome, but here is a 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

Just calc the position of the canvas and then drag away :)

Dickson

How are the numbers here chosen? – Valeryvalerye

Check out the fiddle, in theory you should calc the numbers yourself(that's the implementation part, the hardest part is calculating for rotation, but I think there is a func for that) – Dickson