跟月影学可视化
月影
前奇虎360奇舞团团长，可视化UI框架SpriteJS核心开发者，《JavaScript王者归来》作者
新⼈⾸单¥19.9
4553 人已学习
课程目录
已更新 50 讲 / 共 53 讲
0/4登录后，你可以任选4讲全文学习。
课前必学 (2讲)
开篇词 | 不写网页的前端工程师，还能干什么？
免费
预习 | Web前端与可视化到底有什么区别？
图形基础篇 (4讲)
01 | 浏览器中实现可视化的四种方式
02 | 指令式绘图系统：如何用Canvas绘制层次关系图？
03 | 声明式图形系统：如何用SVG图形元素绘制可视化图表？
04 | GPU与渲染管线：如何用WebGL绘制最简单的几何图形？
数学篇 (5讲)
05 | 如何用向量和坐标系描述点和线段？
06 | 可视化中你必须要掌握的向量乘法知识
07 | 如何用向量和参数方程描述曲线？
08 | 如何利用三角剖分和向量操作描述并处理多边形？
09 | 如何用仿射变换对几何图形进行坐标变换？
视觉基础篇 (8讲)
10 | 图形系统如何表示颜色？
11｜图案生成：如何生成重复图案、分形图案以及随机效果？
12 | 如何使用滤镜函数实现美颜效果？
13 | 如何给简单的图案添加纹理和复杂滤镜？
14 | 如何使用片元着色器进行几何造型？
15 | 如何用极坐标系绘制有趣图案？
16 | 如何使用噪声生成复杂的纹理？
17 | 如何使用后期处理通道增强图像效果？
视觉高级篇 (10讲)
18 | 如何生成简单动画让图形动起来？
19 | 如何用着色器实现像素动画？
20 | 如何用WebGL绘制3D物体？
21 | 如何添加相机，用透视原理对物体进行投影？
22 | 如何用仿射变换来移动和旋转3D物体？
23 | 如何模拟光照让3D场景更逼真？（上）
24 | 如何模拟光照让3D场景更逼真？（下）
25 | 如何用法线贴图模拟真实物体表面
26 | 如何绘制带宽度的曲线？
27 | 案例：如何实现简单的3D可视化图表？
性能篇 (3讲)
28 | Canvas、SVG与WebGL在性能上的优势与劣势
29 | 怎么给Canvas绘制加速？
30｜怎么给WebGL绘制加速？
数据篇 (10讲)
31 | 针对海量数据，如何优化性能？
32 | 数据之美：如何选择合适的方法对数据进行可视化处理？
33 | 数据处理（一）：可视化数据处理的一般方法是什么？
34 | 数据处理（二）：如何处理多元变量？
35| 设计（一）：如何让可视化设计更加清晰？
36 | 设计（二）：如何理解可视化设计原则？
37 | 实战（一）：如何使用图表库绘制常用数据图表？
38 | 实战（二）：如何使用数据驱动框架绘制常用数据图表？
39 | 实战（三）：如何实现地理信息的可视化？
40| 实战（四）：如何实现3D地球可视化（上）？
国庆策划 (2讲)
国庆策划 | 假期别闲着，一起来挑战“手势密码”
国庆策划 | 快来看看怎么用原生JavaScript实现手势解锁组件
特别放送 (6讲)
加餐一 | 作为一名程序员，数学到底要多好？
加餐二 | SpriteJS：我是如何设计一个可视化图形渲染引擎的？
用户故事 | 非前端开发，我为什么要学可视化？
加餐三 | 轻松一刻：我想和你聊聊前端的未来
加餐四 | 一篇文章，带你快速理解函数式编程
加餐五｜周爱民：我想和你分享些学习的道理
国庆策划 | 快来看看怎么用原生JavaScript实现手势解锁组件
月影 2020-10-05
你好，我是月影。前几天，我给你出了一道实操题，不知道你完成得怎么样啦？
首先，组件设计一般来说包括 7 个步骤，分别是理解需求、技术选型、结构（UI）设计、数据和 API 设计、流程设计、兼容性和细节优化，以及工具和工程化。
当然了，并不是每个组件设计的时候都需要进行这些过程，但一个项目总会在其中一些过程里遇到问题需要解决。所以，下面我们来做一个简单的分析。
理解需求
上节课的题目本身只是说设计一个常见的手势密码的 UI 交互，那我们就可以通过选择验证密码和设置密码来切换两种状态，每种状态有自己的流程。
如果你就照着需求把整个组件的状态切换和流程封装起来，或者只是提供了一定的 UI 样式配置能力的话，还远远不够。实际上这个组件如果要给用户使用，我们需要将过程节点开放出来。也就是说，需要由使用者决定设置密码的过程里执行什么操作、验证密码的过程和密码验证成功后执行什么操作，这些是组件开发者无法代替使用者来决定的。
var password = '11121323';
var locker = new HandLock.Locker({
container: document.querySelector('#handlock'),
check: {
checked: function(res){
if(res.err){
console.error(res.err); //密码错误或长度太短
[执行操作...]
}else{
console.log(`正确，密码是：${res.records}`);
[执行操作...]
}
},
},
update:{
beforeRepeat: function(res){
if(res.err){
console.error(res.err); //密码长度太短
[执行操作...]
}else{
console.log(`密码初次输入完成，等待重复输入`);
[执行操作...]
}
},
afterRepeat: function(res){
if(res.err){
console.error(res.err); //密码长度太短或者两次密码输入不一致
[执行操作...]
}else{
console.log(`密码更新完成，新密码是：${res.records}`);
[执行操作...]
}
},
}
});
locker.check(password)
技术选型
这个问题的 UI 展现的核心是九宫格和选中的小圆点，从技术上来讲，我们有三种可选方案： DOM/Canvas/SVG，三者都是可以实现主体 UI 的。那我们该怎么选择呢？
确认放弃笔记？
放弃后所记笔记将不保留。
新功能上线，你的历史笔记已初始化为私密笔记，是否一键批量公开？
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《跟月影学可视化》，如需阅读全部文章，
请订阅文章所属专栏，新⼈⾸单¥19.9
请订阅文章所属专栏，新⼈⾸单¥19.9
立即订阅
登录 后留言
精选留言
由作者筛选后的优质留言将会公开显示，欢迎踊跃留言。
收起评论