我是 KineticJS 初学者，我想制作两个可拖动的楔子，在它们的交点处更改为特定颜色。我在这个论坛上看到了形状剪裁教程和形状相交问题。我知道一般策略是捕获拖动事件，然后重绘 KineticJS 形状，并在该形状的 drawFunc 中使用 context.rect/context.arc 复制形状并对其进行剪辑。
我的问题是没有方便的 context.wedge 来模拟 KineticJS 楔形。所以要么我停止使用楔形，要么我执行复杂的计算来模拟带有 context.arc 和线条的楔形，或者我想出一个更好的方法。有谁知道更好的方法？
谢谢，
梅
JSFiddle 上的代码：http: //jsfiddle.net/kdRjP/5/ （不起作用，只是在整个地方制作重复的楔子，甚至没有剪掉的楔子。）
代码：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" charset="utf-8" src="js/kinetic-v4.3.1.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
drawWedges();
function drawWedges() {
var stage = new Kinetic.Stage({
container: "container",
width: 400,
height: 400
});
window.console.log("Wedges: 1");
var wedgeLayer = new Kinetic.Layer();
var wedgeGroup = new Kinetic.Group({
x: stage.getWidth() / 2,
y: stage.getWidth() / 2
});
var wedge_1 = new Kinetic.Wedge({
x: -100,
y: 0,
radius: 80,
angleDeg: 40,
opacity: 0.7,
fill: 'red',
stroke: 'black',
strokeWidth: 2,
draggable: true,
rotationDeg: 0
});
var wedge_2 = new Kinetic.Wedge({
x: 100,
y: 0,
radius: 80,
angleDeg: 40,
opacity: 0.7,
fill: 'cyan',
stroke: 'black',
strokeWidth: 2,
draggable: true,
rotationDeg: 0
});
function makeShapeClip(clipShape, compositeShape) {
clipShape.attrs.drawFunc_bak = clipShape.attrs.drawFunc;
clipShape.attrs.drawFunc = function() {
var context = this.getContext();
context.save();
context.beginPath();
this.attrs.drawFunc_bak.call(this, context);
context.clip();
context.beginPath();
compositeShape.attrs.drawFunc.call(this, context);
context.fill();
context.closePath();
context.restore();
};
return compositeShape;
};
wedge_1.on("dragend", function(evt) {
var mousePos = stage.getMousePosition();
var stageIntersections = stage.getIntersections({"x": mousePos.x, "y": mousePos.y});
if (stageIntersections.length > 0) {
// Want to draw a piece of wedge_1 clipped around wedge_2.
// Since can't turn wedge_2 into a clip path after it's been drawn,
// draw a duplicate of wedge_2 superimposed on top of wedge_2,
// turn that duplicate into a clip path,
// and then try to draw a duplicate of wedge_1 into it.
// Start by creating the wedge_1 duplicate in proper "intersection area color"
var wedgeComposite = new Kinetic.Wedge({
x: wedge_1.getX(),
y: wedge_1.getY(),
radius: wedge_1.getRadius(),
angleDeg: wedge_1.getAngleDeg(),
opacity: 0.5,
fill: 'yellow',
stroke: 'blue',
strokeWidth: 2,
draggable: true,
rotationDeg: wedge_1.getRotationDeg()
});
// Now pass that wedge_1 duplicate into a special function that
// creates wedge_2 duplicate and makes it into a clip path.
var wedgeClip = makeShapeClip(new Kinetic.Wedge({
x: stageIntersections[0].getX(),
y: stageIntersections[0].getY(),
radius: stageIntersections[0].getRadius(),
angleDeg: stageIntersections[0].getAngleDeg(),
opacity: 0.5,
fill: '#999999',
stroke: 'red',
strokeWidth: 2,
draggable: true,
rotationDeg: stageIntersections[0].getRotationDeg()
}), wedgeComposite);
wedgeGroup.add(wedgeClip);
}
wedgeLayer.draw();
});
wedgeGroup.add(wedge_1);
wedgeGroup.add(wedge_2);
wedgeLayer.add(wedgeGroup);
stage.add(wedgeLayer);
}
</script>
</body>
</html>