紅魔電競平板評測：大屏幕硬實力
前言：三年的疫情因為要上網課的原因激活了平板市場，如今網課的時代已經過去，大家的生活都恢復到了正軌，這也就意味著，真正考驗平板電腦生存的環境來了。也就是面對著這種殘酷的
大家好，我是前端西瓜哥。
今天來講講如何在圖形編輯器中使用自定義光標，并對光標其進行管理。
編輯器 github 地址：
https://github.com/F-star/suika
線上體驗：
https://blog.fstars.wang/app/suika/
光標（游標）在圖形界面交互中是非常基礎的一環。
它是一個指針，懸浮在屏幕的最上層。除了可以標記出指針的當前位置，同時也會通過它獨特的樣式，提示用戶此時可以執行怎么的操作。
比如抓手（grab）光標，是一個展開的手掌，表示可以對目標進行拖拽操作。
縮放（xx-resize）光標，是一個有方向的單（雙）箭頭，表示可以往特定方向移動以改變目標大小。
長得像英文字母 I 的文字（text）光標，則提示可以進行文字的操作，細瘦的垂直線是為了更好地點中字符之間的空白區域。
點擊（pointer）光標，一根手指（食指，不是中指）伸出來是要干嘛，是為了試探，看到按鈕就嘗試點一下，表示某個區域是可點擊的。
操作系統有豐富的光標樣式可以選擇，在 Web 網頁中可以通過 cursor 樣式屬性進行設置。
對于一般應用來說，通常是夠用的。但對于一個成熟的圖形編輯器來說，這還遠遠不夠。
我們還需要一些 更具體的光標樣式來向用戶傳遞信息，比如：
等等。
此外，自定義光標還有一個很重要的作用，就是 實現不同平臺的視覺一致性。
不同操作系統的 UI 風格是不同的，它們的光標是相當不一致的，會給用戶帶來不同的體驗。
（我希望在 Windows 系統看到 MacOS 的光標）
沒有光標，我們自己造。
好在 cursor 是支持自定義光標的。
具體用法如下。
.suika-cursor-default { cursor: url(./cursor-icons/suika-cursor-default.png) 5 5, pointer;}值依次為：
我們需要繪制好光標圖片，然后導出為 png（背景為透明度），然后定義好 x 和 y，再通過 css 類包裹一下，然后根據需要在 Canvas 上設置對應的 css 樣式即可。
有兩種光標比較特殊，它們有特殊的旋轉角度的參數。
它們就是旋轉和縮放光標。
因為 cursor 這個 css 屬性并不支持設置旋轉角度，所以我們只能繪制 0 到 359 之間度數共 360 個不同的旋轉光標圖片。
縮放光標因為其樣式中心對稱的原因，倒是不需要這么多，只要繪制 0 到 179 共 180 個圖片。
然后是 精細度的問題。
你這里可以整一些貓膩，比如偷懶，抽走一些度數，只給偶數的度數，比如 2、4，奇數的度數都丟掉，沒有 1、3 這些度數。設置光標的時候舍入一下，找最接近的度數。
或者你精益求精，你說間隔 1 度未免太大，我們要更精確一點，我們不僅支持整數，我們還要支持 1.5、6.5 這種中間值，我們要用 720 個圖片。
沒問題，都可以上。
但是呢，我們發現，這些光標其實都來自一個源圖片，只是旋轉了不同的角度，我們手工一個個操作未免太低效了。
這時候我們就可以自己寫或找一些工具，批量對一張源圖形生成旋轉多種角度后的圖片，然后再寫個腳本去自動生成 css 代碼，把這些圖片引入進去。
這是一個方案，figma 是這么做的。
感覺還是有億點麻煩。沒事，我們有另一個方案。
上面做的是打包前生成大量圖片，那我們可不可以在運行時動態生成光標呢？
可以的。圖片有位圖的，也有矢量的啊，我們可以用一種叫做 SVG 的特殊圖片格式，它的內容是文本，一種的 xml 文本。
我們可以將光標 UI 導出為 SVG，然后在最頂層的元素加上 transform 的旋轉變換。
可以寫一個方法，傳入角度和位置信息，動態生成對應的 SVG 字符串，然后轉成 DataURL 給 cursor 應用上。
大概像這樣：
const getRotationIconDataUrl = (degree, x = 0, y = 0) => { return `url("data:image/svg+xml, ... <g fill='none' transform='rotate(${degree} ${x} ${y})' ... ") ${x} ${y}, pointer`}canvas.style.cursor = getRotationIconDataUrl(114.544);開源白板工具 tldraw 選擇了這個方案。
你可以給一個精度很高的旋轉度數。
代碼設計上，我們會設計一個 CursorManager 類進行光標的管理。
這個類最重要的作用就是設置光標值。
setCursor 方法接收一個光標值，除了支持傳統的字符串，也支持 { type: 'rotation'; degree: 45 } 這種形式。
它主要做了如下操作：
下面是核心代碼實現。
// 支持的光標類型export type ICursor = | 'default' | { type: 'resize'; degree: number } | { type: 'rotation'; degree: number } | 'grab' | ...}class CursorManager { private cursor: ICursor; setCursor(cursor: ICursor) { // 1. 標準化光標值，比如把度數取余到 0～360 內 cursor = this.normalizeCursor(cursor); // 2. 比較新舊光標值，相同就跳過 if (isEqual(cursor, this.cursor)) { return; } this.cursor = cursor; const clsPrefix = 'suika-cursor-'; // 3. 清空原來設置的光標樣式 canvasElement.classList.forEach((className) => { if (className.startsWith(clsPrefix) { canvasElement.classList.remove(className); } }); this.editor.canvasElement.style.cursor = ''; // 4. 根據光標不同，執行各自的邏輯 if (this.customClassCursor.has(cursor)) { // 這個是注冊了 class 的光標 const className = `${clsPrefix}${cursor}`; this.editor.canvasElement.classList.add(className); } else if (typeof cursor == 'string') { // 用瀏覽器自帶的 this.editor.canvasElement.style.cursor = cursor; } else if (cursor.type === 'resize') { // 后面都是使用動態 svg 字符串 this.setResizeCursorInCanvas(cursor.degree); } else if (cursor.type === 'rotation') { this.setRotationCursorInCanvas(cursor.degree); } }}光標還有一種比較少用的方案，也說說吧。
就是有些光標是繪制在畫布上的。
一個經典的例子就是 AutoCAD 的十字光標，這個十字的長度是可以設置的，可以相當長。
如果你修改操作系統的光標，那這個十字便會突破天際地顯示到非繪制區域上。
此外，AutoCAD 的光標并不忠實跟隨操作系統光標，比如有時候會吸附于某點不動，并基于它的位置顯示下拉菜單，此時可以用真正的光標去點選。
考慮到性能，建議把光標放到另一個 canvas 上，和圖形放一個 canvas 會讓畫布中沒做任何操作的圖形頻繁重繪。
總結一下。
關于圖形編輯器的光標，我們有以下方案：
本文鏈接：http://www.www897cc.com/showinfo-26-57869-0.html圖形編輯器開發：自定義光標
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 盤一盤這個沒資格出現在面試環節的場景題
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號