关于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 => {&nbsp; &nbsp; line.points([10, 10, 100, 10]);&nbsp; &nbsp; line.draw();});改成下面的这段line.on('click', event => {&nbsp; &nbsp; line.points([10, 10, 100, 10]);&nbsp; &nbsp; layer.draw();});