javascript - 如何识别手绘形状与 SVG 模型相似

Question

我想让用户重新绘制一个 svg 形状(数字 8)，并能够检测形状是否完成良好。用户必须用手指在移动设备上重新绘制此 svg 的边界，才能继续浏览该网站。我想使用 JavaScript。

我的第一种方法是使用隐藏的 div 并检测鼠标何时以正确的顺序经过每个 div(请参阅 sketch )，但可能会出现错误。我还想以突出显示绘制的轨迹的方式来显示填充进度。

我应该使用哪种方法？

Answer 1

嗯，这取决于您如何实现绘图 Canvas 。没有实际的代码，很难提供一个好的答案。

无论如何，您可能会尝试使用隐藏/透明的第二条路径并与第一个路径重叠。

然后捕获 mouseenter/mouseleave (或您用于“绘制”的任何事件)并根据事件坐标，评估“形状”是否正确绘制。

基本示例:

var foo = document.getElementById('foo'),
  x = -1,
  y = -1;

function between(n, en, err) {
  return (n >= en - err && n <= en + err);
}

function fail() {
  // user failed so do stuff accordingly
  console.warn('User failed to draw properly');
  // reset stuff
  x = -1;
  y = -1;
}


foo.addEventListener("mouseenter", function(event) {
  console.log('enter: ' + event.x + ',' + event.y);
  if (x === -1) {
    // first enter, so check if user started in the correct position
    // This is tied to the position of the canvas, if the user must start at the beginning
    // of the path or he can start wherever...
    // so you should implement your own logic
    return;
  }

  // Check if drawing is complete
  // Onde again, same as above


  // check if after the first mouseleave, the mouseenter event was
  // in an acceptable range
  if (!between(x, event.x, 10) || !between(y, event.y, 10)) {
    fail();
  }

});

foo.addEventListener("mouseleave", function(event) {
  console.log('exit: ' + event.x + ',' + event.y);
  x = event.x;
  y = event.y;
});

<svg>
  <path id="foo" d="M100,100
         L150,100
         a50,25 0 0,0 150,100
         q50,-50 70,-170
         Z" stroke-width="20" style="stroke: red; fill: none;" />
  <path d="M100,100
         L150,100
         a50,25 0 0,0 150,100
         q50,-50 70,-170
         Z" style="stroke: #006666; fill: none;" />
</svg>

例如，在本例中我接受 10px 的“错误”。所以我将隐藏路径的描边设置为20px。

当用户鼠标离开接受的绘图区域时，如果没有重新进入可接受的范围，则绘图失败并重置。

这只是一个示例，但您可以从中构建