javascript - 如何限制 <canvas> 上的绘图？

Question

我想创建一个移动网页，其中屏幕上出现一个形状，用户只能用他/她的手指在形状的轮廓上描画，然后就会出现一个新的形状。这个library有一些我想要做的很好的例子，只是有更多的形状。我已经找到了几个在触摸设备上在 Canvas 上绘图的好例子 here和here 。我不知道的是如何约束这条线，这样你就只能用一条连续的线在路径上绘制。是否有内置的东西可以让我指定您可以绘制的唯一路径，或者我是否必须手动编写该逻辑？

Answer 1

我们可以将问题分为两部分:
1) 了解用户是否在路径上。
2)了解用户是否走完所有路径部分。

对于 1)，我们可以使用 isPointInPath context2D 方法来了解鼠标/触摸点 (x,y) 是否在曲线上。这里的限制是您必须构建一个封闭的曲面，这意味着由 fill() 绘制的曲面，而不是用 stroke() 构建的曲面。因此，如果您正在抚摸粗线，则必须进行一些数学运算，以通过 moveTo+lineTo+fill 构建相应的图形。

对于 2):为您的形状构建“检查点”列表。例如，一个圆可能有 8 个控制点。然后决定用户“激活”检查点的距离。现在该算法的伪代码是:

 mouseDown => check()
 mouseMove => if mouse is down, check()

 checkPointList = [  [ 10, 40, false ] , [ centerX, centerY, isChecked], ... ] ;
 checked = 0;

 function check() {
    clear screen
    draw the path
    if (mouse down and mouse point on path) {
       for ( checkPoint in CheckPointList) {
           if (checkPoint near enough of mouse) {
              checkPoint[3]=true;
              checked++;
           }
       }
    if (checked == checkPointList.length) ==>>> User DID draw all the shape.
    }  else
    clear the flags of the checkPointList;      
    checked=0;
 }

我在这里做了一个 moooost 简单的演示，非常有效。 控制点在禁用时显示为红色，在激活时显示为绿色:

http://jsbin.com/wekaxiguwiyo/1/edit?js,output

// boilerplate
var cv = document.getElementById('cv');
var ctx = cv.getContext('2d');

function draw() {
  ctx.clearRect(0,0,300,300);
  drawShape();  
  drawCP();
}

// Shape
function drawShape() {
  ctx.beginPath();
  ctx.moveTo(30,5);
  ctx.lineTo(80,5);
  ctx.lineTo(80, 300);
  ctx.lineTo(30,300);
  ctx.closePath();
  ctx.lineWidth= 16;
  ctx.fillStyle='#000';
  ctx.fill();
}

// Control points
var points = [ [50, 50, false], [50,120, false], [50, 190, false],[50,260, false ]  ];
var pointsCount = 0;

function drawCP() {
  for (var i=0; i<points.length; i++) {
    var p = points[i];
    ctx.fillStyle=p[2]?'#0F0':'#F00';
    ctx.fillRect(p[0]-1, p[1]-1, 2, 2);
  }
}

function resetCP() {
  for (var i=0; i<points.length; i++) {
    points[i][2]=false;
  }
  pointsCount=0;
}

function testCP(x,y) {
  var d=30;
  d=sq(d);
  for (var i=0; i<points.length; i++) {
    if (sq(points[i][0]-x)+sq(points[i][1]-y)<d) { 
      if (!points[i][2]) pointsCount++;
      points[i][2]=true
    };
  }
}

function sq(x) { return x*x; }

//
draw();

// most simple event handling
addEventListener('mousemove', mouseMove);

var r = cv.getBoundingClientRect();

function mouseMove(e) {
  var x = e.pageX-r.left;
  var y = e.pageY-r.top;
  draw();
  ctx.fillStyle='#000';

  if (ctx.isPointInPath(x,y)) { 
      ctx.fillStyle='#F00';
      testCP(x,y);
  } else {
      resetCP();
  }
  ctx.fillRect(x-3,y-3,6,6);
  var pathDrawn = (pointsCount == points.length);
  if (pathDrawn) ctx.fillText('Shape drawn!!', 150, 150);
}