模拟 Odemeter 的 Canvas 翻牌器

2017年8月8日

一、思路

对比 odemeter.js 方式。

弊端：生成了太多 DOM。性能瓶颈。

初始方案： 使用数张临时canvas来获取每位数上的当前绘制位置

思路也是跟着 odemeter.js 形式，简化 DOM，只使用数张临时 canvas DOM。

1. 根据位数生成数张 临时canvas
2. 每一个canvas有单独的 TWEEN 控制位移
3. 使用 getImageData 从 “临时canvas” 中获取信息
4. 使用 putImageData 绘制到主画布中去
5. 每个 TWEEN 的 duration 是一样的，但其对应的值容量不同，故速度不同。

优化方案： 直接去 fillText，反正超出画布区域自然不可见

通过 tween.JS 获取 y 值

二、具体实现

1. 获取起始数值之间的“插值”数字数组

起始差值大于阈值的，从总体中取出的一部分个体。

1. 阈值：
   • 翻动动效时长(duration)越长，阈值越大
   • MAX_VALUES = ((c.duration / MS_PER_FRAME) / FRAMES_PER_VALUE) | 0;
2. 抽样规则：
   • 间隔值 = 差值/阈值(1+boosted*DIGIT_SPEEDBOOST)
   • boosted: boosted初始值是0，越靠近低位数，boosted越大
   • 即：越靠近低位数，间隔值越小，样本值相对更多

待对比测试：
“间隔取值” 在odemeter.js中是为了优化性能，因为没必要生成过多的DOM。然而在canvas中，并不存在大量 DOM 的情况，那么是否还需要间隔取值？若完全模拟真实世界的进位，是会带来视觉的更逼真，还是会因其低位转速过快，反而使得视觉上不舒适？

2. 滚动动效：使用 TWEEN.JS 获取 y 值

3. 小数点

生成衍值时，需跳过小数点

4. 分隔符

odemeter.js 做法，倒序，render 数字时，再判断是否到了render 分隔符的时机

分隔符，format；
修改 计算衍值函数 ，返回
[ [...], ",", [...], [...], [...], ".", [...], [...], [...]]

5. 对齐方式

在 DOM+CSS 布局中,对齐方式的切换很简单，选择css属性 text-align: left,text-align: center,text-align: right 即可。

Canvas 中虽亦有对齐方式相关的属性 textAlign ,但它控制的只是当前画笔的位置。

遇到的问题

1. 字号调小时，头部被截断

问题描述

当用户把字号调小(60 -> 30)时，出现头部被截断的问题。

出现原因：

之前开发时，以“60px 宋体”为模本，并给予了一个外部 offset 偏移量去矫正数字的位置。而当字号缩小时，这个偏移值便出现误差了。如字体大小为 60 时，给予了默认 offset 为 10，当字体大小变成 30 时，offset 明细已经不合适了。

解决方案：

这个 offset 不能是固定值，而是跟随着字体大小。暂时设置为字体大小的 1/6；

本质问题：

每种 font-family 下，字体的高度和边距不一致。

不同的 baseline 下的情况如下：

举例：Times

举例：宋体

优化方案：

1. 基本 baseline 设置为 bottom；（原来是 alphabetic ）
2. 给予画布一个上下边距值，并拉大滚动字体垂直的行距；

2. 数字模糊的问题

canvas 绘制的数字，没有 dom 节点那样清晰。这是由其根本性质决定的（canvas是以像素描述图形的位图，dom是矢量描述），在高分屏下，边缘模糊尤其明显。

解决方案：

1. 针对高分屏，预获取屏幕物理尺寸，针对canvas画布宽度，给予比画布原始尺寸大一倍的宽度，再压缩至原始宽度。
2. 针对“边缘锐化”的一些优化？