本文主要是介绍如何用网页绘制一个黑莓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],},
]
这样就实现了键盘弯曲，再将那几个横线放到上面即可。具体看源码。
二、实物图
这篇关于如何用网页绘制一个黑莓9900的键盘效果图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
