所属分类：web前端开发
在本教程中，我们将向您展示如何创建 Fabric.Image 的实例 使用 FabricJS 从其对象表示中获得。我们可以通过以下方式创建一个 Image 对象 创建fabric.Image的实例。由于它是FabricJS的基本元素之一， 我们还可以通过应用角度、不透明度等属性来轻松自定义它。 从它的对象表示创建fabric.Image的实例，我们使用 fromObject 方法。
fromObject(object: Object, callback: function)
object - 此参数接受一个对象，该对象表示从中获取的对象 将创建图像。
callback - 此参数是一个函数，当图像 实例已创建。
让我们看一个代码示例，了解当 fromObject 时 Image 对象如何出现 方法没有被使用。在这种情况下，我们只需要创建一个fabric.Image实例并 将其添加到我们的画布中。
微博登录
QQ登录<!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>Without using the fromObject method</h2>
<p>You can see that the image object has been added to the canvas</p>
<canvas id="canvas"></canvas>
<img src="https://img.zzsucai.com/202309/08/17Zi2682822092407.png" id="img1" style="display: none" />
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating the image element
var imageElement = document.getElementById("img1");
// Initiate an Image object
var image = new fabric.Image(imageElement, {
top: 50,
left: 110,
});
// Add it to the canvas
canvas.add(image);
</script>
</body>
</html>
在此示例中，我们使用了 fromObject 方法来演示我们可以 即使我们没有图像元素，也可以创建图像对象。在这种情况下，我们 需要从中创建图像实例的对象。之后 调用回调函数并将其添加到画布中。
<!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>Using the fromObject method</h2>
<p>You can see that the image has been added</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Using fromObject method
fabric.Image.fromObject({
type: "image",
version: "5.1.0",
originX: "left",
originY: "top",
left: 110,
src: "https://img.zzsucai.com/202309/08/17Zi2682822092407.png",
},
function(oImg) {
oImg.set("top", 50);
canvas.add(oImg);
}
);
</script>
</body>
</html>
在本教程中，我们使用两个示例来演示如何创建实例 使用 FabricJS 从其对象表示中获取 Fabric.Image。
