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

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

二、实物图

在这里插入图片描述

三、设计图

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/565212.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

PDM在Office文档中的变量映射

在PDM数据管理软件中需要在数据卡中反馈出文件的一些属性信息,使得用户在不打开文件的情况下可以快速了解此文件的属性信息,或者需要用户在创建文档时填入相应内容,能够自动的填充到文档中,所以就需要在实施的过程中在SOLIDWORKS …

[C++][算法基础]求组合数(I)

给定 𝑛 组询问,每组询问给定两个整数 𝑎,𝑏,请你输出 的值。 输入格式 第一行包含整数 𝑛。 接下来 𝑛 行,每行包含一组 𝑎 和 𝑏。 输出格…

CSS布局 Flex 和 Grid

在 CSS 中,理解 flex 和 Grid 布局非常重要,今天把这两个重要知识点回顾一下。 Flexbox 弹性盒子布局 弹性布局支持 flex、inline-flex,支持块和内联。 容器 轴的概念,在 Flexbox,有主轴和侧轴的概念,轴…

自己写的加密案例4——某东方课程头部sign加密

网址:aHR0cHM6Ly9kc2FwaS54ZGYuY24vcHJvZHVjdC92Mi9jbGFzcy9zZWFyY2g 进行抓包分析,发现请求头中由sign加密,简单判断是消息摘要算法。 Sign:d7c68100ca508bb7c8ae284560754303 进行xhr断点,一下子就发现了位置。 s c.sign&…

“傻瓜”学计量——核密度估计KDE

提纲: 什么是核密度估计,是干什么的 代码 1 前言 参数估计vs非参数估计参数估计是样本数据来自一个具有明确概率密度函数的总体。非参数估计是样本数据的概率分布未知,这时,为了对样本数据进行建模,需要估计样本数据…

嵌入式面试-回答UART

说明: 此文章是在阅读了一些列面试相关资料之后对于一些常见问题的整理,主要针对的是嵌入式软件面试中涉及到的问答,努力精准的抓住重点进行描述。若有不足非常欢迎指出,感谢!在总结过程中有些答案没标记参考来源&…

leetcode每日一题第五十六天

今天心情不好&#xff0c;就做一道 class Solution { public:int countTarget(vector<int>& scores, int target) {return help(scores,target)-help(scores,target-1);}int help(vector<int>&scores,int target){int left 0;int right scores.size()-1;…

针对窗口数量多导致窗口大小显示受限制的问题,使用滚动条控制窗口

建议&#xff1a;首先观察结果展示&#xff0c;判断是否可以满足你的需求。 目录 1. 问题分析 2. 解决方案 2.1 界面设计 2.2 生成代码 2.3 源码实现 3. 结果展示 1. 问题分析 项目需要显示的窗口数量颇多&#xff0c;主界面中&#xff0c;如果一次性显示全部窗口&#x…

Spring AOP (一)

本篇主要介绍Spring AOP的基础概念和入门使用 一、AOP的基本概念 AOP是一种面向切面编程的思想&#xff0c;它与IOC并称为Spring 的两大核心思想。什么是面向切面编程呢&#xff0c;具体来说就是对一类事情进行集中统一处理。这听起来像不像前面篇章中所介绍的统一功能处理&am…

❤️新版Linux零基础快速入门到精通——第三部分❤️

❤️新版Linux零基础快速入门到精通——第三部分❤️ 非科班的我&#xff01;Ta&#xff01;还是来了~~~3. Linux权限管控3.1 认知root用户3.1.1 Switch User——su3.1.2 sudo命令3.1.3 为普通用户配置sudo认证 3.2 用户和用户组3.2.1 用户、用户组3.2.2 用户组管理3.2.3 用户管…

YOLOv8-PySide --- 基于 ultralytics 8.1.0 发行版优化 | 代码已开源

YOLOv8-PySide — 基于 ultralytics 8.1.0 发行版优化 Github 项目地址&#xff1a;https://github.com/WangQvQ/Ultralytics-PySide6 BiliBili视频地址&#xff1a;https://www.bilibili.com/video 页面效果 如何使用 pip install ultralytics8.1.0 or git clone --branch v…

mysql基础3——创建和修改数据表

创建数据表 创建一个表&#xff08;importtype有默认值1&#xff09;并插入一条数据&#xff08;importtype字段没有指定值&#xff09; 约束 默认约束&#xff08;把设置的默认值自动赋值给字段&#xff09; create table demo.importhead(listnum int,supplied int,stock…

Vue3+antd:表格中合并多行相同数据

注&#xff1a;本次以合并相同ID为示例 首先获取远程数据&#xff0c;获取完成之后对数据进行遍历 let customCellList []; // {start:0,length:2,id:xx} // 如果接口返回的数据相同ID之间不相邻&#xff0c;需要手动排序后才可以实现合并效果 res.data.forEach((item, inde…

VBA运行后,为什么excel的三个工作表结果一样?

运行完了excel的三个工作表的结果一样&#xff0c;问题在哪呢&#xff1f; 代码如下&#xff1a; Sub 计算成绩() 计算成绩 Macro i为工作表行号 Dim i, m, total As Integer Dim w1 As Worksheet For m 1 To Worksheets.count Set w1 Worksheets(m) i 2 total 0 …

【电机控制】滑模观测器PMSM无感控制波形图

【电机控制】滑模观测器PMSM无感控制波形图 文章目录 前言一、FOC控制1.三相电流2.Clark变换静止坐标系iαiβ3.park变换旋转坐标系idiq4.电流环PI控制输出UdUq5.UdUq 反park变换UαUβ 二、反电动势观测器BEMF1.静止坐标系iαiβ提取反电动势EaEb2.反电动势EaEb提取位置信息、…

HarmonyOS开发案例:【视频播放器】

介绍 基于video、swiper和slider组件&#xff0c;实现简单的视频播放器&#xff0c;可支持海报轮播、视频播放等功能。 相关概念 [video组件]&#xff1a;视频播放组件。[swiper组件]&#xff1a;滑动容器&#xff0c;提供切换子组件显示的能力。[slider组件]&#xff1a;滑…

【Linux】破解工具John the Ripper和端口扫描工具NMAP

一、弱口令检测---John the Ripper 1.了解 John the Ripper John the Ripper 是一款开源的密码破解工具&#xff0c;可使用密码字典&#xff08;包含各种密码组合的列表文件&#xff09;来进行暴力破解。 一款密码分析工具&#xff0c;支持字典式的暴力破解通过对shadow文件…

什么是区块链?什么是X314协议?

X314协议是一种基于区块链技术的分布式账本协议&#xff0c;具有去中心化、安全性高和可扩展性强的特点。本文将从多个角度对X314协议进行通俗解释&#xff0c;带您了解这一前沿技术。 一、什么是区块链和分布式账本&#xff1f; 首先&#xff0c;我们需要了解什么是区块链和分…

使用JavaScript创建数组,并对其进行冒泡排序

JavaScript创建数组方式 字面量方式&#xff1a;使用方括号 [] 来创建数组&#xff0c;并在方括号内按顺序列出数组元素。 let arr [1, 2, 3, 4, 5]; Array() 构造函数方式&#xff1a;使用 new Array() 构造函数来创建数组&#xff0c;并传入数组元素作为参数。 let arr ne…

论文笔记:Large Language Models Are Zero-Shot Time Series Forecasters

2023 neurips 完全是零样本&#xff08;zero-shot&#xff09;的&#xff0c;不需要微调 1 方法 1.1 Tokenization&#xff08;分词和编码&#xff09; 现有的LLM&#xff08;比如GPT3&#xff09;的tokenizer不能直接用来编码时间序列的句子 比如对数字42235630&#xff0…