Fabric.js Image originY 属性
Fabric.js 是一个用于操作 canvas 的 JavaScript 库。canvas Image 是 Fabric.js 中的一个类,用于创建 Image 实例。Fabric.js 中的 Image 可移动并可根据需要拉伸。在本文中,我们将使用 originY 属性来设置 canvas Image 的垂直起点。
方法 :首先导入 Fabric.js 库。导入库后,在 body 标签中创建一个包含 Image 的 canvas 块。然后,初始化 Fabric.js 提供的 Canvas 和 Image 类的实例,使用 originY 属性设置 Image 的垂直起点,并将 Image 渲染到 Canvas。
语法 :
fabric.Image(image, {
originY : string
});
参数 :此函数接受一个单一参数,如上所述并以下述方式描述:
- originY: 它指定画布图像的垂直变换。
示例 :此示例使用Fabric.js来设置画布图像的originY属性,如下所示:
<html>
<head>
<!-- Adding the FabricJS library -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js">
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<b>
Fabric.js | Image originY Property
</b>
<canvas id="canvas" width="400" height="300"
style="border:2px solid #000000">
</canvas>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200327230544/g4gicon.png"
width="100" height="100" id="my-image"
style="display: none;">
<br>
<script>
// Creating the instance of canvas object
var canvas = new fabric.Canvas("canvas");
// Getting the Image
var img = document.getElementById('my-image');
// Creating the Image instance
var geeks = new fabric.Image(img, {
originY:'up'
});
canvas.add(geeks);
canvas.centerObject(geeks);
</script>
</body>
</html>
输出: