使用 KineticJS 的 globalCompositeOperation答案

【问题标题】：globalCompositeOperation with KineticJS使用 KineticJS 的 globalCompositeOperation
【发布时间】：2013-09-06 03:58:26
【问题描述】：

如何将 globalCompositeOperation 与 KineticJS 一起使用？我见过几个创建自定义函数的示例，但它们似乎都已经过时并且不再起作用了。

我正在尝试创建一个应用程序，其中可以在画布周围移动形状（如圆形）并显示其下方的图像，然后锁定到位以创建图像蒙版。

似乎使用复合比尝试使用 fillImagePattern 更好。任何想法将不胜感激。

谢谢， - 克里斯

【问题讨论】：

标签： kineticjs

【解决方案1】：

以下是如何在 KineticJS 中使用 globalCompositeOperation 进行“显示”

方法是：

创建 2 个动力学层：一个背景层和一个顶层。
在背景层上放一张图片。
添加一个完全填满顶层的矩形。
在顶层添加自定义形状（圆形）。
自定义圆圈使用“destination-out”合成来“显示”下方的图像

当然，如果您的设计允许矩形“显示”，您可以只创建一个剪切区域。

这是代码和小提琴：http://jsfiddle.net/m1erickson/QcnHa/

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

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

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 400,
        height: 400
    });
    var layerBk = new Kinetic.Layer();
    stage.add(layerBk);
    var layer = new Kinetic.Layer();
    layer.setDraggable("true");
    stage.add(layer);


    var img=new Image();
    img.onload=function(){
        start();
    }
    img.src="koolaidman.png";


    function start(){

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

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

        var revealOutline=new Kinetic.Circle({
            x:120,
            y:120,
            radius:78,
            stroke:"black",
            strokeWidth:4
        });
        layer.add(revealOutline);

        var thumb=new Kinetic.Polygon({
            points:[200,125, 200,115, 250,100, 250,140],
            fill:"green",
            stroke:"black"
        });
        layer.add(thumb);

        var reveal = new Kinetic.Shape({
          drawFunc: function(canvas) {
            var context = canvas.getContext();
            context.save();
            context.beginPath();
            context.globalCompositeOperation="destination-out";
            context.arc(120,120,75,0,Math.PI*2,false);
            context.closePath();
            canvas.fillStroke(this);
            context.restore();
          },
          dragBoundFunc: function(pos) { return(pos); },
          fill: '#00D2FF',
          stroke: 'black',
          strokeWidth:4,
          draggable:true
        });
        reveal.on("mousedown",function(){
            console.log("reveal: "+getX());
        });
        layer.add(reveal);


        layerBk.draw();
        layer.draw();
    }


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

</script>       
</head>

<body>
    <p>Drag the green grabber to move the reveal</p>
    <div id="container"></div>
</body>
</html>

【讨论】：

您能否更新您的答案以使其与最新的 KineticJS 一起使用？我最感兴趣的是使用 Kinetic.Path 而不是圆形作为显示形状。见stackoverflow.com/questions/21390159/…
@OldrichSvec 完成...请参阅我对您的新问题的回答。干杯！