激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

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

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

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

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

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

怎么縮放

使用 zoom 表示畫(huà)布的縮放比。

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

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

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

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

如何快速縮放

通常我們會(huì)在 UI 界面上提供畫(huà)布縮放和放大按鈕，點(diǎn)擊它們會(huì) 以畫(huà)布中心為縮放中心，進(jìn)行縮放。

快捷鍵為：

  • 放大畫(huà)布：Ctrl/Command +
  • 縮小畫(huà)布：Ctrl/Command -

我發(fā)現(xiàn) Figma 實(shí)際上直接用 + 或 - 就能縮放了，但它在 UI 上并沒(méi)有提示。

Figma 在這種情況下會(huì)讓 zoom 值落在幾個(gè)特定的值上。

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ī)律了，這是一個(gè)等比數(shù)列，公比為 2，其中的中間值是 1（即 100%）。同時(shí) 256 和 0.015625 也是 zoom 的最大最小值。

比如當(dāng)前 zoom 為 198%，放大會(huì)變成 200%，縮小會(huì)變?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，快速抵達(dá)最值，查看跨度較大的不同 zoom 的設(shè)計(jì)稿效果。

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

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

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

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

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

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

// 縮放比率const zoomRatio = 1.23// 放大畫(huà)布zoom * zoomRatio// 縮小畫(huà)布zoom / zoomRatio

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

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

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

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

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

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

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

更多操作方式

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

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

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

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

結(jié)語(yǔ)

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

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

熱門(mén)課程推薦

熱門(mén)資訊

請(qǐng)綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請(qǐng)保持電話暢通！
確定