2013-06-05 18 views
0

是否可以將鼠標事件添加到形狀遮罩?我有面具工作,並在其他測試中使其動畫。但是現在我想知道是否可以點擊並拖動蒙版。是否可以使用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

要接收一個點擊事件,您必須將該圓圈添加到舞臺(stage.addChild(circle))或舞臺的一個小孩,即使它用作蒙版 - 在您的情況下,將透明虛擬物體作爲t可能會更好他是點擊監聽者。

+0

這個答案是正確的。我在這裏的EaselJS社區網站上回答了這個問題,其中包括一個修改過的示例.http://community.createjs.com/discussions/createjs/532-is-it-possible-to-to-apply-mousetouch-events-to-masks – Lanny

相關問題