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

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

1 个答案: