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