Home >Web Front-end >JS Tutorial >How to lock the rotation of a triangle using FabricJS?

How to lock the rotation of a triangle using FabricJS?

王林forward: 2023-09-18 13:21:10784browse

如何使用 FabricJS 锁定三角形的旋转？

In this tutorial, we will learn how to lock the rotation of a triangle using FabricJS. Just as we can specify the position, color, opacity, and size of a triangle object in the canvas, we can also specify whether it is rotated. This can be done using the lockRotation attribute.

Syntax

new fabric.Triangle({ lockRotation : Boolean }: Object)

Parameters

Options (optional) - This parameter is a Object Provides additional customization to our triangle. Using this parameter, you can change the color, cursor, stroke width and other properties of the object related to the lockRotation property.

Option Key

lockRotation - This property accepts a Boolean value. If we give it a "true" value, the object rotation will be locked.

Example 1

Default Behavior of Triangle Objects in Canvas

Let’s look at a code example to understand what the future The default behavior of triangle objects when using the lockRotation property. By default, we can rotate triangle objects counterclockwise or clockwise.

<!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>Default behaviour of a Triangle object in the canvas</h2>
   <p>You can select triangle and try rotating it to see the default behavior.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a triangle object
      var triangle = new fabric.Triangle({
         left: 105,
         top: 70,
         width: 90,
         height: 80,
         fill: "#746cc0",
         stroke: "#967bb6",
         strokeWidth: 5,
      });

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

Example 2

Passing lockRotation as a key with a value of "true"

In this example, We'll look at how we can use the lockRotation property to stop the ability of a triangle object to rotate. As we can see, as soon as we try to rotate the triangle object, the disallowed cursor is displayed. This means that rotation operations are no longer allowed.

<!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>Passing lockRotation as key with &#39;true&#39; value</h2>
   <p>You can see that you are no longer allowed to rotate the triangle.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a triangle object
      var triangle = new fabric.Triangle({
         left: 105,
         top: 70,
         width: 90,
         height: 80,
         fill: "#746cc0",
         stroke: "#967bb6",
         strokeWidth: 5,
         lockRotation: true,
      });

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

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

对象 ul

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：Create custom modules in Node.jsNext article：Create custom modules in Node.js

See more