Свойство Fabric.js Image originX

Опубликовано: 5 Декабря, 2021

Fabric.js - это библиотека JavaScript, которая используется для работы с холстом. Canvas Image - это один из классов Fabric.js, который используется для создания экземпляров Image. Изображение в Fabric.js можно перемещать и при необходимости растягивать. В этой статье мы будем использовать свойство originX для установки горизонтальной исходной точки изображения холста.

Подход : сначала импортируйте библиотеку Fabric.js. После импорта библиотеки создайте блок холста в теге body, который будет содержать изображение. После этого инициализируйте экземпляр класса Canvas и Image, предоставленный Fabric.js, используйте свойство originX, чтобы установить горизонтальную исходную точку изображения и визуализировать изображение на холсте.

Синтаксис :

 fabric.Image (image, {
  originX: строка
});

Параметры : эта функция принимает один параметр, как указано выше и описано ниже:

originX : определяет горизонтальное преобразование изображения холста.

Пример . В этом примере используется Fabric.js для установки свойства originX изображения холста, как показано в следующем примере:

HTML

 < 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 originX 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, {
            originX:'center'
        });
 
        canvas.add(geeks);
        canvas.centerObject(geeks);
    </ script >
 </ body >
 </ html > 

Выход:

JavaScript HTML

Свойство Fabric.js Image originX

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ