KineticJS的globalCompositeOperation

本文介绍了KineticJS的globalCompositeOperation的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何在KineticJS中使用globalCompositeOperation?我已经看到了几个创建自定义函数的示例，但是它们似乎都已过时，无法再使用了.

How can I use globalCompositeOperation with KineticJS? I've seen a couple of examples where a custom function is created but they all seem out of date and don't work anymore.

我正在尝试创建一个应用程序，其中可以在画布上移动形状(例如圆形)并显示其下方的图像，然后将其锁定到位以创建图像蒙版.

I'm trying to create an app where a shape (like a circle) can be moved around the canvas and reveal the image below it and then locked into place to create the image mask.

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

It seems that using a composite would be better than trying to use a fillImagePattern. Any ideas would be greatly appreciated.

谢谢，-克里斯

推荐答案

这里是如何在KineticJS中使用globalCompositeOperation进行公开"

方法是:

创建2个动力学层:背景层和顶层.
将图像放置在背景层上.
添加一个完全填充顶层的矩形.
在顶层添加自定义形状(圆形).
自定义圈子使用目的地向外"合成来显示"下面的图像

当然，如果您的设计允许矩形显示"，则只需创建一个裁剪区域即可.

Of course, if your design allows a rectangular "reveal", you can just create a clipping region.

这是代码和小提琴: 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的globalCompositeOperation的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

Kineticjs