Question

我想让用户重新绘制svg形状（数字8），并能够检测形状是否完好无损。用户必须用手指在移动设备上重新绘制这个svg的边框，以便继续浏览网站。我想使用Javascript。

我的第一种方法是使用隐藏的div并在每次鼠标按正确的顺序越过每一个时检测（参见sketch），但可能存在错误。而且我还想以一种显示填充进度的方式突出显示所绘制的轨迹。

我应该使用哪种方法？

Answer 1

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

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

然后捕捉mouseenter / mouseleave（或者你正在使用的任何事件＆＃34; draw＆＃34;）并根据事件坐标，评估＆＃34;形状＆＃34;是否正确绘制。

基本示例：

＆＃13;

 $(elem).slider();

＆＃13;

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;
});

＆＃13;

例如，在这个例子中，我接受了一个＆＃34;错误＆＃34; 10px。所以我将隐藏路径的笔划设置为20px。

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

这只是一个例子，但你可以从这个

构建

如何识别手绘形状与SVG模型类似

1 个答案:

基本示例：