与 KineticJS 的形状相交答案

【问题标题】：shape intersection with KineticJS与 KineticJS 的形状相交
【发布时间】：2012-11-25 21:07:48
【问题描述】：

我想使用 KineticJS 仅显示两个形状的交集。我怎样才能做到这一点？我试着像下面的链接那样做。 HTML5 Canvas Clipping Region。有没有其他办法？

【问题讨论】：

你应该在你试图展示的两个形状上添加细节

标签： javascript html canvas html5-canvas kineticjs

【解决方案1】：

您可以使用globalCompositeOperation 执行此操作：http://jsfiddle.net/wbzwX/

ctx.fillStyle="#000";
ctx.fillRect(50,50,100,100);

ctx.globalCompositeOperation = "source-in"; 
// this will use the fillstyle of the next drawn object. 
// "destination-in" will use the previous fillstyle.

ctx.beginPath();
ctx.arc(100,50,30,0,Math.PI*2,false);
ctx.closePath();
ctx.fillStyle="#f00";
ctx.fill();

【讨论】：

【解决方案2】：

我已经创建了基于 Shmi 的解决方案。

   function makeShapeComposite(shape, operation) {
        shape.attrs._drawFunc = shape.attrs.drawFunc;
        shape.attrs.drawFunc = function (context) {
            context.save();
            context.globalCompositeOperation = operation;
            this.attrs._drawFunc.call(this, context);
            context.restore();
        };
        return shape;
    };   

   var pol=  makeShapeComposite(new Kinetic.RegularPolygon({
           x: 250,
            y: 100,
            sides: 4,
            radius: 70,
            fill: '#00D2FF',
            stroke: 'black',
            strokeWidth: 2
        }), "destination-in");

小提琴：http://jsfiddle.net/sara9/2v7W2/5/

Refer this tutorial.

【讨论】：