自学内容网 自学内容网

如何用网页绘制一个黑莓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)!