Использование easelJS для создания форм свободного преобразования на прессовальной машине

Question

Я хочу реплицировать основные функции инструмента бесплатного преобразования (без вращения), перетащив на границу easeljs Shape и отрегулировать контейнер для его соответствия. В настоящее время я использую свойства 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/