如何用网页绘制一个黑莓9900的键盘效果图

本文主要是介绍如何用网页绘制一个黑莓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],},
]