在本文中,我們將使用 FabricJS 創(chuàng)建一個(gè)帶有等待光標(biāo)的畫布。等待光標(biāo)可用于指示后臺(tái)的繁忙程序,這也會(huì)阻止用戶與界面交互。 wait 是可用的原生光標(biāo)樣式之一,也可以在 FabricJS 畫布中使用。
FabricJS 提供各種類型的光標(biāo),如默認(rèn)、全滾動(dòng)、十字準(zhǔn)線、列調(diào)整大小、行調(diào)整大小等.在幕后重用本機(jī)光標(biāo)。根據(jù)操作系統(tǒng)的不同,每個(gè)游標(biāo)看起來都略有不同。
語法
new fabric.Canvas(element: HTMLElement|String, { defaultCursor: String }: Object)
登錄后復(fù)制
參數(shù)
元素 – 此參數(shù)是 元素本身,可以使用 document.getElementById() 或 元素本身的 id 派生。 FabricJS 畫布將在此元素上初始化。
選項(xiàng)(可選) – 此參數(shù)是一個(gè)對(duì)象,它提供對(duì)我們的畫布進(jìn)行額外的定制。使用這個(gè)參數(shù),可以改變畫布相關(guān)的顏色、光標(biāo)、邊框?qū)挾鹊群芏鄬傩?,其?em>defaultCursor是我們可以設(shè)置光標(biāo)類型的屬性
示例 1
defaultCursor 屬性接受一個(gè)字符串,該字符串確定要在畫布上使用的光標(biāo)的名稱。我們將其設(shè)置為等待以使用等待光標(biāo)。讓我們看一個(gè)使用 FabricJS 創(chuàng)建帶有等待光標(biāo)的畫布的示例:
<!DOCTYPE html> <html> <head> <!-- Adding the Fabric JS Library--> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Canvas with a wait cursor using FabricJS</h2> <p>Bring the cursor inside the canvas to see the changed shape of cursor</p> <canvas id="canvas"></canvas> <script> //Initiate a canvas instance var canvas = new fabric.Canvas("canvas", { defaultCursor: "wait" }); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
登錄后復(fù)制
示例 2
在此示例中,我們將在畫布上添加一個(gè)圓圈以及等待光標(biāo)。
<!DOCTYPE html> <html> <head> <!-- Adding the Fabric JS Library--> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Canvas with a wait cursor using FabricJS</h2> <p>Here we have added a circle to the canvas along with a wait cursor</p> <canvas id="canvas"></canvas> <script> //Initiate a canvas instance var canvas = new fabric.Canvas("canvas", { defaultCursor: "wait" }); // Initiate a Circle instance var circle = new fabric.Circle({ radius: 50, fill: "green" }); // Render the circle in canvas canvas.add(circle); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
登錄后復(fù)制
以上就是如何使用 FabricJS 創(chuàng)建帶有等待光標(biāo)的畫布?的詳細(xì)內(nèi)容,更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章!