2013-04-21 2 views
1

나는 혼란 스럽습니다. EaselJS의 AlphaMaskFilter를 사용할 수 없습니다. 내가 잘못하고 있다고 생각하지는 않지만 내가 기대하는 바를 보여주지 못한다. 당신이 Google 광고판에서 손전등을 가리키는 것처럼 보일 것입니다. http://jsfiddle.net/mLn8e/EaselJS AlphaMaskFilter 작동을 얻으려면

var stage = new createjs.Stage("c"); 

var mask = new createjs.Shape(); 
mask.graphics.beginRadialGradientFill(["rgba(255, 255, 255, 1)","rgba(255, 255, 255, 0)"], [0, 1], 0, 0, 0, 0, 0, 20).drawCircle(0, 0, 20); 
mask.cache(-20, -20, 40, 40); 
mask.x = 100; 
mask.y = 100; 

var bg = new createjs.Shape(); 
bg.graphics.beginFill("#000000").rect(0, 0, 400, 400); 

stage.addEventListener("stagemousemove", function(e) { 
    mask.x = e.stageX; 
    mask.y = e.stageY; 
    stage.update(); 
}); 

stage.addChild(bg, mask); 
stage.update(); 

var img = new Image(); 
img.src = "https://www.google.nl/intl/en_ALL/images/logos/images_logo_lg.gif"; 
img.onload = function (e) { 
    var bmp = new createjs.Bitmap(e.target); 
    bmp.x = 0; 
    bmp.y = 0; 

    var amf = new createjs.AlphaMaskFilter(mask.cacheCanvas); 
    bmp.filters = [amf]; 

    stage.addChild(bmp); 
    stage.update(); 
}; 

가장 중요한 두 라인 드 VAR의 AMF있다 = ... 선과 bmp.filters = AMF]; 그 둘은 프로그램을 어 기고 있습니다.

미리 감사드립니다.

답변

1

필터 (예 : createjs.AlphaMaskFilter)는 CreateJS 및 EaselJS의 기본 패키지에 포함되어 있지 않습니다. 당신은 그 (것)들을 분리하여 포함해야한다. 이 정보는 문서에서 찾을 수 있습니다 : http://www.createjs.com/Docs/EaselJS/classes/Filter.html - 나는별로 눈에 띄지 않지만, 나는 똑같은 문제를 안고 있음을 알고 있습니다.

그리고 두 번째 것은 피들에 var라고 amff라고하고 아래 줄에 시도해보십시오. amf (바이올린의 28 + 29 행)

* 편집 : 그리고 내가 막 눈치 챘을 때 bmp을 캐시하지 마십시오. 필터를 적용하려면 캐시를 적용한 후에 캐시해야합니다. 필터를 사용하고 stagemousemove-listener에서 updateCache()를 사용하십시오. 다음은 수행하려는 작업과 비슷한 용도의 예입니다. https://github.com/CreateJS/EaselJS/blob/master/examples/AlphaMaskReveal.html

+0

고마워요! 나는 항상 이런 종류의 일들에 빠지다. 내가 컴퓨터에 도착하자마자 즉시 시도 할 것이다! – bobismijnnaam

+0

또한 비트 맵이 작동하려면 먼저 캐시해야합니다. GitHub의 examples 폴더에는 AlphaMaskFilter가 있으며 업데이트 된 문서에는 몇 가지 코드 샘플이 있습니다. http://www.createjs.com/Docs/EaselJS/classes/AlphaMaskFilter.html – Lanny