Question

我是KineticJS初学者，我想制作两个可拖动的楔形物，它们在交叉点处变为特定的颜色。我在这个论坛上看过形状剪辑教程和形状交叉问题。我理解一般的策略是捕捉拖动事件，然后重绘KineticJS形状，并在该形状的drawFunc中使用context.rect / context.arc复制形状和剪辑。

我的问题是没有方便的context.wedge来模拟KineticJS楔形。所以要么我停止使用楔形，要么我执行复杂的计算来模拟具有context.arc和lines的楔形，或者我找到了更好的方法。有谁知道更好的方法？

谢谢，
美

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>

Answer 1

这是一个解决方案：

假设你的画布＃1有两个KineticJs楔形（红色和青色）。

当用户完成拖动时：

创建一个新的画布＃2（与画布＃1大小相同），其当前位置/旋转只有红色楔形。不要显示画布＃2（可见性：隐藏）。
创建一个新的画布＃3（与画布＃1大小相同），其当前位置/旋转只有青色楔形。不要显示画布＃3（可见性：隐藏）。
从画布＃2和画布＃3中的左上角像素开始，遍历画布＃2和画布＃3上的每个相应像素。
如果＃2和＃3上的任何相应像素都是“着色”，则楔形物在该像素处相交。
对于步骤4中的任何“点击”，在交叉像素处绘制画布＃1上的任何内容（例如将该像素更改为指定的颜色）

为了提高性能，您可以计算两个楔形的边界框，看它们是否相交。

如果楔子根本不相交，请不要打扰像素命中测试。

如果它们相交，只需按像素点击测试组合楔形的边界框。

夹在与KineticJS Wedges的交叉点上

1 个答案: