如何使用 FabricJS 创建一个等待光标悬停在对象上的矩形?
在本教程中,我们将使用 FabricJS 创建一个带有等待光标悬停在对象上的矩形。 wait 是可用的本机光标样式之一,也可以在 FabricJS 画布中使用。 FabricJS 提供了各种类型的光标,如默认、全滚动、十字准线、列调整大小、行调整大小等,它们在幕后重用了本机光标。 hoverCursor 属性设置光标悬停在画布对象上时的样式。
语法
new fabric.Rect({ hoverCursor: String }: Object)
参数
选项(可选) - 此参数是一个提供额外自定义的对象到我们的矩形。使用此参数,可以更改与 hoverCursor 属性相关的对象的颜色、光标、描边宽度和许多其他属性。
Options Keys
hoverCursor - 该属性接受一个String,它确定光标的名称用于将鼠标悬停在画布对象上。使用此功能,我们可以设置将鼠标悬停在画布上的此矩形对象上时的默认光标值。
示例 1
传递 hoverCursor 类的键
默认情况下,当我们将鼠标悬停在画布中的矩形对象上时,光标类型为移动。让我们看一个代码示例,用于在将鼠标悬停在 FabricJS 中的矩形对象上时创建带有 wait 光标的画布。
<!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>Passing the hoverCursor key to the class</h2> <p>Hover over the rectangle to see the wait cursor</p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiate a rectangle object var rect = new fabric.Rect({ left: 125, top: 90, width: 170, height: 70, fill: "#faf0e6", padding: 9, stroke: "#9370db", strokeWidth: 5, hoverCursor: "wait", }); // Add it to the canvas canvas.add(rect); </script> </body> </html>
示例 2
演示它仅影响实例
在此示例中,我们传递 hoverCursor 键到矩形类,这意味着画布中的每个对象的 hoverCursor 属性都不会更改。仅针对该单个对象发生更改。下面的代码示例对此进行了说明 -
<!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>Demonstrating that it affects the instance only</h2> <p>Hover over the rectangle objects to see that wait cursor applies to the left rectangle only. We have not applied the <b>hoverCursor</b> property on the rectangle that is on the right.</p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiate a rectangle object var rect1 = new fabric.Rect({ left: 55, top: 90, width: 170, height: 70, fill: "#faf0e6", padding: 9, stroke: "#9370db", strokeWidth: 5, hoverCursor: "wait", }); // Initiate another rectangle object var rect2 = new fabric.Rect({ left: 325, top: 90, width: 170, height: 70, fill: "#9370db", padding: 9, stroke: "#e6e6fa", strokeWidth: 5, }); // Add them to the canvas canvas.add(rect1); canvas.add(rect2); </script> </body> </html>
以上是如何使用 FabricJS 创建一个等待光标悬停在对象上的矩形?的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

热门话题

本文讨论了在浏览器中优化JavaScript性能的策略,重点是减少执行时间并最大程度地减少对页面负载速度的影响。

本文讨论了使用浏览器开发人员工具的有效JavaScript调试,专注于设置断点,使用控制台和分析性能。

本文说明了如何使用源地图通过将其映射回原始代码来调试JAVASCRIPT。它讨论了启用源地图,设置断点以及使用Chrome DevTools和WebPack之类的工具。

掌握了入门级TypeScript教程后,您应该能够在支持TypeScript的IDE中编写自己的代码,并将其编译成JavaScript。本教程将深入探讨TypeScript中各种数据类型。 JavaScript拥有七种数据类型:Null、Undefined、Boolean、Number、String、Symbol(ES6引入)和Object。TypeScript在此基础上定义了更多类型,本教程将详细介绍所有这些类型。 Null数据类型 与JavaScript一样,TypeScript中的null

本文探讨了Java收藏框架的有效使用。 它强调根据数据结构,性能需求和线程安全选择适当的收集(列表,设置,地图,队列)。 通过高效优化收集用法

本教程将介绍如何使用 Chart.js 创建饼图、环形图和气泡图。此前,我们已学习了 Chart.js 的四种图表类型:折线图和条形图(教程二),以及雷达图和极地区域图(教程三)。 创建饼图和环形图 饼图和环形图非常适合展示某个整体被划分为不同部分的比例。例如,可以使用饼图展示野生动物园中雄狮、雌狮和幼狮的百分比,或不同候选人在选举中获得的投票百分比。 饼图仅适用于比较单个参数或数据集。需要注意的是,饼图无法绘制值为零的实体,因为饼图中扇形的角度取决于数据点的数值大小。这意味着任何占比为零的实体
