使用 easelJS 在 pressmove 上自由变换形状

Question

我想复制自由变换工具（无旋转）的基本功能，方法是拖动 easeljs 形状的边框并调整容器以匹配它。我目前正在使用 scaleX 和 scaleY 属性，它有点用，但不太正确。

如果您进行一次缩放转换，效果会很好。但是，如果您释放，然后再进行一次缩放变换，它会跳得很乱，并且偶尔会中断将 x/y 坐标一直发送到阶段 0。在这个问题上的任何帮助都会很棒！ 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();
});

Answer 1

问题是您的 initial 计算未考虑圆圈比例的变化。您将不得不使用 localToGlobal 转换坐标。幸运的是，还有更简单的方法：

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

你也可以在边框上开启ignoreScale，使其不拉伸：

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

最后，您的边界设置可能适用于您的演示，但它不正确。你的圆是从中心画的，所以它应该是：

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

这是更新后的 fiddle：http://jsfiddle.net/tfy1sjnj/3/

使用 easelJS 在 pressmove 上自由变换形状

Using easelJS to free transform shapes on pressmove

javascript

canvas

transform

easeljs