我有一个项目,我在其中使用 EaselJS 在容器内创建填充(矩形)和文本。我的目标是使这个矩形和文本可拖动以将其移动到 Canvas 上。这已经完成并且运行良好。
我的问题是当我尝试使用 onMouseOver 处理程序使用 scaleX
和 scaleY
调整矩形大小时。这确实完成了,但是矩形只是从它的初始点移动到其他某个位置。
我读过我需要使用 regX
和 regY
属性来覆盖它,但在我的代码上下文中我做不到。我做错了什么?
这是我的 Javascript 代码:
(function(){
var stage, myCanvas;
var update = true;
this.init = function() {
myCanvas = document.getElementById("stageCanvas");
stage = new createjs.Stage(myCanvas);
stage.enableMouseOver();
stage.mouseEnabled = true;
stage.mouseMoveOutside = true;
// Reference Shape
var rectFijo0 = new createjs.Shape();
rectFijo0.graphics.beginFill("#DCD8D4").rect(140,160,78,35);
stage.addChild(rectFijo0);
// Shape
var rectOpt0 = new createjs.Shape();
rectOpt0.graphics.beginFill("#C51A76").rect(140,160,78,35);
txtOpt0 = new createjs.Text("TEST","bold 20px","#FFF");
txtOpt0.textAlign ="center";
txtOpt0.x = 50;
txtOpt0.y = 50;
// Container
var containerOpt0= new createjs.Container();
containerOpt0.mouseEnabled = true;
//#######
// Probably here is my problem. I don't understand why if I use regX and regY the rectangle moves the lower right corner to the center, instead of just using this point as a registration point. Why? What I am not understanding?
//containerOpt0.regX = 78/2;
//containerOpt0.regY = 35/2;
//#######
containerOpt0.onPress = pressHandler;
containerOpt0.onMouseOver = mouseOverHandler;
containerOpt0.addChild(rectOpt0, txtOpt0);
stage.addChild(containerOpt0);
stage.update();
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", tick);
}
function pressHandler(e){
// onPress Handler to drag
var offset = {x:e.target.x-e.stageX, y:e.target.y-e.stageY};
e.onMouseMove = function(ev) {
e.target.x = ev.stageX+offset.x;
e.target.y = ev.stageY+offset.y;
update = true;
}
}
function mouseOverHandler(e){
e.target.scaleX = .5;
e.target.scaleY = .5;
update = true;
}
function tick() {
if (update) {
update = false;
stage.update();
}
}
window.onload = init();
}());
这是我的 JS Fiddle example这样您就可以确切地看到发生了什么。只需将鼠标拖到矩形上即可了解我的意思。它一定很容易实现,但我不确定如何实现。
最佳答案
您的问题是,您绘制的矩形不是在 0|0 处,“标准”方法是从 0|0 开始绘制形状,然后通过 .x
将形状本身定位在某处> 和 .y
rectOpt0.graphics.beginFill("#C51A76").rect(140,160,78,35);
=> changed to
rectOpt0.graphics.beginFill("#C51A76").rect(0,0,78,35);
然后我将容器放置在 140|160 + regX/Y 偏移处:
containerOpt0.regX = 78/2; //regX/Y to have is scale to the center point
containerOpt0.regY = 35/2;
containerOpt0.x = 140 + 78/2; //placement + regX offset/correction
containerOpt0.y = 160 + 35/2;
这是更新后的 fiddle :http://jsfiddle.net/WfMGr/2/
关于javascript - 使用 EaselJS 调整可拖动填充的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15794748/