简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  How to set the position of a triangle from the left using FabricJS?

How to set the position of a triangle from the left using FabricJS?

WBOY
WBOYforward
2023-09-11 17:05:091168browse

如何使用 FabricJS 设置三角形从左开始的位置？

In this tutorial, we will learn how to set the position of a triangle from the left using FabricJS. Triangle is one of the various shapes provided by FabricJS. In order to create a triangle, we must create an instance of the fabric.Triangle class and add it to the canvas.

We can change the triangle object's position, opacity, Use the stroke and its dimensions to manipulate triangular objects. You can use the left property to change the position of the left side.

Syntax

new Fabric.Triangle( { left: Number }: Object )

Parameters

  • Options (optional )phpcnltphp cn/strong> - This parameter is Object which provides additional customization to our triangle. Using this parameter, you can change the color, cursor, stroke width and other properties related to the object with left as the attribute.

Options Keys

  • left - This property accepts a Number value, which sets the left position of the object. This value determines how far the object will be placed from the left edge of the canvas.

    Example 1

    Default placement of triangle objects

    Let’s look at a code example to understand the default placement of triangle objects on the canvas when the position is unchanged.

    <!DOCTYPE html>
<html>
<head>
<!--Add Fabric JS library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Default placement of triangle objects</h2>
<p>You can see the default position of the triangle</p>
<canvas id="canvas"></canvas>
<script>
//Start the canvas instance
var canvas = new Fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
Canvas.setHeight(250);

//Initialize a triangle object
var triangle = new Fabric.Triangle({
Top: 50,
Fill in: "#b0e0e6",
Height: 90,
Width: 100,
});

//Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>

    Example 2

    Passing left-hand attribute as key

    In this example, we are assigning a custom value to the left attribute. Since it accepts a Number, you must assign it a numeric value that will represent its position from the left. 

    <!DOCTYPE html>
<html>
<head>
<!--Add Fabric JS library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Pass the left property as a key</h2>
<p>You can see that the triangle is placed 80px from the left. </p>
<canvas id="canvas"></canvas>
<script>
//Start the canvas instance
var canvas = new Fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
Canvas.setHeight(250);

//Initialize a triangle object
var triangle = new Fabric.Triangle({
Left: 80,
Top: 50,
Fill in: "#b0e0e6",
Height: 90,
Width: 100,
});

//Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>

    The above is the detailed content of How to set the position of a triangle from the left using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!

    • JavaScript ajax html Object class var JS number 对象 canvas ul li https fabric
    Statement：
    This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
    Previous article：How to create an array from the intersection of two arrays in JavaScript?Next article：How to create an array from the intersection of two arrays in JavaScript?

    Related articles

    See more