2013-06-05 3 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