javascript - Canvas KineticJS - 单击按钮时重新绘制一些东西

Question

我使用 kineticjs 库。我创建了这样一行（http://jsfiddle.net/zP364/）

var redLine = new Kinetic.Line({
    points: [973, 570, 340, 423, 450, 60, 500, 20],
    stroke: 'red',
    strokeWidth: 15,
    lineCap: 'round',
    lineJoin: 'round',
    draggable: true
}); 

当我单击更改按钮时，我希望行必须像这样更改。谢谢

document.getElementById('change').addEventListener('click', function() {
        redLine.point = [600, 400, 300, 100, 700, 80, 200, 30]; // i want re-draw line 
        redLine.stroke = 'blue'; // and change color
        layer.draw();
}, false);

Answer 1

不是 redLine.point...使用 redLine.setPoints(newPointsArray)

redLine.setPoints([600, 400, 300, 100, 700, 80, 200, 30]);

在这里查看一些好的 KineticJS 教程：http ://www.html5canvastutorials.com/kineticjs/html5-canvas-events-tutorials-introduction-with-kineticjs/

并在此处查看 KineticJS 文档： http ://kineticjs.com/docs/symbols/Kinetic.Line.php#setPoints