Question

在我的应用程序中，我有几个相互交叉的形状，例如，形状A，形状B和形状C.需要从形状A到形状C到形状B绘制折线，所以线条位于所有形状和几乎在中心交叉。

实施此方法的最有效方法是什么？以下是示例代码：http://jsfiddle.net/dselkirk/ZMUkE/。

我需要绘制一条黄线，但不能手动绘制：

var stage = new Kinetic.Stage({
    container: 'container',
    width: 850,
    height: 750
});

var layer = new Kinetic.Layer({
    x: 0,
    y: 0
});


var rect = new Kinetic.Rect({
    x: 100,
    y: 100,
    width: 80,
    height: 60,
    fill: '#E67E22'
});

var rect2 = new Kinetic.Rect({
    x: 640,
    y: 70,
    width: 40,
    height: 70,
    fill: '#3498DB',
});

var circle = new Kinetic.Circle({
    x: 600,
    y: 150,
    radius: 70,
    fill: '#2ECC71',
});


var polyOne = new Kinetic.Polygon({
     x: 80,
     y: 100,
     points: [73, 192, 73, 160, 340, 23, 500, 109, 499, 139, 342, 93],
     fill: '#9B59B6'
});

var polyTwo = new Kinetic.Polygon({
    x: 100,
    y: 160,
    points: [-5, 0, 75, 0, 70, 10, 70, 60, 60, 90, 61, 92, 64, 96, 66, 100, 67, 105, 67, 110, 67, 113, 66, 117, 64, 120, 63, 122, 61, 124, 58, 127, 55, 129, 53, 130, 50, 130, 20, 130, 17, 130, 15, 129, 12, 127, 9, 124, 7, 122, 6, 120, 4, 117, 3, 113, 3, 110, 3, 105, 4, 100, 6, 96, 9, 92, 10, 90, 0, 60, 0, 10],
    fill: '#e74c3c'
});

var imageObj = new Image();
imageObj.onload = function () {
    var yoda = new Kinetic.Image({
        x: 120,
        y: 120,
        image: imageObj,
        width: 15,
        height: 18
    });

    // add the shape to the layer
    layer.add(yoda);
    stage.add(layer);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';


var imageObj2 = new Image();
imageObj2.onload = function () {
    var dart = new Kinetic.Image({
        x: 650,
        y: 80,
        image: imageObj2,
        width: 20,
        height: 21
    });

    layer.add(dart);
    stage.add(layer);
};

 var yellowLine = new Kinetic.Line({
    points: [{x:125,y:140},{x:125,y:280}, {x:425,y:150}, {x:555,y:220}, {x:655,y:100}],
    stroke: 'yellow',
    strokeWidth: 2,
    lineJoin: 'round',
    dashArray: [33, 10]
  });

layer.add(polyOne);
layer.add(polyTwo);
layer.add(yellowLine);
layer.add(circle);
layer.add(rect);
layer.add(rect2);
stage.add(layer);
yellowLine.moveToTop();

目前我觉得算法应该是： 1）找到所有形状的交点。 2）在这些交叉点之间画线。如果任何线点位于形状外部 - 水平/垂直移动直到它位于形状内部。

但是这个算法看起来效率不高。

我如何在KineticJS中的几个形状内画一条线？

0 个答案: