关于javascript:小米的200万不是这么好挣的

2次阅读

共计 1655 个字符，预计需要花费 5 分钟才能阅读完成。

看了前两天小米公布的全新 LOGO，置信大多数人反馈和我一样，啊啊？？？就这！！！。而后我又从网上翻出了小米延聘的日本国内设计师原研哉，对于设计小米新的 LOGO 设计理念的诠释。看完这句话第一反馈就是果然是出名设计师人家这个设计理念比单纯的设计值钱，这 200W 不亏！！而后我转念一想那这样我也行，我没有 200w 的思维还不能比葫芦画瓢吗？！于是我着手用 css 实现一波，给敌人夸耀夸耀。

这不很简略吗，网上这么多说其实就是一句 border-radius 的事，分分钟钟给他画进去。然而真的是这样的吗，总是感觉事件没这么简略。于是我现用网上的办法画了一个 LOGO，成果如下：

看出什么问题了吗？你说这不一样吗都是圆角矩形啊？没关系接下来咱们把它和小米的 LOGO 放到一起看一下。

看进去了吗？对！！没错！！被你发现了，小米的圆角矩形是平滑圆角的。那问题来了，这样的话如何用 css 实现呢？难道只能贴图片了吗？不！！答案是否定的，其实还有个乏味的货色，那就是“Painting API”。
通过 Painting API 它容许你再 css 中调用 paint 函数，而后通过 JavaScript 定义一个 Paint Worklet 来加载你注册的画板，其实就是你通过 JavaScript 来画出你想要失去的任何图形。具体介绍能够查看这几位大佬的文章：
https://juejin.cn/post/694581…
https://zhuanlan.zhihu.com/p/…
https://www.zhangxinxu.com/wo…

首先定义 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 的平滑圆角矩形就绘制实现了，成果如下

本文其实次要通过这个案例想说，有些事物看似简略然而外部的艰苦和繁冗是其他人无奈设想的，正如小米 LOGO 的设计理念，LOGO 不单单是状态上扭转更是赋予了一种动静的生机。要想实现一个平滑圆角不仅仅是一句 border-radius 就能实现的事件，在平时的做人处事上亦是如此。对待事物要有本人的想法深度思考，不能随声附和。好了好了 …. 扯多了。就说到这吧。

正文完