如何用网页绘制一个黑莓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],},
]

这样就实现了键盘弯曲，再将那几个横线放到上面即可。具体看源码。

二、实物图

三、设计图