Kinetic JS：有什么方法可以将 Line 添加到 EXISTING 层？

Question

我有以下代码（使用 KineticJS HTML5 Canvas 库）：

    var dWidth = $(document).outerWidth() , dHeight = $(document).outerHeight();

    var window.stage = new Kinetic.Stage({ // Kinetic stage = work area
        container: 'whole_page',
            width: dWidth,
        height: dHeight
    });

    // START
    var line = new Kinetic.Line({
        points: [{x:200,y:75},{x:656,y:171}],
        stroke: 'red',
        strokeWidth: 3,
        lineCap: 'round',
        lineJoin: 'round'
     });

    layer.add(line);

   // END

    stage.add(layer);

效果很好，确实画了红线。

假设我想在 same 层中添加 new 行。 如果我通过从 // START 到 // END after stage.add(layer) 添加相同的代码来做到这一点，则不会绘制新行。 我还尝试在一组上画线：

    var dWidth = $(document).outerWidth() , dHeight = $(document).outerHeight();

    var window.stage = new Kinetic.Stage({ // Kinetic stage = work area
        container: 'whole_page',
            width: dWidth,
        height: dHeight
    });

    // START
    var line = new Kinetic.Line({
        points: [{x:200,y:75},{x:656,y:171}],
        stroke: 'red',
        strokeWidth: 3,
        lineCap: 'round',
        lineJoin: 'round'
     });

    group.add(line);
    layer.add(group);


   // END

    stage.add(layer);

但没有任何变化。

我该怎么做？ 我有一个页面，我需要动态地（根据用户交互）添加新行，因此我想到的唯一解决方案是每行一层但它相当棘手且效率低下。

还有：有什么办法可以“从头开始”重新绘制（即删除线，将其从 (x1,y1) 重新绘制到 (x2,y2)）一条线我 已经添加？

提前感谢您的任何提示。

Answer 1

这是一个通用函数，它接受 [x1,y1,x2,y2] 并创建一个新行。

演示：http://jsfiddle.net/m1erickson/LYF23/

function addLine(points){
    var line = new Kinetic.Line({
        points:points,
        stroke: 'black',
        strokeWidth: 4
    });
    layer.add(line);

    // don't forget to do layer.draw after creating the line or it won't appear
    layer.draw();
    return(line);
}

你可以调用函数来添加这样的一行：

var lineNumberOne = addLine([25,50,100,20]);

您可以像这样删除该行：

lineNumberOne.destroy();
layer.draw();

请记住在创建或销毁形状时调用 layer.draw()，以便您的更改显示在图层上。

您可以使用 .setPoints 更改组成一条线的 x 和 y。这比破坏线并使用新点创建新线要有效得多。

lineNumberOne.setPoints([50,150,200,25]);