Using easelJS to free transform shapes on pressmove

Question

I want to replicate the basic functionality of a free transform tool (no rotation), by dragging on the border of a easeljs Shape and adjusting the container to match it. I'm currently using the scaleX and scaleY properties and it sort of works but is not quite right.

If you do one scaling transformation it works pretty well. However if you release, then do another scaling transformation, it jumps very glitchily, and can occasionally break sending the x/y coordinates all the way to stage 0. Any help on this issue would be great! http://jsfiddle.net/frozensoviet/dsczvrpw/13/

//circle
var circle = new createjs.Shape(new createjs.Graphics()
    .beginFill("#b2ffb2")
    .drawCircle(0, 0, 50));
circle.setBounds(0, 0, 50, 50);

//create the border as a seperate object
var cBorder = new createjs.Shape(new createjs.Graphics().setStrokeStyle(10)
    .beginStroke("#000").drawCircle(0, 0, 50));
cBorder.setBounds(0, 0, 50, 50);

//add both to the container
circleContainer.addChild(circle);
circleContainer.addChild(cBorder);

var cWidth = circleContainer.getBounds().width;
var cHeight = circleContainer.getBounds().height;

//find initial mouse position relative to circle center
cBorder.on("mousedown", function (evt) {
    //initial mouse pos
    this.initial = {
        x: Math.abs(-(circleContainer.x - evt.stageX)),
        y: Math.abs(circleContainer.y - evt.stageY)
    };
});

//set the relevant circle axis scale to ratio of mouse pos/initial mouse pos
cBorder.on("pressmove", function (evt) {
    //current moouse pos
    this.offset = {
        x: Math.abs(-(circleContainer.x - evt.stageX)),
        y: Math.abs(circleContainer.y - evt.stageY)
    };

    if (this.initial.x > this.initial.y) { 
        //sides
        circleContainer.scaleX = this.offset.x / this.initial.x;
    } else if (this.initial.x < this.initial.y) {
        //top/bottom
        circleContainer.scaleY = this.offset.y / this.initial.y;
    } else {
        //diagonals
       circleContainer.scaleX = this.offset.x / this.initial.x;
       circleContainer.scaleY = this.offset.y / this.initial.y;
    }
    stage.update();
});

Lanny Lanny · Accepted Answer · 2015-11-20T16:49:01

The issue is your initial calculations don't account for the change in the scale of the circle. You would have to transform the coordinates using localToGlobal. Fortunately, there is an even easier way:

this.initial = {
    x: Math.abs(evt.localX),
    y: Math.abs(evt.localY)
};

You can also turn on ignoreScale on the border, which makes it not stretch:

createjs.Graphics().setStrokeStyle(10,null,null,null,true) // The 5th argument

Lastly, your bounds setting might work for your demo, but it is not correct. Your circle draws from the center, so it should be:

cBorder.setBounds(-25, -25, 50, 50);

Here is an updated fiddle: http://jsfiddle.net/tfy1sjnj/3/

Using easelJS to free transform shapes on pressmove

1 Answers