火星网校
Figma 画布缩放功能详解 | 西瓜哥带你了解怎么用
发布时间：2024-07-24 13:42:22 浏览量：334次
大家好，我是前端西瓜哥。
画布缩放是图形编辑器的基础功能，作用是放大图形编辑细节，缩小总览全局。我们来看看 Figma 是如何做画布缩放设计的。
怎么缩放
使用 zoom 表示画布的缩放比。
比如 zoom 为 1（即 100%），表示画布不进行缩放，为原始大小。zoom 为 2 表示画布放大一倍。zoom 为 0.5 表示画布缩小一倍。
放大画布对应 zoomIn 方法，zoom 值是变大的。
zoomIn 的 in 是指将镜头靠近场景的意思，近所以图形大，所谓 “近大远小”。
缩放画布则是 zoomOut，zoom 值变小。镜头远离场景，因此图形会变小。
如何快速缩放
通常我们会在 UI 界面上提供画布缩放和放大按钮，点击它们会 以画布中心为缩放中心，进行缩放。
快捷键为：
- 放大画布：Ctrl/Command +
- 缩小画布：Ctrl/Command -
我发现 Figma 实际上直接用 + 或 - 就能缩放了，但它在 UI 上并没有提示。
Figma 在这种情况下会让 zoom 值落在几个特定的值上。
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%。
下面是找到排序数组中，在目标值两边的数组元素的方法。
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，滚轮向前为放大，向后为缩小。
// 缩放比率const zoomRatio = 1.23// 放大画布zoom * zoomRatio// 缩小画布zoom / zoomRatiozoomRatio 不是写死的，和 鼠标滚轮灵敏度 有关。
（下面是 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 值。
结语
我是前端西瓜哥，欢迎关注我，学习更多图形编辑器知识。
热门课程推荐
热门资讯
-
想将照片变成漫画效果？这篇文章分享了4个方法，包括Photoshop、聪明灵犀、VanceAI Toongineer、醒图，简单操作就能实现，快来尝试一下吧！
-
2. 华为手机神奇“AI修图”功能，一键消除衣服！原图变身大V领深V！
最近华为手机Pura70推出的“AI修图”功能引发热议，通过简单操作可以让照片中的人物换装。想了解更多这款神奇功能的使用方法吗？点击查看！
-
近年来,人工智能逐渐走入公众视野,其中的AI图像生成技术尤为引人注目。只需在特定软件中输入关键词描述语以及上传参考图就能智能高效生成符合要求的...
-
4. AI视频制作神器Viggle：让静态人物动起来，创意无限！
Viggle AI是一款免费制作视频的AI工具，能让静态人物图片动起来，快来了解Viggle AI的功能和优势吧！
-
5. Logo Diffusion——基于sd绘画模型的AI LOGO 生成器
这下LOGO设计彻底不用求人了。接下来详细演示一遍操作流程首先进入Logo D... 想学习更多AI技能,比如说关于怎么样利用AI来提高生产效率、还能做什么AI...
-
6. 零基础10分钟生成漫画，教大家如何用AI生成自己的漫画
接下来,我将亲自引导你,使用AI工具,创作一本既有趣又能带来盈利的漫画。我们将一起探索如何利用这个工具,发挥你的创意,制作出令人惊叹的漫画作品。让...
-
7. AI显卡绘画排行榜:4090无悬念，最具性价比出人意料
在AI绘图领域，Stable Diffusion的显卡绘图性能备受关注。本文整理了Stable Diffusion显卡的硬件要求和性能表现，以及2023年3月显卡AI绘图效率排行榜和性价比排行榜。欢迎查看最新的AI显卡算力排行榜。
-
以下是一些免费的AI视频制作网站或工具,帮助您制作各种类型的视频。 1. Lumen5:Lumen5是一个基于AI的视频制作工具,可将文本转换为视频。 用户可以使...
-
就能快速生成一幅极具艺术效果的作品,让现实中不懂绘画的人也能参与其中创作!真的超赞哒~趣趣分享几款超厉害的AI绘画软件,提供详细操作!有需要的快来...
-
10. 10个建筑AI工具，从设计到施工全覆盖!肯定有你从来没听过的
讲述了建筑业比较著名的AI公司小库科技做出的探索,在这儿就不多说了。今天,我们试着在规划设计、建筑方案设计、住宅设计、管道设计、出渲染图、3D扫...
最新文章
