EaselJSまたはTweenMaxのアルファフィルタを使用したマスク

Question

私はイメージの上を通過する光沢効果を出そうとしています。この効果はイメージの内容に表示され、すべてのコンテナでは表示されません。私はそれをたくさん試していて、alphaMaskChannelを動かすことはできません。誰かが私を助けて、私が間違っていることを私に説明することができれば、私は感謝します。

これは私の例である：

var stage = new createjs.Stage("canvas"); 
createjs.Ticker.addEventListener("tick", tick); 

var imgSheen = new createjs.Shape(); 
var bmp = new createjs.Bitmap("http://upload.wikimedia.org/wikipedia/pt/0/02/Homer_Simpson_2006.png"); 


imgSheen.graphics.beginLinearGradientFill(['rgba(255,255,255,0)', '#000', 'rgba(255,255,255,0)'], [0, 0.5, 1], 0, 0, 50, 0).drawRect(0, 0, 100, 600); 
imgSheen.rotation = 18; 

imgSheen.filters = [ 
      new createjs.AlphaMapFilter(bmp) 
     ]; 
stage.addChild(bmp, imgSheen); 

function tick(event) { 
    createjs.Tween.get(imgSheen).to({x:300}, 4000); 
    stage.update();  
} 

はリンク：https://jsfiddle.net/Dbardaji/ndmzLt1z/

Answer 1

私は私はあなたがやろうとしているものを知っていると思うし、そこに到達するためのいくつかのステップがあります。アルファマスクは、Animate/Flashのようなものよりキャンバスで複雑ですので、設定が難しくなります。エフェクトをアニメートすることも難しいです。

が正しくあなたが探しているフィルタはAlphaMaskFilter、ないAlphaMapFilterある

1. フィルタを適用します。後者は、アルファチャンネルではなく、カラーチャンネルを使用してフィルタを適用します。また、フィルタはの画像を使用し、ビットマップは使用しません。

2. エラーが発生しないように、または何も表示されないように、イメージを適用する前にイメージが読み込まれるまで待つ必要があります。

3. フィルタを適用するには、表示オブジェクトをキャッシュする必要があります。これはオブジェクトを「フリーズ」するので、いつでも変更されます。オブジェクトを再キャッシュする必要があります。

4. "imgSheen"にフィルタを適用していますが、imgSheenをソースとして使用する必要があります。これを行うには、代わりにimgSheenをキャッシュし、cacheCanvasをAlphaMaskFilterに渡し、それをbmpに適用してから、bmpをキャッシュしてフィルタを適用する必要があります。

5. ステージにimgSheenを追加しないでください。これは、ビットマップに適用されるフィルタの一部であり、可視ではありません。アニメーションを追加するために効果

   をアニメート

   imgSheen.cache(0,0,100,400); // Cache the sheen so it can be used in the filter 
   bmp.filters = [ 
       new createjs.AlphaMaskFilter(imgSheen.cacheCanvas) // Use the right filter 
   ]; 
   bmp.cache(0,0,bmp.image.width,bmp.image.height); // Apply the filter 
   stage.addChild(bmp); // Don't add imgSheen to the stage 
   

   の位置： https://jsfiddle.net/lannymcnie/ndmzLt1z/3/

   キー・ビット：ここ

は、上記の手順のサンプルでありますフィルタを変更する必要があります。あなたは、フィルタは線形ビットマップが仕事を満たす

方法を変更する任意の時間をビットマップをキャッシュし直す必要があり、あなただけのx位置を変更することはできません（あなたが持っている

1. ：ので、これが困難になりますグラデーションの位置を更新するには、drawRectの位置とのキャッシュの位置を単純化するために、コンテナを追加してグラデーションを入れ、代わりにコンテナをキャッシュしました。つまり、imgSheenは自由に移動でき、コンテナキャッシュはいつでも使用できます。

2. フィルタのキャッシュは、コンテナとのキャッシュを変更するたびに更新する必要があります。

は、私は（私達はちょうどそれが1時間に起こるしたい - 各目盛りを作成できません）ダニの方法のうちのTweenを移動して、キャッシュを更新するには、「変更」のリスナーを追加しました。 https://jsfiddle.net/lannymcnie/ndmzLt1z/4/

キービット：

c = new createjs.Container(); 
c.addChild(imgSheen); 

createjs.Tween.get(imgSheen, {loop:true}).to({x:200}, 2000, createjs.Ease.quadInOut) 
    .on("change", function() { 
     c.cache(0,0,250,400); 
     bmp.cache(0,0,bmp.image.width,bmp.image.height); 
    }); 

キャッシュを更新すると、すべてのフレームが理想的ではないことだけを率いてここで更新デモがあります。画像を覆う逆のグラデーションをマスクするのではなく、背景にブレンドするのが良いかもしれません。グラデーションとイメージをマスクしてイメージサイズに制限することができます。

希望に役立ちます！