日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

當(dāng)前位置:首頁 > 科技  > 軟件

圖形編輯器開發(fā):自定義光標(biāo)

來源: 責(zé)編: 時間:2024-01-08 09:15:11 198觀看
導(dǎo)讀大家好,我是前端西瓜哥。今天來講講如何在圖形編輯器中使用自定義光標(biāo),并對光標(biāo)其進行管理。編輯器 github 地址:https://github.com/F-star/suika線上體驗:https://blog.fstars.wang/app/suika/自定義光標(biāo)的意義是什么?光

4JS28資訊網(wǎng)——每日最新資訊28at.com

大家好,我是前端西瓜哥。4JS28資訊網(wǎng)——每日最新資訊28at.com

今天來講講如何在圖形編輯器中使用自定義光標(biāo),并對光標(biāo)其進行管理。4JS28資訊網(wǎng)——每日最新資訊28at.com

編輯器 github 地址:4JS28資訊網(wǎng)——每日最新資訊28at.com

https://github.com/F-star/suika4JS28資訊網(wǎng)——每日最新資訊28at.com

線上體驗:4JS28資訊網(wǎng)——每日最新資訊28at.com

https://blog.fstars.wang/app/suika/4JS28資訊網(wǎng)——每日最新資訊28at.com

自定義光標(biāo)的意義是什么?

光標(biāo)(游標(biāo))在圖形界面交互中是非常基礎(chǔ)的一環(huán)。4JS28資訊網(wǎng)——每日最新資訊28at.com

它是一個指針,懸浮在屏幕的最上層。除了可以標(biāo)記出指針的當(dāng)前位置,同時也會通過它獨特的樣式,提示用戶此時可以執(zhí)行怎么的操作。4JS28資訊網(wǎng)——每日最新資訊28at.com

比如抓手(grab)光標(biāo),是一個展開的手掌,表示可以對目標(biāo)進行拖拽操作。4JS28資訊網(wǎng)——每日最新資訊28at.com

縮放(xx-resize)光標(biāo),是一個有方向的單(雙)箭頭,表示可以往特定方向移動以改變目標(biāo)大小。4JS28資訊網(wǎng)——每日最新資訊28at.com

長得像英文字母 I 的文字(text)光標(biāo),則提示可以進行文字的操作,細(xì)瘦的垂直線是為了更好地點中字符之間的空白區(qū)域。4JS28資訊網(wǎng)——每日最新資訊28at.com

點擊(pointer)光標(biāo),一根手指(食指,不是中指)伸出來是要干嘛,是為了試探,看到按鈕就嘗試點一下,表示某個區(qū)域是可點擊的。4JS28資訊網(wǎng)——每日最新資訊28at.com

4JS28資訊網(wǎng)——每日最新資訊28at.com

操作系統(tǒng)有豐富的光標(biāo)樣式可以選擇,在 Web 網(wǎng)頁中可以通過  cursor 樣式屬性進行設(shè)置。4JS28資訊網(wǎng)——每日最新資訊28at.com

對于一般應(yīng)用來說,通常是夠用的。但對于一個成熟的圖形編輯器來說,這還遠(yuǎn)遠(yuǎn)不夠。4JS28資訊網(wǎng)——每日最新資訊28at.com

我們還需要一些 更具體的光標(biāo)樣式來向用戶傳遞信息,比如:4JS28資訊網(wǎng)——每日最新資訊28at.com

  • 旋轉(zhuǎn)光標(biāo):表示圖形可旋轉(zhuǎn)。cursor 屬性中沒有旋轉(zhuǎn)光標(biāo),勉強可用抓手工具做個平替;
  • 支持任意度數(shù)的縮放光標(biāo)。cursor 屬性的縮放光標(biāo)只有 45 度的正數(shù)倍數(shù)光標(biāo),這精度遠(yuǎn)遠(yuǎn)不夠。
  • 鋼筆工具相關(guān)光標(biāo):鋼筆光標(biāo)、錨點光標(biāo)、新增/刪除點光標(biāo);

等等。4JS28資訊網(wǎng)——每日最新資訊28at.com

4JS28資訊網(wǎng)——每日最新資訊28at.com

此外,自定義光標(biāo)還有一個很重要的作用,就是 實現(xiàn)不同平臺的視覺一致性。4JS28資訊網(wǎng)——每日最新資訊28at.com

不同操作系統(tǒng)的 UI 風(fēng)格是不同的,它們的光標(biāo)是相當(dāng)不一致的,會給用戶帶來不同的體驗。4JS28資訊網(wǎng)——每日最新資訊28at.com

(我希望在 Windows 系統(tǒng)看到 MacOS 的光標(biāo))4JS28資訊網(wǎng)——每日最新資訊28at.com

如何支持自定義光標(biāo)

沒有光標(biāo),我們自己造。4JS28資訊網(wǎng)——每日最新資訊28at.com

好在 cursor 是支持自定義光標(biāo)的。4JS28資訊網(wǎng)——每日最新資訊28at.com

具體用法如下。4JS28資訊網(wǎng)——每日最新資訊28at.com

.suika-cursor-default {  cursor: url(./cursor-icons/suika-cursor-default.png) 5 5, pointer;}

值依次為:4JS28資訊網(wǎng)——每日最新資訊28at.com

  • url(<url>):自定義光標(biāo)的圖片資源 url,因為不大且不希望額外作為單獨資源加載,通常會選擇轉(zhuǎn)換為 base64 格式內(nèi)嵌;
  • x y:使用相對圖片左上角的像素位置作為光標(biāo)位置;
  • <keyword>:如果沒有指定自定義光標(biāo)圖片,或者加載光標(biāo)資源失敗,就會使用瀏覽器支持的光標(biāo)值,比如  pointer。

我們需要繪制好光標(biāo)圖片,然后導(dǎo)出為 png(背景為透明度),然后定義好 x 和 y,再通過 css 類包裹一下,然后根據(jù)需要在 Canvas 上設(shè)置對應(yīng)的 css 樣式即可。4JS28資訊網(wǎng)——每日最新資訊28at.com

4JS28資訊網(wǎng)——每日最新資訊28at.com

多種旋轉(zhuǎn)角度的旋轉(zhuǎn)和縮放光標(biāo)

有兩種光標(biāo)比較特殊,它們有特殊的旋轉(zhuǎn)角度的參數(shù)。4JS28資訊網(wǎng)——每日最新資訊28at.com

它們就是旋轉(zhuǎn)和縮放光標(biāo)。4JS28資訊網(wǎng)——每日最新資訊28at.com

4JS28資訊網(wǎng)——每日最新資訊28at.com

因為 cursor 這個 css 屬性并不支持設(shè)置旋轉(zhuǎn)角度,所以我們只能繪制 0 到 359 之間度數(shù)共 360 個不同的旋轉(zhuǎn)光標(biāo)圖片。4JS28資訊網(wǎng)——每日最新資訊28at.com

縮放光標(biāo)因為其樣式中心對稱的原因,倒是不需要這么多,只要繪制 0 到 179 共 180 個圖片。4JS28資訊網(wǎng)——每日最新資訊28at.com

然后是 精細(xì)度的問題。4JS28資訊網(wǎng)——每日最新資訊28at.com

你這里可以整一些貓膩,比如偷懶,抽走一些度數(shù),只給偶數(shù)的度數(shù),比如 2、4,奇數(shù)的度數(shù)都丟掉,沒有 1、3 這些度數(shù)。設(shè)置光標(biāo)的時候舍入一下,找最接近的度數(shù)。4JS28資訊網(wǎng)——每日最新資訊28at.com

或者你精益求精,你說間隔 1 度未免太大,我們要更精確一點,我們不僅支持整數(shù),我們還要支持 1.5、6.5 這種中間值,我們要用 720 個圖片。4JS28資訊網(wǎng)——每日最新資訊28at.com

沒問題,都可以上。4JS28資訊網(wǎng)——每日最新資訊28at.com

批量生成方案

但是呢,我們發(fā)現(xiàn),這些光標(biāo)其實都來自一個源圖片,只是旋轉(zhuǎn)了不同的角度,我們手工一個個操作未免太低效了。4JS28資訊網(wǎng)——每日最新資訊28at.com

這時候我們就可以自己寫或找一些工具,批量對一張源圖形生成旋轉(zhuǎn)多種角度后的圖片,然后再寫個腳本去自動生成 css 代碼,把這些圖片引入進去。4JS28資訊網(wǎng)——每日最新資訊28at.com

這是一個方案,figma 是這么做的。4JS28資訊網(wǎng)——每日最新資訊28at.com

感覺還是有億點麻煩。沒事,我們有另一個方案。4JS28資訊網(wǎng)——每日最新資訊28at.com

上面做的是打包前生成大量圖片,那我們可不可以在運行時動態(tài)生成光標(biāo)呢?4JS28資訊網(wǎng)——每日最新資訊28at.com

可以的。圖片有位圖的,也有矢量的啊,我們可以用一種叫做 SVG 的特殊圖片格式,它的內(nèi)容是文本,一種的 xml 文本。4JS28資訊網(wǎng)——每日最新資訊28at.com

我們可以將光標(biāo) UI 導(dǎo)出為 SVG,然后在最頂層的元素加上 transform 的旋轉(zhuǎn)變換。4JS28資訊網(wǎng)——每日最新資訊28at.com

可以寫一個方法,傳入角度和位置信息,動態(tài)生成對應(yīng)的 SVG 字符串,然后轉(zhuǎn)成 DataURL 給 cursor 應(yīng)用上。4JS28資訊網(wǎng)——每日最新資訊28at.com

大概像這樣:4JS28資訊網(wǎng)——每日最新資訊28at.com

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 選擇了這個方案。4JS28資訊網(wǎng)——每日最新資訊28at.com

4JS28資訊網(wǎng)——每日最新資訊28at.com

你可以給一個精度很高的旋轉(zhuǎn)度數(shù)。4JS28資訊網(wǎng)——每日最新資訊28at.com

4JS28資訊網(wǎng)——每日最新資訊28at.com

模塊設(shè)計

代碼設(shè)計上,我們會設(shè)計一個 CursorManager 類進行光標(biāo)的管理。4JS28資訊網(wǎng)——每日最新資訊28at.com

這個類最重要的作用就是設(shè)置光標(biāo)值。4JS28資訊網(wǎng)——每日最新資訊28at.com

setCursor 方法接收一個光標(biāo)值,除了支持傳統(tǒng)的字符串,也支持 { type: 'rotation'; degree: 45 } 這種形式。4JS28資訊網(wǎng)——每日最新資訊28at.com

它主要做了如下操作:4JS28資訊網(wǎng)——每日最新資訊28at.com

  • 標(biāo)準(zhǔn)化光標(biāo)值,比如把度數(shù)取余到 0~360 內(nèi)。
  • 比較新舊光標(biāo)值,相同就跳過。
  • 清空原來設(shè)置的光標(biāo)樣式。
  • 根據(jù)光標(biāo)不同,執(zhí)行各自的邏輯。

下面是核心代碼實現(xiàn)。4JS28資訊網(wǎng)——每日最新資訊28at.com

// 支持的光標(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)還有一種比較少用的方案,也說說吧。4JS28資訊網(wǎng)——每日最新資訊28at.com

就是有些光標(biāo)是繪制在畫布上的。4JS28資訊網(wǎng)——每日最新資訊28at.com

一個經(jīng)典的例子就是 AutoCAD 的十字光標(biāo),這個十字的長度是可以設(shè)置的,可以相當(dāng)長。4JS28資訊網(wǎng)——每日最新資訊28at.com

4JS28資訊網(wǎng)——每日最新資訊28at.com

如果你修改操作系統(tǒng)的光標(biāo),那這個十字便會突破天際地顯示到非繪制區(qū)域上。4JS28資訊網(wǎng)——每日最新資訊28at.com

此外,AutoCAD 的光標(biāo)并不忠實跟隨操作系統(tǒng)光標(biāo),比如有時候會吸附于某點不動,并基于它的位置顯示下拉菜單,此時可以用真正的光標(biāo)去點選。4JS28資訊網(wǎng)——每日最新資訊28at.com

4JS28資訊網(wǎng)——每日最新資訊28at.com

考慮到性能,建議把光標(biāo)放到另一個 canvas 上,和圖形放一個 canvas 會讓畫布中沒做任何操作的圖形頻繁重繪。4JS28資訊網(wǎng)——每日最新資訊28at.com

結(jié)尾

總結(jié)一下。4JS28資訊網(wǎng)——每日最新資訊28at.com

關(guān)于圖形編輯器的光標(biāo),我們有以下方案:4JS28資訊網(wǎng)——每日最新資訊28at.com

  • 使用瀏覽器本身就提供的一些光標(biāo)值。優(yōu)點是成本低,缺點是樣式有限,且不同操作系統(tǒng)風(fēng)格差異大;
  • cursor 支持自定義光標(biāo),所以我們可以自己設(shè)置自己的一套光標(biāo)去應(yīng)用。但其中有一些比較特殊的有各種旋轉(zhuǎn)方向的光標(biāo),需要做特別的處理。一種是用工具批量生產(chǎn)光標(biāo)圖片,一種是利用 svg 在運行時動態(tài)生成;
  • 最后是在畫布上渲染光標(biāo)的方案,適合一些有特殊需求的圖形編輯器。這類圖形編輯器的光標(biāo)往往可以自定義,且可以非常大,或是它們在某些場景下會脫離鼠標(biāo)的控制,喜歡特立獨行,比如突然吸附到某個吸附點上。缺點是實現(xiàn)比較復(fù)雜,你可能需要像管理圖形一樣去管理它。

本文鏈接: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

上一篇: 盤一盤這個沒資格出現(xiàn)在面試環(huán)節(jié)的場景題

下一篇: @Configuration注解天天用,你真的了解它嗎?

標(biāo)簽:
  • 熱門焦點
  • 盧偉冰長文解析K60至尊版 對Redmi有著里程碑式的意義

    在今天的Redmi后性能時代戰(zhàn)略發(fā)布會結(jié)束之后,Redmi總經(jīng)理盧偉冰又帶來了一篇長文,詳解了為什么 Redmi 要開啟后性能時代?為什么選擇和 MediaTek、Pixelworks 深度合作?以及后性
  • 小米平板5 Pro 12.4簡評:多專多能 兼顧影音娛樂的大屏利器

    疫情帶來了網(wǎng)課,網(wǎng)課盤活了安卓平板,安卓平板市場雖然中途停滯了幾年,但好的一點就是停滯的這幾年行業(yè)又有了新的發(fā)展方向,例如超窄邊框、高刷新率、多攝鏡頭組合等,這就讓安卓
  • 三言兩語說透設(shè)計模式的藝術(shù)-簡單工廠模式

    一、寫在前面工廠模式是最常見的一種創(chuàng)建型設(shè)計模式,通常說的工廠模式指的是工廠方法模式,是使用頻率最高的工廠模式。簡單工廠模式又稱為靜態(tài)工廠方法模式,不屬于GoF 23種設(shè)計
  • 把LangChain跑起來的三個方法

    使用LangChain開發(fā)LLM應(yīng)用時,需要機器進行GLM部署,好多同學(xué)第一步就被勸退了,那么如何繞過這個步驟先學(xué)習(xí)LLM模型的應(yīng)用,對Langchain進行快速上手?本片講解3個把LangChain跑起來
  • 企業(yè)采用CRM系統(tǒng)的11個好處

    客戶關(guān)系管理(CRM)軟件可以為企業(yè)提供很多的好處,從客戶保留到提高生產(chǎn)力。  CRM軟件用于企業(yè)收集客戶互動,以改善客戶體驗和滿意度。  CRM軟件市場規(guī)模如今超過580
  • 一文搞定Java NIO,以及各種奇葩流

    大家好,我是哪吒。很多朋友問我,如何才能學(xué)好IO流,對各種流的概念,云里霧里的,不求甚解。用到的時候,現(xiàn)百度,功能雖然實現(xiàn)了,但是為什么用這個?不知道。更別說效率問題了~下次再遇到,
  • 重估百度丨大模型,能撐起百度的“今天”嗎?

    自象限原創(chuàng) 作者|程心 羅輯2023年之前,對于自己的&ldquo;今天&rdquo;,百度也很迷茫。&ldquo;新業(yè)務(wù)到 2022 年底還是 0,希望 2023 年出來一個 1。&rdquo;這是2022年底,李彥宏
  • 2299元起!iQOO Pad開啟預(yù)售:性能最強天璣平板

    5月23日,iQOO如期舉行了新品發(fā)布會,除了首發(fā)安卓最強旗艦處理器的iQOO Neo8系列新機外,還在發(fā)布會上推出了旗下首款平板電腦——iQOO Pad,其搭載了天璣
  • 北京:科技教育體驗基地開始登記

      北京“科技館之城”科技教育體驗基地登記和認(rèn)證工作日前啟動。首批北京科技教育體驗基地擬于2023年全國科普日期間掛牌,后續(xù)還將開展常態(tài)化登記。  北京科技教育體驗基
Top 主站蜘蛛池模板: 潼关县| 浦县| 台中县| 乐都县| 莫力| 馆陶县| 高清| 固原市| 遂溪县| 东至县| 宁陕县| 康马县| 苍南县| 天津市| 禹城市| 收藏| 和平县| 韩城市| 衡水市| 丹东市| 芜湖市| 潼南县| 德钦县| 银川市| 珠海市| 南岸区| 缙云县| 保康县| 扎兰屯市| 叙永县| 岳池县| 集安市| 福安市| 清水县| 彭阳县| 白山市| 德清县| 开封市| 五寨县| 台前县| 和硕县|