我想在EaselJS中用鼠标创建一个pan函数。是否有可能以这样一种方式填充一个容器,使它可拉。或者还有另一个类似的解决方案,我可以在画布上移动一组子元素?现在,只有子元素是可拖的。
这就是我所拥有的:
var canvas = document.getElementById('canvas');
canvas.width = 1000;
canvas.height = 550;
var stage = new createjs.Stage(canvas);
var container = new createjs.Container();
stage.addChild(container);
container.addEventListener("pressmove", function (evt) {
evt.target.set({
x: evt.stageX,
y: evt.stageY
});
stage.update();
});
发布于 2014-01-27 09:12:37
尝试在容器中创建一个已填充的背景项,以便pressmove
事件在用户与容器交互的任何地方触发。另外,更改事件处理程序中的代码,使其对事件对象的currentTarget
(在本例中为容器(fiddle))起作用:
var canvas = document.getElementById('canvas');
canvas.width = 1000;
canvas.height = 550;
var stage = new createjs.Stage(canvas);
var container = new createjs.Container();
stage.addChild(container);
container.addEventListener("pressmove", function (evt) {
console.log('press');
evt.currentTarget.set({
x: evt.stageX,
y: evt.stageY
});
stage.update();
});
// Add a background
var bg = new createjs.Shape();
bg.graphics.beginStroke("#000");
bg.graphics.beginFill("#fff");
bg.graphics.setStrokeStyle(1);
bg.graphics.drawRect(0, 0, 400, 400);
container.addChild(bg);
// Add a thing
var square = new createjs.Shape();
square.graphics.beginFill("#000");
square.graphics.drawRect(0, 0, 50, 50);
square.x = 100;
square.y = 100;
container.addChild(square);
stage.update();
https://stackoverflow.com/questions/21385293
复制相似问题