KineticJS中SVG路径在矩形中的孔答案

【问题标题】：Hole in rectangle by SVG Path in KineticJSKineticJS中SVG路径在矩形中的孔
【发布时间】：2014-02-18 20:10:19
【问题描述】：

globalCompositeOperation with KineticJS 描述了如何在一个矩形上用圆打洞。我想使用SVG路径而不是圆圈来打孔，例如：

米876.30799 492.53209Ç-36.64554 -0.29484 -69.69962 33.8121 -67.84069 70.49382 3.60444 27.60835 34.32996 46.34894 60.8096 40.13747 10.35153 -2.31261 21.0251 -4.39193 30.54799 -9.18203 10.45071 -6.35814 19.46448 -14.76346 29.73686 -21.39213 10.83886 -8.06083 21.32637 -16.94052 29.19035 -28.02964 -1.53049 -9.55445 -13.242-8.25504 -20.39998 -9.87533 -1298 -25.58989 -1296 -25.58989 -5.04642 -34.93228 -141 -34 -10.44361 -783 -10.44361 -7.80509 -20.00756 -17.00681 -27.17.00681 -27.11185 -28.00433 z

如何在new Kinetic.Path({ data: path }); 中实现漏洞，即context.globalCompositeOperation="destination-out";？

编辑：我刚刚在这里找到了圆形孔的更新版本：

use globalcompositeoperations on KineticJS 4.7.2

现在只是让它适用于 SVG 路径的问题；）

【问题讨论】：

标签： javascript canvas svg kineticjs

【解决方案1】：

使用 SVG 绘图来显示模糊的图像是相当复杂的。

以下是所需的步骤：

使用图像创建背景层
创建前景层
创建一个覆盖前景的矩形以遮挡背景图像
使用 SVG 数据创建 Kinetic.Path
使用 path.toImage 将该 SVG 路径转换为图像
创建一个 Kinetic.Shape，使用“destination-out”合成来绘制 SVG 图像以显示背景
Kinetic.Shape 不可拖动，因此请创建另一个具有相同 SVG 数据的 Kinetic.Path，以充当拖动显示 Kinetic.Shape 的句柄。拖动此路径手柄时，将显示的形状移动到相同的坐标。

演示：http://jsfiddle.net/m1erickson/7Yvt5/

此演示使用一个简单的 SVG 矩形，但您可以使用任何您需要的 SVG 绘图。

这里是示例代码：

<!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-v5.0.1.min.js"></script>

<style>
body{padding:20px;}
#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 bklayer = new Kinetic.Layer();
    stage.add(bklayer);
    var layer = new Kinetic.Layer();
    stage.add(layer);

    var path;
    var reveal;
    var cutoutImage;
    //var pathData="M 0,0 L50,0 50,50 0,50 z";
    var pathData="M 0,0 L50,0 50,50 0,50 z";

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

    function start(){

        var image=new Kinetic.Image({
            x:0,
            y:0,
            width:300,
            height:300,
            image:img
        });
        bklayer.add(image);
        bklayer.draw();

        var rect = new Kinetic.Rect({
            x: 0,
            y: 0,
            width: 300,
            height: 300,
            fill: 'skyblue',
            stroke: 'lightgray',
            strokeWidth: 3
        });
        layer.add(rect);

        // path filled
        var path = new Kinetic.Path({
          x: 0,
          y: 0,
          data:pathData,
          fill: 'green',
        });
        layer.add(path);

        // turn the path into an image
        cutoutImage=path.toImage({
            callback: function(img){
                reveal = new Kinetic.Shape({
                    sceneFunc: function(context) {
                        var ctx=this.getContext()._context;
                        var pos=this.pos;
                        ctx.save();
                        ctx.globalCompositeOperation="destination-out";
                        ctx.drawImage(this.image,pos.x,pos.y);
                        ctx.restore();
                    },
                });
                reveal.pos={x:0,y:0};
                reveal.image=img;
                reveal.position(path1.position());
                layer.add(reveal);
                // remove the original path
                path.remove();
                layer.draw();
            }
        });


        // draggable path
        path1 = new Kinetic.Path({
            x: 0,
            y: 0,
            data:pathData,
            stroke: 'red',
            draggable:true
        });
        path1.on("dragmove",function(){
            reveal.pos=this.position();
            layer.draw();
        });
        layer.add(path1);

        layer.draw();

    }   // end start 


    function addReveal(img){
        reveal = new Kinetic.Shape({
            sceneFunc: function(context) {
                var ctx=this.getContext()._context;
                var pos=this.pos;
                ctx.save();
                ctx.globalCompositeOperation="destination-out";
                ctx.drawImage(this.image,pos.x,pos.y);
                ctx.restore();
            },
        });
        reveal.pos={x:0,y:0};
        reveal.image=img;
        reveal.position(path1.position());
        layer.add(reveal);
        layer.draw();
    }


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

</script>       
</head>

<body>
    <div id="container"></div>
</body>
</html>

【讨论】：

完美。非常感谢。