是否可以使用EaselJs将鼠标/触摸事件应用于蒙版?

时间:2013-06-05 16:37:00

标签: mouseevent easeljs

是否可以将鼠标事件添加到形状蒙版?我有掩码工作,并在其他测试中动画了它。但现在我想知道是否可以点击和拖动蒙版。

您可以在此处查看示例:http://www.webnamehere.com/mask/mask.html

虽然Easeljs似乎永远不会在jsFiddle中工作,但你也可以在这里看到代码:http://jsfiddle.net/8kbu3/1/

var circle = new createjs.Shape();
var Galaxy;
$(document).ready(function() {


canvasWidth = "1024px";
canvasHeight = "768px";
stage = new createjs.Stage('demoCanvas');
createjs.Touch.enable(stage);
$("#demoCanvas").attr({width:canvasWidth, height:canvasHeight});


    Galaxy = new Image();
    Galaxy.src = "images/galaxy.jpg";
    Galaxy.onload = handleImageLoad;    


function handleImageLoad() {
    GalaxyBitmap = new createjs.Bitmap(Galaxy);
    GalaxyBitmap.x = 0;
    GalaxyBitmap.y = 0;

    containerGalaxy = new createjs.Container();
    containerGalaxy.addChild(GalaxyBitmap);
    containerGalaxy.x = 0;
    containerGalaxy.y = 0;

    circle = new createjs.Shape();
    circle.graphics.beginFill('blue').drawCircle(80,80,50).endFill();   
    containerGalaxy.mask = circle;
    stage.addChild(containerGalaxy);
    stage.update(); 
}   

circle.onClick = function(evt){
    alert('what the F?');
}

circle.onPress = function(evt){
    var offset = {x:circle.x-evt.stageX, y:circle.y-evt.stageY};
        evt.onMouseMove = function(ev) {
            circle.x = ev.stageX+offset.x;
            circle.y = ev.stageY+offset.y;
            console.log("circle X: " + circle.x + " | Y: " + circle.y);

            stage.update();
        }
}   

谢谢你们

1 个答案:

答案 0 :(得分:1)

要接收点击事件,您必须将圆圈添加到舞台(stage.addChild(circle))或舞台的孩子,即使它作为面具 - 在您的情况下,最好采取一个透明的虚拟对象作为点击监听器。