Canvas绘制箭头-逐梦个人博客

Canvas的 CanvasRenderingContext2D 对象中是没有提供绘制箭头的方法，也就是说，如果我们需要在Canvas中绘制箭头是需要自己封装函数来处理的。今天的主题就是来看怎么封装绘制箭头的函数。

首先我们先了解一些基本知识

平常我们常常看到的一些箭头样式如下图所示：

绘制箭头最关键之处就是处理箭头：

其包括几个部分：

一条直线，从起点 P1 到终点 P2
终点 P2 向这条直线两侧扩展，将会产生一个 P3 和 P4 点
另外 P2P3 或者 P2P4 构成箭头斜线率
箭头斜线和直线有一个夹角 theta（θ）
指定箭头的长度 d

从上图上我们可以看出，控制一个箭头，可以通过这几个参数来控制：

起点 P1 （(fromX, fromY)）
终点 P2 （(toX, toY)）
斜线率 headlen
夹角 theta （θ）

对于箭头的 P3 和 P4 点，我们就需要通过相应的三角函数计算得来。

那么 P3 的坐标可以轻易计算出来：

p3[0] = P2[0] - r * Math.cos(θ * Math.PI / 180); // P3对应的X坐标
p3[1] = p2[1] - r * Math.sin(θ * Math.PI / 180); // P3对应的Y坐标

用同样的方法可以计算出 P4 坐标:

p4[0] = P2[0] - r * Math.cos(θ * Math.PI / 180); // P4对应的X坐标
p3[1] = p2[1] + r * Math.sin(θ * Math.PI / 180); // P4对应的Y坐标

除此之外，还有一个关键，就是箭头的角度。获取箭头的角度，可以直接通过 atan2(y, x) 来获取。这也就涉及到三角函数中的反正切函数。

在三角函数中，两个参数的函数 atan2 是正切函数 tan 的一个变种。对于任意不同时等于 0的实参数 x 和 y ， atan2(y, x) 所表达的意思是坐标原点为起点，指向 (x, y) 的射线在坐标平面上与x轴正方向之间的角的角度。当 y>0 时，射线与 x 轴正方向的所得的角的角度指的是 x轴正方向绕逆时针方向到达射线旋转的角的角度；而当 y<0 时，射线与 x 轴正方向所得的角的角度指的是 x 轴正方向绕顺时针方向达到射线旋转的角的角度。

在几何意义上， atan2(y, x) 等价于 atan(y / x) ，但 atan2 的最大优势是可以正确处理 x=0而 y≠0 的情况，而不必进行会引发除零异常的 y / x 操作。

简单的用下图来阐述：

在一个单位圆内 atan2 函数在各点的取值。圆内标注代表各点的取值的幅度表示。图片中，从最左端开始，角度的大小随着逆时针方向逐渐从 -π 增大到 +π ，并且角度大小在点位于最右端时，取值为 0 。另外要注意的是，函数 atan2(y, x) 中参数的顺序是倒置的， atan2(y, x) 计算的值相当于点 (x, y) 的角度值。

简单的了解了反正切函数，我们继续我们的主题。

先来看一张图：

通过 Math.atan2() 函数计算出 angle :

angle = Math.atan2(toY - fromY, toX - fromX)

为了和 θ 的单位值相匹配，将上面的公式进行一下转换：

angle = Math.atan2(toY - fromY, toX - fromX) * 180 / Math.PI

除此之外，还需要计算出箭头两条侧边线的夹角：

angle1 = (angle + theta) * Math.PI / 180;
angle2 = (angle - theta) * Math.PI / 180;

通过前面的介绍，对于绘制箭头我们有了一定的基础知识，接下来，我们看看如何封装箭头函数。

首先我们定义一下函数并列出所需参数

drawArrow(ctx, fromX, fromY, toX, toY, theta, headlen, width, color)

这里我们传了九个参数：

ctx：Canvas绘图环境
fromX, fromY：起点坐标（也可以换成 p1 ，只不过它是一个数组）
toX, toY：终点坐标 (也可以换成 p2 ，只不过它是一个数组)
theta：三角斜边一直线夹角
headlen：三角斜边长度
width：箭头线宽度
color：箭头颜色

根据前面的内容，我们具体实现这个函数：

function drawArrow(ctx, fromX, fromY, toX, toY,theta,headlen,width,color) {
  var theta = theta || 30,
      headlen = headlen || 10,
      width = width || 1,
      color = color || '#000',
      angle = Math.atan2(fromY - toY, fromX - toX) * 180 / Math.PI,
      angle1 = (angle + theta) * Math.PI / 180,
      angle2 = (angle - theta) * Math.PI / 180,
      topX = headlen * Math.cos(angle1),
      topY = headlen * Math.sin(angle1),
      botX = headlen * Math.cos(angle2),
      botY = headlen * Math.sin(angle2);
  ctx.save();
  ctx.beginPath();
  var arrowX, arrowY;
  ctx.moveTo(fromX, fromY);
  ctx.lineTo(toX, toY);
  arrowX = toX + topX;
  arrowY = toY + topY;
  ctx.moveTo(arrowX, arrowY);
  ctx.lineTo(toX, toY);
  arrowX = toX + botX;
  arrowY = toY + botY;
  ctx.lineTo(arrowX, arrowY);
  ctx.strokeStyle = color;
  ctx.lineWidth = width;
  ctx.stroke();
  ctx.restore();
}

这个时候，只需要调用这个封装好的函数，我们就可以轻松的绘制一条向右的箭头：

drawArrow(ctx, 150, 100, 400,100,30,30,10,'#f36');

但是有的时候，我们需要线的两头都要有箭头形状，在上面的基础上，稍加修改，增加一个反项的代码即可：

function drawArrow(ctx, fromX, fromY, toX, toY,theta,headlen,width,color) {
  var theta = theta || 30,
      headlen = headlen || 10,
      width = width || 1,
      color = color || '#000',
      angle = Math.atan2(fromY - toY, fromX - toX) * 180 / Math.PI,
      angle1 = (angle + theta) * Math.PI / 180,
      angle2 = (angle - theta) * Math.PI / 180,
      topX = headlen * Math.cos(angle1),
      topY = headlen * Math.sin(angle1),
      botX = headlen * Math.cos(angle2),
      botY = headlen * Math.sin(angle2);
  ctx.save();
  ctx.beginPath();
  var arrowX = fromX - topX,
      arrowY = fromY - topY;
  ctx.moveTo(arrowX, arrowY);
  ctx.lineTo(fromX, fromY);
  arrowX = fromX - botX;
  arrowY = fromY - botY;
  ctx.lineTo(arrowX, arrowY);
  ctx.moveTo(fromX, fromY);
  ctx.lineTo(toX, toY);
  // Reverse length on the other side
  arrowX = toX + topX;
  arrowY = toY + topY;
  ctx.moveTo(arrowX, arrowY);
  ctx.lineTo(toX, toY);
  arrowX = toX + botX;
  arrowY = toY + botY;
  ctx.lineTo(arrowX, arrowY);
  ctx.strokeStyle = color;
  ctx.lineWidth = width;
  ctx.stroke();
  ctx.restore();
}