在本教程中，我们将向您展示如何创建 Fabric.Image 的实例
使用 FabricJS 从其对象表示中获得。我们可以通过以下方式创建一个 Image 对象
创建fabric.Image的实例。由于它是FabricJS的基本元素之一，
我们还可以通过应用角度、不透明度等属性来轻松自定义它。
从它的对象表示创建fabric.Image的实例，我们使用
fromObject 方法。
语法
fromObject(object: Object, callback: function)
参数
-
object – 此参数接受一个对象，该对象表示从中获取的对象
将创建图像。 -
callback – 此参数是一个函数，当图像
实例已创建。
不使用fromObject方法
示例
让我们看一个代码示例，了解当 fromObject 时 Image 对象如何出现
方法没有被使用。在这种情况下，我们只需要创建一个fabric.Image实例并
将其添加到我们的画布中。
<!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://www.tutorialspoint.com/images/logo.png" id="img1" style="max-width:90%" / alt="FabricJS – 如何从其对象表示创建fabric.Image 的实例？" >
<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方法
示例
在此示例中，我们使用了 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://www.tutorialspoint.com/images/logo.png",
},
function(oImg) {
oImg.set("top", 50);
canvas.add(oImg);
}
);
</script>
</body>
</html>
结论
在本教程中，我们使用两个示例来演示如何创建实例
使用 FabricJS 从其对象表示中获取 Fabric.Image。
想要了解更多内容，请持续关注码农资源网，一起探索发现编程世界的无限可能!
本站部分资源来源于网络，仅限用于学习和研究目的，请勿用于其他用途。
如有侵权请发送邮件至1943759704@qq.com删除
码农资源网 » FabricJS – 如何从其对象表示创建fabric.Image 的实例？
本站部分资源来源于网络，仅限用于学习和研究目的，请勿用于其他用途。
如有侵权请发送邮件至1943759704@qq.com删除
码农资源网 » FabricJS – 如何从其对象表示创建fabric.Image 的实例？
