关于Konva绘制Line的问题

Question

为何从新设置points属性然后调用draw方法不会清空之前的绘制呢？点击之后变成了两条线<div id="container"></div><script src="./lib/jquery/dist/jquery.js" charset="utf-8"></script><script src="./lib/konva/konva.js" charset="utf-8"></script><script type="text/javascript">    $(function() {      const stage = new Konva.Stage({        container: '#container',        width: window.innerWidth,        height: window.innerHeight,      });      const layer = new Konva.Layer();      const line = new Konva.Line({        points: [10, 10, 100, 100],        stroke: 'black',        strokeWidth: 3,      });          line.on('click', event => {        line.points([10, 10, 100, 10]);        line.draw();      });          layer.add(line);      stage.add(layer);    });</script>

Answer 1

这个其实很简单，之所以设置了points属性并调用draw方法不会清空之前的绘制，而是变成了两条线，是因为你在点击的回调事件里调用的是line的draw(),而不是layer的draw(),所以layer不会重新绘制，而是又绘制了一个line，你可以把这段代码

line.on('click', event => {

    line.points([10, 10, 100, 10]);

    line.draw();

});

改成下面的这段

line.on('click', event => {

    line.points([10, 10, 100, 10]);

    layer.draw();

});