Question

如何在KineticJS中使用globalCompositeOperation？我已经看过几个自定义函数创建的例子，但它们看起来都已经过时了，不再适用了。

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

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

谢谢， - 克里斯

Answer 1

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

enter image description here

方法是：

创建2个动态图层：背景图层和顶层。
将图像放在背景图层上。
添加一个完全填充顶层的矩形。
在顶层添加自定义形状（圆圈）。
自定义圈子使用“目的地”合成来“显示”

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

这是代码和小提琴：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>

globalCompositeOperation与KineticJS

1 个答案: