如何用网页绘制一个黑莓9900的键盘效果图
如何用网页绘制一个黑莓9900的键盘效果图
入了几个黑莓蓝牙键盘，出于喜好，想做一个跟实体键盘一模一样的网页界面。
最终的实现效果是这样的：
在线查看：http://kylebing.cn/tools/bb-keyboard 点击上面四个按键显示不同模型界面
github（设计文件和源码）：https://github.com/KyleBing/blackberry-keyboard
一、实现方式
1. 先做一个横竖笔直的键盘界面
正好前面也做了两个：黑莓Q10 黑莓Q20 的界面：
2. 黑莓9900 需要做的就是把键面调弯
先将键盘几个横线做出来，这里全部图片都采用 SVG，下面是在 Sketch 里画的。
这几个线的弧度是不同的，所以需要四根线。
然后 将界面中的每个键上下调整到合适位置，这里我写了一个数组，表示每个键的上下 offset
// 键盘布局
const PositionMapArray = [
{offset: -30, dividerOffset: -25, keyPos: [0.7, 2.2, 3, 4, 4.8, 4.8, 4, 3, 2.2, 0.7],},
{offset: -28, dividerOffset: -28, keyPos: [0, 1.6, 2.5, 3.5, 4, 4, 3.5, 2.5, 1.6, 0],},
{offset: -28, dividerOffset: -22, keyPos: [0, 1, 2, 2.5, 3, 3, 2.5, 2, 1, 0],},
]
这样就实现了键盘弯曲，再将那几个横线放到上面即可。具体看源码。
二、实物图
三、设计图
原文地址：https://blog.csdn.net/KimBing/article/details/137926218
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！