Question

我想通过拖动画架形状的边框并调整容器来匹配它来复制自由变换工具（无旋转）的基本功能。我目前正在使用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);

这是一个更新的小提琴：http://jsfiddle.net/tfy1sjnj/3/

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

1 个答案: