Canvas学习:绘制箭头 ゝ一纸荒年。 2022-05-22 23:12 432阅读 0赞 原文出处:[https://www.w3cplus.com/canvas/drawing-arrow.html][https_www.w3cplus.com_canvas_drawing-arrow.html] (本文对错误做了纠正,博主有一系列实用Canvas教程) 在这篇文章中主要来聊在Canvas中怎么绘制箭头。在Canvas的`CanvasRenderingContext2D`对象中是没有提供绘制箭头的方法,言外之意,在Canvas中要绘制箭头是需要自己封装函数来处理。那今天的主题就是来看怎么封装绘制箭头的函数。 ## 了解一些基础知识 ## 平常我们常常看到的一些箭头样式如下图所示: ![canvas-9-7.png][] 在绘制箭头最关键之处就是处理箭头: ![canvas-9-1.png][] 其包括几个部分: * 一条直线,从起点`P1`到终点`P2` * 终点`P2`向这条直线两侧扩展,将会产生一个`P3`和`P4`点 * 另外`P2P3`或者`P2P4`构成箭头斜线率 * 箭头斜线和直线有一个夹角`theta`(`θ`) * 指定箭头的长度`d` ![canvas-9-8.png][] 从上图上我们可以看出,控制一个箭头,可以通过这几个参数来控制: * 起点`P1`(`(fromX, fromY)`) * 终点`P2`(`(toX, toY)`) * 斜线长度`headlen` * 夹角`theta`(`θ`) 对于箭头的`P3`和`P4`点,我们就需要通过相应的[三角函数][Link 1]计算得来。 ![canvas-9-9.png][] 那么`P3`的坐标可以轻易计算出来(错误): p3[0] = P2[0] - Math.cos(θ * Math.PI / 180); // P3对应的X坐标 p3[1] = p2[1] - Math.sin(θ * Math.PI / 180); // P3对应的Y坐标 个人补充: 上面应该是错误的。根据上图公式求x,y的值应该是: x=cosθ \* r, y=sinθ \* r, 所以应该是: p3[0] = P2[0] - Math.cos(θ * Math.PI / 180) * headlen; // P3对应的X坐标 p3[1] = p2[1] - Math.sin(θ * Math.PI / 180) * headlen; // P3对应的Y坐标 用同样的方法可以计算出 `P4` 坐标(错误): p4[0] = P2[0] - Math.cos(θ * Math.PI / 180); // P4对应的X坐标 p3[1] = p2[1] + Math.sin(θ * Math.PI / 180); // P4对应的Y坐标 同样计`P4`坐标时headlen也要参与运算: p4[0] = P2[0] - Math.cos(θ * Math.PI / 180) * headlen; // P4对应的X坐标 p3[1] = p2[1] + Math.sin(θ * Math.PI / 180) * headlen; // P4对应的Y坐标 除此之外, 还有一个关键,就是箭头的角度 。获取箭头的角度,可以直接通过 `atan2(y,x)` 来获取。这也就涉及到三角函数中的 [反正切函数][Link 2] 。 在三角函数中,两个参数的函数`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` 操作。 简单的用下图来阐述: ![canvas-9-6.svg][] 在一个单位圆内`atan2`函数在各点的取值。圆内标注代表各点的取值的幅度表示。图片中,从最左端开始,角度的大小随着逆时针方向逐渐从`-π`增大到`+π`,并且角度大小在点位于最右端时,取值为`0`。另外要注意的是,函数`atan2(y,x)`中参数的顺序是倒置的,`atan2(y,x)`计算的值相当于点`(x,y)`的角度值。 简单的了解了反正切函数,我们回到我们的主题中。 先来看一张图: ![canvas-9-3.png][] 通过`Math.atan2()`函数计算出`angle`: angle = Math.atan2(toY - fromY, toX - fromX) 为了和`θ`的单位值相匹配,将上面的公式进行一下转换: angle = Math.atan2(toY - fromY, toX - fromX) * 180 / Math.PI; //弧度转角度 除此之外,还需要计算出箭头两条侧边线的夹角: ![canvas-9-4.png][] angle1 = (angle + theta) * Math.PI / 180; //角度转弧度 angle2 = (angle - theta) * Math.PI / 180; //角度转弧度 感觉有点零乱,其实我自己也瞎折腾了好几天。如果上面的内容不太好理解,建议你移步[阅读这篇文章][Link 3]。 ## 封装绘制箭头函数 ## 通过前面的内容,可能对绘制箭头有一定的理论基础,接下来,我们看如何封装箭头函数。 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) { theta = typeof(theta) != 'undefined' ? theta : 30; headlen = typeof(theta) != 'undefined' ? headlen : 10; width = typeof(width) != 'undefined' ? width : 1; color = typeof(color) != 'color' ? color : '#000'; // 计算各角度和对应的P2,P3坐标 var 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.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'); [![canvas-9-10.png][]][canvas-9-10.png 1] 改变不同的坐标,可以得到不同方向的箭头: // 向右箭头 drawArrow(ctx, myCanvas.width / 2, myCanvas.height / 2, myCanvas.width / 2 + 150, myCanvas.height / 2,30,30,4,'#f36'); // 向下箭头 drawArrow(ctx, myCanvas.width / 2, myCanvas.height / 2, myCanvas.width / 2, myCanvas.height / 2 + 150,30,30,4,'#f66'); // 向左箭头 drawArrow(ctx, myCanvas.width / 2, myCanvas.height / 2, myCanvas.width / 2 - 150, myCanvas.height / 2,30,30,4,'#0f6'); // 向上箭头 drawArrow(ctx, myCanvas.width / 2, myCanvas.height / 2, myCanvas.width / 2, myCanvas.height / 2 - 150,30,30,4,'#d6f'); 有的时候,我们需要线的两头都要有箭头形状,在上面的基础上,稍加修改,增加一个反项的代码即可: function drawArrow(ctx, fromX, fromY, toX, toY, theta, headlen, width, color) { theta = typeof(theta) != 'undefined' ? theta : 30; headlen = typeof(theta) != 'undefined' ? headlen : 10; width = typeof(width) != 'undefined' ? width : 1; color = typeof(color) != 'color' ? color : '#000'; var 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(); } 调用函数: drawArrow(ctx, myCanvas.width / 2 - 200, myCanvas.height / 2, myCanvas.width / 2 + 200,myCanvas.height / 2,30,30,5,'#f36'); 看到的效果如下: [![canvas-9-11.png][]][canvas-9-11.png 1] 上面我们看到的仅是一种箭头方式,文章开头,提到箭头方式有多种方式。那么我们可以将`drawArrow`功强变得更为强大一些。比如@Patrick Horgan在他的文章中提到的方法: * `drawHead`:封装一个专门绘制箭头头部的函数,而且提供了四种样式做为选择 * `drawArrow`: 封装直线箭头,并且提供两个方向 * `drawArcedArrow`:函数一个曲线箭头 由于代码较多,这里就不展示出来了,不过可以在对应的[CodePen示例][CodePen]中查看到代码: ## 总结 ## 这篇文章主要介绍了通过三角函数的一些知识,封装了一个箭头函数,用来帮助我们在Canvas中更轻易的绘制出箭头。因为在Canvas中没有直接提供绘制箭头的函数或者说方法。那么三角在实际中有什么哪些运用呢?大家可以发挥想象力,思考一下,写写实例。在最后一个方法中,我们其实还运用到了Canvas中的贝塞尔曲线绘制的方法。在下一节中,我们就来学习在Canvas中怎么绘制贝塞尔曲线。 [![airen.jpg][]][airen.jpg 1] ### [大漠][airen.jpg 1] ### 常用昵称“大漠”,W3CPlus创始人,目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验,尤其专注对CSS3的研究,是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《 [图解CSS3:核心技术与案例实战][CSS3]》。 著作权归作者所有。 商业转载请联系作者获得授权,非商业转载请注明出处。 原文: [https://www.w3cplus.com/canvas/drawing-arrow.html][https_www.w3cplus.com_canvas_drawing-arrow.html] © [w3cplus.com][] [https_www.w3cplus.com_canvas_drawing-arrow.html]: https://www.w3cplus.com/canvas/drawing-arrow.html [canvas-9-7.png]: /images/20220523/3e3ac09007614836b83d8252c1a12ee7.png [canvas-9-1.png]: /images/20220523/38d67e60e7574b9a845e85cfa34a655c.png [canvas-9-8.png]: /images/20220523/fdfff8f84b7a468c9b82d3440526232c.png [Link 1]: https://zh.wikipedia.org/wiki/%E7%9B%B4%E8%A7%92%E4%B8%89%E8%A7%92%E5%BD%A2 [canvas-9-9.png]: /images/20220523/47ef4fb00b46418ca1942117febef6eb.png [Link 2]: https://zh.wikipedia.org/wiki/Atan2 [canvas-9-6.svg]: /images/20220523/7204d34d2cbe48729b22cf1d8de5431e.png [canvas-9-3.png]: /images/20220523/fe791d1e2aea4fc7bd44b08265342f8b.png [canvas-9-4.png]: /images/20220523/0786500c700b42868fb613c17761c616.png [Link 3]: https://www.dbp-consulting.com/tutorials/canvas/CanvasArrow.html [canvas-9-10.png]: /images/20220523/d63f9d1467eb43eeb2ce597696499824.png [canvas-9-10.png 1]: https://codepen.io/airen/full/Vpxyqe/ [canvas-9-11.png]: /images/20220523/7ca8909842a44b7aa8e4d99ae507e51b.png [canvas-9-11.png 1]: https://codepen.io/airen/full/gmeZOP/ [CodePen]: https://codepen.io/airen/full/OpZvOK/ [airen.jpg]: /images/20220523/2004fa0fee084a1b9de10ab1556219ac.png [airen.jpg 1]: https://weibo.com/w3cplus [CSS3]: https://www.w3cplus.com/book-comment.html [w3cplus.com]: https://www.w3cplus.com/
还没有评论,来说两句吧...