我的处女作《Canvas系列教程》在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更多的动力进行创作。

教程介绍、教程目录等能在README里查阅。

传送门:https://github.com/827652549/CanvasStudy

介绍

已知数组 [{ x, y, radius }, …], 在canvas中绘制出对应图形,其中每组x,y代表顶点坐标,radius代表设置的圆角值。

通过这种方式,可以实现任意圆角三角形,圆角矩形,甚至是各种奇怪的圆角多边形等等,满足你的需求~(噗呲

特别注意:json数组要按照顺时针依次录入,因为系统没办法判断你的顶点连线顺序。

在线演示 详细代码

【绘制】HTML5 Canvas 实现任意圆角多边形
我在demo中加入了预设的一些json,供大家测试

思路

实现这个demo的核心点在于:

  • 利用arc或arcTo实现圆角
  • 找到圆角起点的解析几何函数
  • 当用户输入异常值(redius大于边长的处理方案)

利用arc或arcTo实现圆角

这个可以翻阅我之前的文章看arc和arcTo的原理,这里不过多介绍

找到圆角起点的解析几何函数

通过高中解析几何,问题可以抽象成“已知A、B、C三点坐标,求半径为r的内切圆与AC的切点坐标”

实现过程:
通过几何运算找到第一个弧的切点O,循环使用arcTo()进行画弧,利用笔触自动相连的特性,直线部分自动相连,最后封闭到指定位置。

当用户输入异常值(redius大于边长的处理方案)

应用Sketch的处理方案,用户可设定radius值,当出现不合法值的时候,原值不变,图像自行优化

说明:如100*50的矩形,可以在50像素的边对应的角,各设置成radius=25,也可以其中一个设为0,另一个设为50,总之就是radius1+radius2=50。当radius1+radius2>50的时候,在绘制里,radius_min不变,radius_max = 50/2,即变成的,而在json数据中不改变这些数据,已保存用户的数据记录
在矩形中,这个50很容易看出来,但是在任意三角形中,就要用三角函数算出半径长度,具体算法不容易用文字呈现,后面考虑使用视频的形式进行讲解。

分类:

技术点:

相关文章: