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);

效果很好，确实绘制了红线。

假设我想在相同图层中添加新行。如果我通过在// START到// END 之后添加相同的代码 stage.add（图层），则不会绘制新行。我还尝试在上绘制行：

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);

但没有任何改变。

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

另外：有没有办法从头开始REDRAW（即删除该行，将其从（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]);

KineticsJS：任何方式将线添加到EXISTING层？

1 个答案: