我想通過使用KineticJS只顯示交點兩種形狀。 我該怎麼做? 我試圖做到像下面的鏈接。 HTML5 Canvas Clipping Region。有其他方法嗎?形狀與KineticJS的交點
0
A
回答
0
我已經創建了基於施密解決方案。
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");
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();
+0
Shmi,是否可以添加這個小提琴。 http://jsfiddle.net/ccArp/1/ – sara
相關問題
- 1. 擴展kineticjs形狀
- 2. KineticJS:兩個形狀
- 3. 補間Kineticjs形狀
- 4. KineticJS調用moveToTop()點擊超過形狀
- 5. KineticJS,移動形狀和REMOVE形狀
- 6. 與畫布形狀互動KineticJS
- 7. Keydown的KineticJS形狀運動
- 8. Kineticjs刪除多個形狀
- 9. KineticJS形狀不透明
- 10. KineticJS - 動態創建形狀
- 11. KineticJS:陰影沒有形狀?
- 12. 唯一標識KineticJS形狀
- 13. KineticJS - 在觸點/鼠標移動觸發器上交換形狀位置
- 14. KineticJS和區域內的形狀
- 15. 用Kineticjs編輯形狀的位置
- 16. 多種形狀的事件n KIneticJS
- 17. kineticjs中的旋轉os形狀
- 18. kineticjs - 移位組中的形狀
- 19. KineticJS - 繪製複雜的形狀
- 20. KineticJS緩存不可見的形狀
- 21. KineticJS - 形狀之間的碰撞檢測
- 22. 將kineticJS中的形狀移動到鼠標點擊
- 23. 如何獲取點擊形狀的位置(KineticJS)
- 24. kineticjs停止拖動到與另一個重疊的形狀
- 25. 使用KineticJS使形狀捕捉到其他形狀
- 26. 在KineticJS中檢測點擊舞臺但不是形狀
- 27. Kineticjs圖像/形狀/圖層失真
- 28. 控制KineticJS從形狀中心旋轉?
- 29. kineticjs'在mousemove'不跟蹤外部形狀
- 30. 集dragBoundFunc在旋轉形狀Kineticjs
您應該添加你想顯示 –
簡單的矩形和圓形的兩個形狀的細節。 – sara