生成的图形会提供意外的输出结果

问题描述 投票：0回答：1

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

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/[email protected]/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>

这是该图的有趣部分：

enter image description here

您可以在上方看到在曲线上绘制了几条锋利的边缘/线条。我无法解释这是怎么发生的。您还可以清楚地看到它不是5px宽（笔划宽度设置为5px）。

[对canvas / konvajs绘图有更多经验的人可以帮助解释这里发生了什么，我应该怎么做才能摆脱这种现象？

谢谢，K

html5-canvas konvajs konva
1个回答
0
投票

我想我想出了这里的问题。数据似乎有问题。这是隔离问题数据的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"
    },

数据似乎混乱，这可能是导致问题的原因。现在，我需要弄清楚画布如何生成似乎混乱的触摸事件。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.