形状与KineticJS的交点

Question

我想通过使用KineticJS只显示交点两种形状。 我该怎么做？ 我试图做到像下面的链接。 HTML5 Canvas Clipping Region。有其他方法吗？

Answer 1

我已经创建了基于施密解决方案。

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.

Answer 2

可以使用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();​