globalCompositeOperation with KineticJS

问题

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.

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

Thanks, - Chris

回答1:

Here’s how to use globalCompositeOperation in KineticJS to do a “reveal”

The method is:

Create 2 Kinetic layers: a background layer and a top layer.
Put an image on the background layer.
Add a rectangle that completely fills the top layer.
Add a custom shape (a circle) on the top layer.
The custom circle uses “destination-out” compositing to “reveal” the image underneath

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

Here is code and a Fiddle: 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>

来源：https://stackoverflow.com/questions/18583431/globalcompositeoperation-with-kineticjs

标签

kineticjs