How to customize the canvas's viewport using FabricJS?-JS Tutorial-php.cn

How to customize the canvas's viewport using FabricJS?

王林

Release： 2023-09-03 10:13:05

forward

622 people have browsed it

How to customize the canvass viewport using FabricJS?

In this article, we will learn how to customize the viewport of a canvas using FabricJS. The viewport is the area of the canvas visible to the user. We can customize the viewport using the viewportTransform property, which allows us to control the transformation of the viewport

Syntax

new fabric.Canvas(element: HTMLElement|String, { viewportTransform: Array }: Object)

Copy after login

Parameters

Element - This parameter is the
Options (optional) - This parameter is an object that provides additional customization of our canvas. Using this parameter, you can change the color, cursor, border width and many other attributes related to the canvas, among which viewportTransform is an attribute. It accepts an array of 6 values used to determine the transformation on the plane. The default value is canvas.viewportTransform = [1, 0, 0, 1, 0, 0].

Example 1

Passing the viewportTransform attribute as the key of the class

Let’s look at a code example to understand how to customize The viewport of the canvas. In this example, we have used the values [0.7, 0.1, 0.5, 0.9, 20, 50] to represent scaleX, skewY, skewX, scaleY, translation and translationY, respectively.

<!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>Customizing the viewport of the canvas using FabricJS </h2>
   <p>Select an area around the object to see the viewports.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         viewportTransform: [0.7, 0.1, 0.5, 0.9, 20, 50]
      });
      // Creating an instance of the fabric.Rect class
      var circle = new fabric.Circle({
         left: 215,
         top: 100,
         radius: 50,
         fill: "red",
      });
      // Adding it to the canvas
      canvas.add(circle);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Copy after login

Example 2

Pass viewportTransform property as key with custom value to shrink object

Let’s see another code example showing scaling 80% and pan to the lower right corner without tilting the transform.

<!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>Customizing the viewport of the canvas using FabricJS </h2>
   <p>Select an area around the object to see the viewports.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         viewportTransform: [0.8, 0, 0, 0.8, 50, 50]
      });
      // Creating an instance of the fabric.Rect class
      var circle = new fabric.Circle({
         left: 215,
         top: 100,
         radius: 50,
         fill: "red"
      });
      // Adding it to the canvas
      canvas.add(circle);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Copy after login

The above is the detailed content of How to customize the canvas's viewport using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!