关于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();
});