亚洲AV免费看深爱成人|日韩av另类一级特黄片在线|中国免费一级黄片|国产av一二三区|亚洲有码AV在线|久久亚洲国产日韩欧美|成人免费AV网站|婷婷一区综合一区|亚洲AV无码导航|高级欧美成人网站

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

Figma 畫布縮放功能詳解 | 西瓜哥帶你了解怎么用

發(fā)布時間：2024-07-24 13:42:22 瀏覽量：607次

大家好，我是前端西瓜哥。

畫布縮放是圖形編輯器的基礎(chǔ)功能，作用是放大圖形編輯細(xì)節(jié)，縮小總覽全局。我們來看看 Figma 是如何做畫布縮放設(shè)計的。

怎么縮放

使用 zoom 表示畫布的縮放比。

比如 zoom 為 1（即 100%），表示畫布不進行縮放，為原始大小。zoom 為 2 表示畫布放大一倍。zoom 為 0.5 表示畫布縮小一倍。

放大畫布對應(yīng) zoomIn 方法，zoom 值是變大的。

zoomIn 的 in 是指將鏡頭靠近場景的意思，近所以圖形大，所謂 “近大遠(yuǎn)小”。

縮放畫布則是 zoomOut，zoom 值變小。鏡頭遠(yuǎn)離場景，因此圖形會變小。

如何快速縮放

通常我們會在 UI 界面上提供畫布縮放和放大按鈕，點擊它們會 以畫布中心為縮放中心，進行縮放。

快捷鍵為：

  • 放大畫布：Ctrl/Command +
  • 縮小畫布：Ctrl/Command -

我發(fā)現(xiàn) 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]

你應(yīng)該看出規(guī)律了，這是一個等比數(shù)列，公比為 2，其中的中間值是 1（即 100%）。同時 256 和 0.015625 也是 zoom 的最大最小值。

比如當(dāng)前 zoom 為 198%，放大會變成 200%，縮小會變?yōu)?100%。

下面是找到排序數(shù)組中，在目標(biāo)值兩邊的數(shù)組元素的方法。

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 的設(shè)計稿效果。

你可能發(fā)現(xiàn) UI 上的 zoom 好像對不上，比如應(yīng)該是 0.125 的，但 UI 上卻顯示為 13%。這里其實并沒有在數(shù)據(jù)層做舍入，而是在 UI 顯示上做了四舍五入。

如果想拿到真實 zoom 值，可通過 Figma 的插件 API 的 figma.viewport.zoom 屬性獲取。

但有些情況下，用戶會覺得這樣縮放幅度可能有點大了，需要幅度更低的縮放，這時候可以用鼠標(biāo)滾輪縮放。

用鼠標(biāo)滾輪縮放更方便

Figma 也支持通過滾輪的方式縮放，且會 基于縮放比率 zoomRatio，并以光標(biāo)位置為縮放中心進行縮放。

按住 Ctrl 或 Command，滾輪向前為放大，向后為縮小。

// 縮放比率const zoomRatio = 1.23// 放大畫布zoom * zoomRatio// 縮小畫布zoom / zoomRatio

zoomRatio 不是寫死的，和 鼠標(biāo)滾輪靈敏度 有關(guān)。

（下面是 Windows 設(shè)置鼠標(biāo)滾輪靈敏度的方式）

鼠標(biāo)滾輪靈敏度會反應(yīng)到 WheelEvent 滾輪事件對象的 deltaY 上，靈敏度越高，每次滾動的 deltaY 就越大。

我們需要定義一個函數(shù)：傳入 deltaY，拿到一個縮放比率 zoomRatio。

這個函數(shù)的返回值在 0 到 2 之間，且為對數(shù)關(guān)系，即 x 越大，y 的值越平緩。

順帶一提，mac 觸控板不是常規(guī)輸入設(shè)備，所以不在滾輪事件標(biāo)準(zhǔn)之內(nèi)。

但觸控板的縮放操作會倍瀏覽器里轉(zhuǎn)換為 ctrl + 滾輪 的滾輪行為，也是可以拿到 deltaY 的，但值非常小，所以你會看到它的縮放幅度是滾輪是不一樣的。

更多操作方式

Figma 也支持其他的縮放操作。

  • 輸入框輸入新的 zoom 值回車，即可應(yīng)用；
  • 縮放為 50% / 100% / 200%。比較常用的一些 zoom 值，其中 100% 最常用，也叫 “縮放為原始大小”；
  • 縮放為適應(yīng)畫布大小，這樣就能總覽所有的圖形。圖紙第一次打開時，也會進行適應(yīng)畫布的操作，但 zoom 最大為 1，你可以理解為只能縮小（相比初始的 100%），但不能放大。
  • 適應(yīng)選中圖形，將選中的圖形縮放為適應(yīng)畫布大小，作用是查看指定圖形的細(xì)節(jié)。

Figma 沒有做專門的縮放畫布工具，應(yīng)該是認(rèn)為沒有必要的，比較多余，用快捷鍵就夠了。

偏好設(shè)置有一個 Invert zoom direction（翻轉(zhuǎn)縮放畫布方向）勾選項。勾選后，向前滾輪反而會減小 zoom 值。

結(jié)語

我是前端西瓜哥，歡迎關(guān)注我，學(xué)習(xí)更多圖形編輯器知識。

想要了解更多Figma相關(guān)設(shè)計技能，點擊咨詢

熱門課程推薦

熱門資訊

請綁定手機號

獲取驗證碼
x

同學(xué)您好！

您已成功報名0元試學(xué)活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定