生成的绘图给出了意外的输出

Question

我正在尝试根据鼠标事件生成绘图，我注意到一些有趣的渲染行为，我无法解释为什么会这样。这是一个显示此示例的 jsbin：https://jsbin.com/qiqetoy/edit?html,output

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/konva@4.2.0/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Free Drawing Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>

  <body>
    Tool:
    <select id="tool">
      <option value="brush">Brush</option>
      <option value="eraser">Eraser</option>
    </select>
    <div id="container"></div>
    <script>
      var width = window.innerWidth;
      var height = window.innerHeight - 25;

      // first we need Konva core things: stage and layer
      var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height
      });

      var layer = new Konva.Layer();
      stage.add(layer);

      var isPaint = false;
      var mode = 'brush';
      var lastLine;

      stage.on('mousedown touchstart', function(e) {
        isPaint = true;
        var pos = e.pos;
        lastLine = new Konva.Line({
          stroke: '#df4b26',
          strokeWidth: 5,
          globalCompositeOperation:
            mode === 'brush' ? 'source-over' : 'destination-out',
          points: [pos.x, pos.y]
        });
        layer.add(lastLine);
      });

      stage.on('mouseup touchend', function() {
        isPaint = false;
      });

      // and core function - drawing
      stage.on('mousemove touchmove', function(e) {
        if (!isPaint) {
          return;
        }

        const pos = e.pos;
        var newPoints = lastLine.points().concat([pos.x, pos.y]);
        lastLine.points(newPoints);
        layer.batchDraw();
      });

      var select = document.getElementById('tool');
      select.addEventListener('change', function() {
        mode = select.value;
      });

        const line = [{
            "et": "md",
            "x": 109,
            "y": 94
        }, {
            "et": "mm",
            "x": 110,
            "y": 98
        }, {
            "et": "mm",
            "x": 110,
            "y": 103
        }, {
            "et": "mm",
            "x": 110,
            "y": 111
        }, {
            "et": "mm",
            "x": 110,
            "y": 116
        }, {
            "et": "mm",
            "x": 110,
            "y": 123
        }, {
            "et": "mm",
            "x": 110,
            "y": 129
        }, {
            "et": "mm",
            "x": 110,
            "y": 135
        }, {
            "et": "mm",
            "x": 110,
            "y": 141
        }, {
            "et": "mm",
            "x": 110,
            "y": 143
        }, {
            "et": "mm",
            "x": 110,
            "y": 147
        }, {
            "et": "mm",
            "x": 110,
            "y": 150
        }, {
            "et": "mm",
            "x": 111,
            "y": 152
        }, {
            "et": "mm",
            "x": 114,
            "y": 155
        }, {
            "et": "mm",
            "x": 112,
            "y": 154
        }, {
            "et": "mm",
            "x": 117,
            "y": 155
        }, {
            "et": "mm",
            "x": 120,
            "y": 155
        }, {
            "et": "mm",
            "x": 123,
            "y": 154
        }, {
            "et": "mm",
            "x": 127,
            "y": 151
        }, {
            "et": "mm",
            "x": 131,
            "y": 148
        }, {
            "et": "mm",
            "x": 135,
            "y": 145
        }, {
            "et": "mm",
            "x": 139,
            "y": 140
        }, {
            "et": "mm",
            "x": 142,
            "y": 137
        }, {
            "et": "mu"
        }, ];

        line.forEach(point => {
            if (point.et === 'mm') {
                stage.fire('mousemove', {
                    pos: {
                        x: point.x,
                        y: point.y
                    }
                });
            } else if (point.et == 'md') {
                stage.fire('mousedown', {
                    pos: {
                        x: point.x,
                        y: point.y
                    }
                });
            } else if (point.et === 'mu') {
                stage.fire('mouseup', {
                    pos: {
                        x: point.x,
                        y: point.y
                    }
                });
            }
        });      
    </script>
  </body>
</html>

这是该图的有趣部分：

您可以在上方看到在曲线处绘制了几个尖锐的 edges/lines。我无法解释这是怎么发生的。您还可以清楚地看到它不是 5px 宽（描边宽度设置为 5px）。

有更多 canvas/konvajs 绘图经验的人可以帮助解释这里发生的事情以及我应该怎么做才能摆脱这种行为？

谢谢， K

Answer 1

我想我明白这里的问题是什么了。数据好像有问题。这是隔离相关数据的 JSBin。 https://jsbin.com/nayado/edit?html,output

{
        "et": "md",
        "x": 110,
        "y": 147
    }, {
        "et": "mm",
        "x": 110,
        "y": 150
    }, {
        "et": "mm",
        "x": 111,
        "y": 152
    }, {
        "et": "mm",
        "x": 114,
        "y": 155
    }, {
        "et": "mm",
        "x": 112,
        "y": 154
    }, {
        "et": "mm",
        "x": 117,
        "y": 155
    }, {
        "et": "mu"
    },

数据似乎有问题，这可能是导致问题的原因。我现在需要弄清楚 canvas 是如何生成似乎不正常的触摸事件的。

生成的绘图给出了意外的输出

Generated drawing gives unexpected output

html5-canvas

konvajs

konva