在这篇文章中，我们将使用 add 方法将对象添加到画布。创建画布后，我们可以使用 FabricJS 中提供的各种对象填充它，例如 fabric.Circle、fabric.Ellipse 或 fabric.Line 等。语法 canvas.add(object: fabric.Object); 参数 Object − 此参数的类型为 fabric.Object，包含我们要添加到画布的对象。示例 1：在 canvas.add() 内创建对象的实例 无需先创建对象的实例，然后使用 add() 方法将其渲染到画布上，我们可以在 add() 方法内直接执行此操作。这是一个示例…… 阅读更多

在这篇文章中，我们将说明如何使用 FabricJS 禁用通过拖动选择对象。在 FabricJS 画布中，我们基本上可以单击任意位置并选择一个区域，该区域中的任何对象都将被选中。在这篇文章中，我们将了解如何禁止这种行为。语法 new fabric.Canvas(element: HTMLElement|String, {selection: boolean}: Object) 参数 element − 此参数是元素本身，可以使用 document.getElementById() 或元素本身的 ID 获取。FabricJS 画布将在此元素上初始化。 options (可选) − 此参数是一个对象，提供额外的自定义功能…… 阅读更多

在这篇文章中，我们将了解如何使用 containerClass 属性创建带有类的画布。为了访问原生 HTML canvas 元素，我们可以在其上添加一个包装器类。此类允许我们控制元素以根据需要添加交互性或样式。语法 new fabric.Canvas(element: HTMLElement|String, { containerClass: String}: Object) 参数 element − 此参数是元素本身，可以使用 document.getElementById() 或元素本身的 ID 获取。FabricJS 画布将在此元素上初始化。 options (可选) − 此参数是一个…… 阅读更多

在这篇文章中，我们将使用 FabricJS 创建带有背景图像的画布。FabricJS 中有两种方法可以更改画布的背景图像。第一种方法是使用 Canvas 类本身，并在类的第二个参数中传递 backgroundImage。第二种方法是使用 setBackgroundColor 方法。让我们通过示例了解每种方法。方法 1：使用 Canvas 类 在第一种方法中，我们将使用 Canvas 类本身，并在类的第二个参数中传递 backgroundImage。语法 new fabric.Canvas(element: HTMLElement|String, {backgroundImage: fabric.Image}: Object) 参数 element … 阅读更多

在这篇文章中，我们将使用 FabricJS 创建具有给定背景颜色的画布。FabricJS API 提供的默认背景颜色为白色，可以使用第二个参数自定义。语法 new fabric.Canvas(element: HTMLElement|String, { backgroundColor: String }: Object) 参数 element − 此参数是元素本身，可以使用 document.getElementById() 或元素本身的 ID 获取。FabricJS 画布将在此元素上初始化。 Options − 此参数是一个对象，为我们的画布提供额外的可定制性，backgroundColor 是其中之一，它将帮助我们自定义…… 阅读更多

在这篇文章中，我们将使用 FabricJS 创建画布，但在此之前，让我们了解什么是画布。为了在网页上绘制图形，我们有一个名为 Canvas API 的 Web API。此 API 非常适合绘制基本形状，但是为其添加交互性或绘制复杂形状会变得非常困难。因此，FabricJS 出现了，它是一个构建在 Canvas API 之上的库。要使用 FabricJS，首先需要创建一个 FabricJS 画布。语法 new fabric.Canvas(element: HTMLElement|String, options: Object) 参数 element − 此参数是…… 阅读更多