在本文中，我們將使用 FabricJS 創(chuàng)建一個(gè)帶有等待光標(biāo)的畫(huà)布。等待光標(biāo)可用于指示后臺(tái)的繁忙程序，這也會(huì)阻止用戶與界面交互。 wait 是可用的原生光標(biāo)樣式之一，也可以在 FabricJS 畫(huà)布中使用。
FabricJS 提供各種類(lèi)型的光標(biāo)，如默認(rèn)、全滾動(dòng)、十字準(zhǔn)線、列調(diào)整大小、行調(diào)整大小等.在幕后重用本機(jī)光標(biāo)。根據(jù)操作系統(tǒng)的不同，每個(gè)游標(biāo)看起來(lái)都略有不同。
語(yǔ)法
new fabric.Canvas(element: HTMLElement|String, { defaultCursor: String }: Object)
登錄后復(fù)制
參數(shù)
元素 – 此參數(shù)是 元素本身，可以使用 document.getElementById() 或 元素本身的 id 派生。 FabricJS 畫(huà)布將在此元素上初始化。
選項(xiàng)（可選） – 此參數(shù)是一個(gè)對(duì)象，它提供對(duì)我們的畫(huà)布進(jìn)行額外的定制。使用這個(gè)參數(shù)，可以改變畫(huà)布相關(guān)的顏色、光標(biāo)、邊框?qū)挾鹊群芏鄬傩裕渲?em>defaultCursor是我們可以設(shè)置光標(biāo)類(lèi)型的屬性
示例 1
defaultCursor 屬性接受一個(gè)字符串，該字符串確定要在畫(huà)布上使用的光標(biāo)的名稱(chēng)。我們將其設(shè)置為等待以使用等待光標(biāo)。讓我們看一個(gè)使用 FabricJS 創(chuàng)建帶有等待光標(biāo)的畫(huà)布的示例：
<!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
在此示例中，我們將在畫(huà)布上添加一個(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)的畫(huà)布？的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章！
