0

KineticJS を使用してレイヤーで複合操作を実行しようとしています。Chrome ではすべて正常に動作しますが、Firefox または IE10 では何も表示されません。コードはエラーなしで実行されます。

ここで問題を確認できます: http://clients.lilodesign.com/Lilo/Kinetic/

Chrome では、標準の MS Blue Trees 画像の一部が透けて見える円が表示されます。Firefox と IE10 では、空白の画面が表示されます。

ソースを表示すると、コードを表示できます。すべてインラインで、問題を示す非常に単純な例です。次の行を削除すると: ctx.globalCompositeOperation = "destination-atop"; 次に、3 つのブラウザーすべてで期待どおりに楕円が上にある青い木の画像が表示されるので、コードは「機能」します。

他の誰かがこれを経験し、回避策を見つけましたか? 次のようないくつかの提案されたソリューションを検索して試しました 。

しかし、これらはすべて Chrome でしか機能しないようです。

ヘルプやポインタをいただければ幸いです。

ありがとう

タイロン。

4

1 に答える 1

0

以前は、レイヤーのコンテキストを取得することでごまかすことができましたが、現在は信頼できません (ご存じのとおり)。

あなたはまだverrrryハックを取得して、次のようにすることができます: http://jsfiddle.net/m1erickson/6fTQU/

しかし、しないでください！ (このハックでさえ、透明なピクセルを含む画像では実際には機能しません)。

代わりに、キネティック カスタム シェイプ オブジェクトを作成することにより、公式の方法でそれを行います。

キネティック シェイプは、作業するための公式のキャンバスとコンテキストを提供します。

その結果、globalCompositeOperation は正常に機能します (確実に!)。

ここにコードとフィドルがあります: http://jsfiddle.net/m1erickson/LtxEe/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.1.min.js"></script>

<style>
        body{ background-color: ivory; }
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:300px;
  height:300px;
}
</style>        
<script>
$(function(){

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 300,
        height: 300
    });
    var layer = new Kinetic.Layer();
    stage.add(layer);


    var img=new Image();
    img.onload=function(){
        buildLayer(img);
    }
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/KoolAidMan.png";


    function buildLayer(img){

        var myShape=new Kinetic.Shape({
            drawFunc:function(canvas){
                var ctx=canvas.getContext();
                ctx.beginPath();
                ctx.drawImage(img,0,0);
                ctx.globalCompositeOperation="destination-atop";
                ctx.arc(150,150,60,0,Math.PI*2,false);
                ctx.closePath();
                ctx.fill();
                canvas.fillStroke(this);
            },
            x:0,
            y:0,
            width:img.width,
            height:img.height
        });
        layer.add(myShape);
        layer.draw();

    }

}); // end $(function(){});

</script>       
</head>

<body>
    <div id="container"></div>
</body>
</html>
于 2013-06-30T07:05:25.463 に答える