On the problem of drawing Line with Konva

Why doesn"t re-setting the points property and then calling the draw method not empty the previous painting?

when clicked, it becomes two lines
clipboard.png


    $(function() {
      const stage = new Konva.Stage({
        container: "-sharpcontainer",
        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>
Mar.04,2021

this is actually very simple. The reason why you set the points property and call the draw method will not clear the previous drawing, but become two lines, because you called line's draw (), instead of layer's draw (), in the callback event you clicked, so layer will not redraw, but draw another line, and you can put this code

.
line.on('click', event => {
    line.points([10, 10, 100, 10]);
    line.draw();
});

change it to the following paragraph

line.on('click', event => {
    line.points([10, 10, 100, 10]);
    layer.draw();
});

 
Menu