前言
看了前两天小米发布的全新LOGO，相信大多数人反应和我一样，啊啊？？？就这！！！。然后我又从网上翻出了小米聘请的日本国际设计师原研哉，对于设计小米新的LOGO设计理念的诠释。看完这句话第一反应就是果然是知名设计师人家这个设计理念比单纯的设计值钱，这200W不亏！！然后我转念一想那这样我也行，我没有200w的思想还不能比葫芦画瓢吗？！于是我着手用css实现一波，给朋友炫耀炫耀。
说干就干
这不很简单吗，网上这么多说其实就是一句border-radius的事，分分钟钟给他画出来。但是真的是这样的吗，总是感觉事情没这么简单。于是我现用网上的方法画了一个LOGO，效果如下：
看出什么问题了吗？你说这不一样吗都是圆角矩形啊？没关系接下来我们把它和小米的LOGO放到一起看一下。
看出来了吗？对！！没错！！被你发现了，小米的圆角矩形是平滑圆角的。那问题来了，这样的话如何用css完成呢？难道只能贴图片了吗？不！！答案是否定的，其实还有个有趣的东西，那就是“Painting API”。
通过Painting API它允许你再css中调用paint函数，然后通过JavaScript定义一个Paint Worklet来加载你注册的画板，其实就是你通过JavaScript来画出你想要得到的任何图形。具体介绍可以查看这几位大佬的文章：
https://juejin.cn/post/6945819749293129759
https://zhuanlan.zhihu.com/p/30829138
https://www.zhangxinxu.com/wordpress/2018/11/css-paint-api-canvas/
步入正题
- 首先定义css和html
<div class="box"></div>
.box {
background: #ff6900;
-webkit-mask-image: paint(smooth-corners);
width: 100px;
height: 100px;
}
- 在页面上将JS作为模块引入
(CSS.paintWorklet || paintWorklet).addModule("./smooth-corners.js");
- 重点来了：在"smooth-corners.js"文件中注册paint，绘制图形
registerPaint('smooth-corners', class {
paint(ctx, size) {
ctx.fillStyle = 'black'
// n=4 时，绘制一个方圆形 const n = 4
let m = n
if (n > 100) m = 100
if (n < 0.00000000001) m = 0.00000000001
const r = size.width / 2
const w = size.width / 2
const h = size.height / 2
ctx.beginPath();
for (let i = 0; i < (2*r+1); i++) {
const x = (i-r) + w
const y = (Math.pow(Math.abs(Math.pow(r,m)-Math.pow(Math.abs(i-r),m)),1/m)) + h
if (i == 0)
ctx.moveTo(x, y)
else
ctx.lineTo(x, y)
}
for (let i = (2*r); i < (4*r+1); i++) {
const x = (3*r-i) + w
const y = (-Math.pow(Math.abs(Math.pow(r,m)-Math.pow(Math.abs(3*r-i),m)),1/m)) + h
ctx.lineTo(x, y)
}
ctx.closePath()
ctx.fill()
}
})
这样一个类小米LOGO的平滑圆角矩形就绘制完成了，效果如下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KccanjaU-1617334120564)(/img/bVcQ0kp)]
总结
本文其实主要通过这个案例想说，有些事物看似简单但是内部的艰辛和繁杂是其他人无法想象的，正如小米LOGO的设计理念，LOGO不单单是形态上改变更是赋予了一种动态的活力。要想完成一个平滑圆角不仅仅是一句border-radius就能完成的事情，在平时的做人处事上亦是如此。看待事物要有自己的想法深度思考，不能人云亦云。好了好了…扯多了。就说到这吧。