最近在做的一个需求里需要绘制一条优雅的圆弧线,UE问我要不要切图??伤害性不大,侮辱性极强!

UE给出的设计稿是下面这样的👇(看中间的那条白色圆弧线)

跟UE对设计稿的时候,UE问我这个圆弧要不要切图?嗯!? 这么简单的圆弧还切图,看不起谁呢?

👀之前也绘制过圆弧线,是使用 画大圆 的方式实现的。而这一次,我突然想到应该还有其他的办法也可以实现相同的效果吧。

于是查阅了一些资料,结合自身的经验总结了有如下几种画圆弧的方式:

  • 画大圆
  • 定制border-radius
  • box-shadow
  • transform:scaleX/Y
  • svg
  • canvas
  • 图片

画大圆

画大圆是最直接的实现方案了,也应该是很多开发者首先想到的方案之一了。

需要注意的地方是外部容器需要 overflow: hidden 用于隐藏圆形超过容器的部分。


定制border-radius

我们常用 border-radius 画圆角,或者是画一个圆形。使用方法大概是这样的:

.demo {
    border-radius: 4px;
    /* or */
    border-radius: 50%;
}

而这里的定制 border-radius 使用了它的一项不常用的技能:为每一个单边设置圆角。

.demo {
    border-radius: 0 12px 12px 0 / 0 50% 50% 0;
}

这里不详细描述关于定制 border-radius 的内容,详细了解可以参考这篇文章:border-radius结合动画创建酷炫的效果.

从下方的演示效果看,越靠近两端,边框被压缩得越细,这与我们想要的效果还是有一定差别的。


box-shadow

关于 box-shadow 的方案,仔细对比下方的代码和 定制border-radius 的代码可以发现,其实就是将白色边框的绘制方式从 border-right 换成了box-shadow

更换以后解决了 定制border-radius 方案中提到的边框压缩的问题,但是这个方案绘制出来的圆弧并不够圆润,并没有达到我所想要的效果。


transform:scaleX/Y

这个方案还挺有趣的,通过旋转的方式从视觉效果上改变了圆角的大小。

但是我简单写了一个demo之后就发现,这个方案的产生的问题跟 定制border-radius 方案产生的问题相同。


svg

使用 svg 的方案无论从使用方法还是从展示效果上,跟 #画大圆 效果是相同的。


canvas

canvas 的方案与 svg 方案 实现方法也是类似的,同样是绘制一个大圆环,然后使用 overflow: hidden 隐藏掉了溢出的部分。也可以只绘制需要显示的一部分圆弧,只需要调整绘制圆弧的起始角度和终止角度即可


总结

方案罗列完毕之后就该选择方案了,从实际展示效果上进行筛选的话,可以达到操作效果的是画大圆svgcanvas

我当前这个需求所基于的场景时小程序,小程序对 svg 的兼容程度并不好,而 canvas 无论从操作难度还是性能上,跟纯css是无法相提并论的。

所以最终还是选择了 画大圆 的解决方案。绕了一圈又回来了

我是尾巴

本文一共列举了 7 中绘制圆弧的方式,如果你还有更优的方案,或者对本文提出的方案有异议,请在评论区提出,谢谢。

参考

  1. 网页中弧线的几种实现方法.