大家好,我是前端西瓜哥。
画布缩放是图形编辑器的基础功能,作用是放大图形编辑细节,缩小总览全局。我们来看看 Figma 是如何做画布缩放设计的。
zoom
使用 zoom 表示画布的缩放比。
比如 zoom 为 1(即 100%),表示画布不进行缩放,为原始大小。zoom 为 2 表示画布放大一倍。zoom 为 0.5 表示画布缩小一倍。
放大画布对应 zoomIn 方法,zoom 值是变大的。
zoomIn 的 in 是指将镜头靠近场景的意思,近所以图形大,所谓 "近大远小"。
缩放画布则是 zoomOut,zoom 值变小。镜头远离场景,因此图形会变小。
快捷键或按钮缩放画布
通常我们会在 UI 界面上提供画布缩放和放大按钮,点击它们会 以画布中心为缩放中心,进行缩放。
快捷键为:
-
放大画布:
Ctrl/Command +
-
缩小画布:
Ctrl/Command -
我发现 Figma 实际上直接用 + 或 - 就能缩放了,但它在 UI 上并没有提示。
Figma 在这种情况下会让 zoom 值落在几个特定的值上。
ini
const zoomLevels = [
0.015625, 0.03125, 0.0625, 0.125, 0.25, 0.5,
1, 2, 4, 8, 16, 32, 64, 128, 256
]
你应该看出规律了,这是一个等比数列,公比为 2,其中的中间值是 1(即 100%)。同时 256 和 0.015625 也是 zoom 的最大最小值。
比如当前 zoom 为 198%,放大会变成 200%,缩小会变为 100%。
下面是找到排序数组中,在目标值两边的数组元素的方法。
ini
const getNearestVals = (arr, target) => {
let left = 0;
let right = arr.length - 1;
while (left <= right) {
const mid = Math.floor((left + right) / 2);
if (arr[mid] === target) {
right = mid - 1;
left = mid + 1;
break;
} else if (arr[mid] < target) {
left = mid + 1;
} else {
right = mid - 1;
}
}
if (right < 0) right = 0;
if (left >= arr.length) left = arr.length - 1;
return [arr[right], arr[left]];
};
getNearestVals(zoomLevels, 1.98) // [1, 2]
这样用户就能快速、大幅度地更改 zoom,快速抵达最值,查看跨度较大的不同 zoom 的设计稿效果。
你可能发现 UI 上的 zoom 好像对不上,比如应该是 0.125 的,但 UI 上却显示为 13%。这里其实并没有在数据层做舍入,而是在 UI 显示上做了四舍五入。
如果想拿到真实 zoom 值,可通过 Figma 的插件 API 的 figma.viewport.zoom 属性获取。
但有些情况下,用户会觉得这样缩放幅度可能有点大了,需要幅度更低的缩放,这时候可以用鼠标滚轮缩放。
鼠标滚轮缩放
Figma 也支持通过滚轮的方式缩放,且会 基于缩放比率 zoomRatio,并以光标位置为缩放中心进行缩放。
按住 Ctrl 或 Command,滚轮向前为放大,向后为缩小。
arduino
// 缩放比率
const zoomRatio = 1.23
// 放大画布
zoom * zoomRatio
// 缩小画布
zoom / zoomRatio
zoomRatio 不是写死的,和 鼠标滚轮灵敏度 有关。
(下面是 Windows 设置鼠标滚轮灵敏度的方式)
鼠标滚轮灵敏度会反应到 WheelEvent 滚轮事件对象的 deltaY 上,灵敏度越高,每次滚动的 deltaY 就越大。
我们需要定义一个函数:传入 deltaY,拿到一个缩放比率 zoomRatio。
这个函数的返回值在 0 到 2 之间,且为对数关系,即 x 越大,y 的值越平缓。
顺带一提,mac 触控板不是常规输入设备,所以不在滚轮事件标准之内。
但触控板的缩放操作会倍浏览器里转换为 ctrl + 滚轮 的滚轮行为,也是可以拿到 deltaY 的,但值非常小,所以你会看到它的缩放幅度是滚轮是不一样的。
其他
Figma 也支持其他的缩放操作。
-
输入框输入新的 zoom 值回车,即可应用;
-
缩放为 50% / 100% / 200%。比较常用的一些 zoom 值,其中 100% 最常用,也叫 "缩放为原始大小";
-
缩放为适应画布大小,这样就能总览所有的图形。图纸第一次打开时,也会进行适应画布的操作,但 zoom 最大为 1,你可以理解为只能缩小(相比初始的 100%),但不能放大。
-
适应选中图形,将选中的图形缩放为适应画布大小,作用是查看指定图形的细节。
Figma 没有做专门的缩放画布工具,应该是认为没有必要的,比较多余,用快捷键就够了。
偏好设置有一个 Invert zoom direction(翻转缩放画布方向)勾选项。勾选后,向前滚轮反而会减小 zoom 值。
结尾
我是前端西瓜哥,欢迎关注我,学习更多图形编辑器知识。
相关阅读,