7月安卓手機性能榜：紅魔8S Pro再奪榜首
7月份的手機市場風平浪靜，除了紅魔和努比亞帶來了兩款搭載驍龍8Gen2領先版處理器的新機之外，別的也想不到有什么新品了，這也正常，通常6月7月都是手機廠商修整的時間，進入8月份之
大家好，我是前端西瓜哥。
今天我們來研究一下 Figma 是如何表示圖形的，這里以矩形為切入點進行研究。
明白最簡單的矩形的表示后，研究其他的圖形就可以舉一反三。
如果讓我設計一個矩形圖形的物理屬性，我會怎么設計？
我張口就來：x、y、width、height、rotation。
對一些簡單的圖形編輯操作，這些屬性基本上是夠用的，比如白板工具，如果你不考慮或者不希望圖形可以翻轉（flip） 的話。
Figma 需要考慮翻轉的情況的，此外還有斜切的情況。
翻轉的場景：
還有斜切的場景，在選中多個圖形然后縮放時有發生。
這些表達光靠上面的幾個屬性是不夠的，我們看看 Figma為了表達這些效果，是怎么去設計矩形的。
與物理信息相關的屬性如下：
{ "size": { "x": 100, "y": 100 }, "transform": { "m00": 1, "m01": 3, "m02": 5, "m10": 2, "m11": 4, "m12": 6 }, // 省略其他無關屬性}沒有位置屬性，這個屬性默認是 (0, 0)，實際它轉移到 transform 的矩陣的位移子矩陣上了。
size 表示寬高，但屬性名用的是 x（寬） 和 y（高），理論上 width 和 height 語義更好，這樣應該是用了矢量類型。
size 表示寬高，理論上 width 和 height 語義更好，這樣應該是用了平面矢量類型的結構體，所以是 x 和 y。
transform 表示一個 3x3 的變換矩陣。
m00 | m01 | m02m10 | m11 | m12 0 | 0 | 1上面的 transform 屬性的值所對應的矩陣為：
1 | 3 | 52 | 4 | 60 | 0 | 1再看看這些屬性對應的右側屬性面板。
x、y 分別是 5 和 6，它是 (0, 0) 進行 transform 后的結果，這個直接對應 transform.m02 和 tansfrom.m12。
import { Matrix } from "pixi.js";const matrix = new Matrix(1, 2, 3, 4, 5, 6);const topLeft = matrix.apply({ x: 0, y: 0 }); // { x: 5, y: 6 }// 或直接點const topLeft = { x: 5, y: 6 }這里引入了 pixi.js 的 matrix 類，該類使用列向量方式進行表達。
文末有 demo 源碼以及線上 demo，可打開控制臺查看結果驗證正確性。
然后這里的 width 和 height，是 223.61 和 500， 怎么來的？
它們對應的是矩形的兩條邊變形后的長度，如下：
uiWidth 為 (0, 0) 和 (width, 0) 進行矩陣變換后坐標點之間的距離。
const distance = (p1, p2) => { const a = p1.x - p2.x; const b = p1.y - p2.y; return Math.sqrt(a * a + b * b);};const matrix = new Matrix(1, 2, 3, 4, 5, 6);const topLeft = { x: 5, y: 6 }const topRight = matrix.apply({ x: 100, y: 0 });distance(topRight, topLeft); // 223.60679774997897最后計算出 223.60679774997897，四舍五入得到 223.61。
高度計算同理。
uiHeight 為 (0, 0) 和 (0, height) 進行矩陣變換后坐標點之間的距離。
const matrix = new Matrix(1, 2, 3, 4, 5, 6);const topLeft = { x: 5, y: 6 }const bottomLeft = matrix.apply({ x: 0, y: 100 });distance(bottomLeft, topLeft); // 500最后是旋轉角度，它是寬度對應的矩形邊向量，逆時針旋轉 90 度的向量所對應的角度。
先計算寬邊向量，然后逆時針旋轉 90 度得到旋轉向量，最后計算旋轉向量對應的角度。
const wSideVec = { x: topRight.x - topLeft.x, y: topRight.y - topLeft.y };// 逆時針旋轉 90 度，得到旋轉向量const rotationMatrix = new Matrix(0, -1, 1, 0, 0, 0);const rotationVec = rotationMatrix.apply(wSideVec);const rad = calcVectorRadian(rotationVec);const deg = rad2Deg(rad); //這里用了幾個工具函數。
// 計算和 (0, -1) 的夾角const calcVectorRadian = (vec) => { const a = [vec.x, vec.y]; const b = [0, -1]; // 這個是基準角度 // 使用點積公式計算夾腳 const dotProduct = a[0] * b[0] + a[1] * b[1]; const d = Math.sqrt(a[0] * a[0] + a[1] * a[1]) * Math.sqrt(b[0] * b[0] + b[1] * b[1]); let rad = Math.acos(dotProduct / d); if (vec.x > 0) { // 如果 x > 0, 則 rad 轉為 (-PI, 0) 之間的值 rad = -rad; } return rad;}// 弧度轉角度const rad2Deg = (rad) => (rad * 180) / Math.PI;Figma 的角度表示比較別扭。
特征為：基準角度朝上，對應向量為 (0, -1)，角度方向為逆時針，角度范圍限定為 (-180, 180]，計算向量角度時要注意這個特征進行調整。
線上 demo：
https://codepen.io/F-star/pen/WNPVWwQ?editors=0012。
代碼實現：
import { Matrix } from "pixi.js";// 計算和 (0, -1) 的夾角const calcVectorRadian = (vec) => { const a = [vec.x, vec.y]; const b = [0, -1]; const dotProduct = a[0] * b[0] + a[1] * b[1]; const d = Math.sqrt(a[0] * a[0] + a[1] * a[1]) * Math.sqrt(b[0] * b[0] + b[1] * b[1]); let rad = Math.acos(dotProduct / d); if (vec.x > 0) { // 如果 x > 0, 則 rad 為 (-PI, 0) 之間的值 rad = -rad; } return rad;}// 弧度轉角度const rad2Deg = (rad) => (rad * 180) / Math.PI;const distance = (p1, p2) => { const a = p1.x - p2.x; const b = p1.y - p2.y; return Math.sqrt(a * a + b * b);};const getAttrs = (size, transform) => { const width = size.x; const height = size.y; const matrix = new Matrix( transform.m00, // 1 transform.m10, // 2 transform.m01, // 3 transform.m11, // 4 transform.m02, // 5 transform.m12 // 6 ); const topLeft = { x: transform.m02, y: transform.m12 }; console.log("x:", topLeft.x) console.log("y:", topLeft.y) const topRight = matrix.apply({ x: width, y: 0 }); console.log("width:", distance(topRight, topLeft)); // 223.60679774997897 const bottomLeft = matrix.apply({ x: 0, y: height }); console.log("height:", distance(bottomLeft, topLeft)); // 500 const wSideVec = { x: topRight.x - topLeft.x, y: topRight.y - topLeft.y }; // 逆時針旋轉 90 度，得到旋轉向量 const rotationMatrix = new Matrix(0, -1, 1, 0, 0, 0); const rotationVec = rotationMatrix.apply(wSideVec); const rad = calcVectorRadian(rotationVec); const deg = rad2Deg(rad); console.log("rotation:", deg); // -63.43494882292201};getAttrs( // 寬高 { x: 100, y: 100 }, // 變換矩陣 { m00: 1, m01: 3, m02: 5, m10: 2, m11: 4, m12: 6, });運行一下，結果和屬性面板一致。
Figma 只用寬高和變換矩陣來表達矩形，在數據層可以用精簡的數據表達豐富的變形，此外在渲染的時候也能將矩陣運算交給 GPU 進行并行運算，是不錯的做法。
本文鏈接：http://www.tebozhan.com/showinfo-26-74664-0.html學到了！Figma 原來是這樣表示矩形的
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號