0

我正在尝试使用 KineticJS 对图层进行复合操作。在 Chrome 中一切正常，但对于 firefox 或 IE10 没有任何显示。代码运行时没有任何错误。

你可以在这里看到这个问题：http: //clients.lilodesign.com/Lilo/Kinetic/

Chrome 您应该会看到一个圆圈，其中显示了标准 MS Blue Trees 图像的一部分。在 Firefox 和 IE10 中，您只会看到一个空白屏幕。

您可以通过查看源代码来查看代码。它全部内联，并且是一个非常简单的示例来显示问题。如果删除以下行：ctx.globalCompositeOperation = "destination-atop"; 然后，您在所有三个浏览器中都可以看到顶部带有椭圆的蓝色树图像，因此代码确实“有效”。

有没有其他人经历过这种情况并找到了解决方法？我已经搜索并尝试了几个建议的解决方案，例如： shape intersection with KineticJS

但所有这些似乎仍然只适用于 Chrome。

任何帮助或指示将不胜感激。

谢谢

泰隆。

4

1 回答 1

0

我们过去可以通过抓取图层的上下文来作弊，但现在它不可靠了（正如您所发现的）。

你仍然可以得到 verrrry hacky 并这样做：：http: //jsfiddle.net/m1erickson/6fTQU/

但是不要！ （即使这种 hack 实际上也不适用于具有透明像素的图像）。

相反，通过创建 Kinetic 自定义形状对象以官方方式进行。

Kinetic Shape 为您提供官方画布和使用环境。

结果， 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 回答