How to change only width of path(rect, circle) while mouse drag using paper.js

Question

I have stucked at resizing only width of an item in the canvas using paper.js I have done in following ways to resize , but it results in resizing both left and right sides from the center of rectangle/circle.

function onMouseDrag(event){

(selectedItem.bounds.contains(event.point)) ?
selectedItem.scale(0.9871668311944719,1) : selectedItem.scale(1.013, 1);
}

above code resizes in both x-directions.

Help me to resize width only in one direction.

thanks,

suribabu.

Answer 1

You can center the scale operation at any point by using the form:

scale(hor, ver, point)

So in your case, if you want to scale from the left-center of your selected item, you could use:

function onMouseDrag(event){

(selectedItem.bounds.contains(event.point)) ?
selectedItem.scale(0.9871668311944719, 1, selectedItem.bounds.left) : selectedItem.scale(1.013, 1, selectedItem.bounds.left);
}

Answer 2

I am not sure what you mean with scale only the width. If you want to have thicker path than changing the strokeWidth instead might do what you want.

If you are wondering why the scaled path expands in both directions on the x-axis than you might check the location of the paths local center. If some nodes of the path have negative coordinates relative to this local center, scaling them with a positive value decreases their coordinates even more.

Perhaps you should normalize all the vertices, means move them directly so that the smallest x and y value of all vertices is 0.

Greetings and good luck

Answer 3

Try this:

function onMouseDown(e) {
    var cx = e.point.x;
    var cy = e.point.y;
    var rectangle = new Rectangle(e.point, new Size(1,1));
    path = new Path.Ellipse(rectangle);
    path.strokeColor = 'red';       
}

function onMouseDrag(e) {
    path.remove();
    var x = Math.min(e.point.x, cx),
        y = Math.min(e.point.y, cy),
        w = Math.abs(e.point.x -cx),
        h = Math.abs(e.point.y -cy);
    var rectangle = new Rectangle(x,y,w,h);
    path = new Path.Ellipse(rectangle);
    path.strokeColor = 'red'
}