KineticJS와 교차하는 모양

Question

KineticJS을 사용하여 교차점 만 표시하고 싶습니다. 어떻게해야합니까? 다음 링크와 같이 해 보았습니다. HTML5 Canvas Clipping Region. 다른 방법이 있습니까?

Answer 1

나는 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.

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();​