How to set the position of a triangle from top using FabricJS?-JS Tutorial-php.cn

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

WBOY

Release： 2023-09-17 16:25:02

forward

942 people have browsed it

如何使用 FabricJS 设置三角形从顶部的位置？

In this tutorial, we will set the position of a triangle using FabricJS. The top property allows us to manipulate the position of an object. By default, the top position is relative to the object's top.

Syntax

 new Fabric.Triangle({ top: Number }: Object)< /pre><h2>Parameters</h2><ul class="list"><li><p><strong> Options</strong><strong> (Optional)</strongphpcngtphp cn - This parameter is an <em>Object</em> 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 <em>top</em> as the attribute. </p></li></ul><h2>Options Keys</h2phpcngt phpcn<ul Class= list"><li><p><strong>top</strong> - This property accepts a <strong>Number</strong> which allows us to set the distance of the triangle from the top of the canvas.</p></li> </ul><h2>Example 1</h2> <p><strong>Default appearance of triangle objects</strong></p><p>Let’s look at a code example to see how our triangle objects appear when the top property is not used.</ p><pre class="demo-code notranslate language-javascript" data-lang="javascript"><!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 appearance of triangle objects</h2>
<p> The default appearance of the triangle can be seen when the <b>top</b> attribute is not used. </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: 105,
Width: 90,
Height: 80,
Fill in: "#ffc1cc",
Stroke: "#fbaed2",
Stroke width: 5,
});

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

Example 2

Passing the top attribute as a key using a custom value

In this example, we pass the top attribute as the key with a value of 70. This means our triangle object will be placed 70px from the top.

<!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 top attribute as a key with a custom value</h2>
<p>You can see that the triangle object is placed 70px from the top</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: 105,
Top: 70,
Width: 90,
Height: 80,
Fill in: "#ffc1cc",
Stroke: "#fbaed2",
Stroke width: 5,
});

//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 top using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!