search

Home >Web Front-end >JS Tutorial >How to customize the canvas's viewport using FabricJS?

How to customize the canvas's viewport using FabricJS?

王林
王林forward
2023-09-03 10:13:05739browse

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)

Parameters

  • Element - This parameter is the em> element itself and can be derived using Document.getElementById() or the id of the element itself. The FabricJS canvas will be initialized on this element.

  • 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>

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>

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!

对象 canvas
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to check the type of a variable or object in JavaScript?Next article：How to check the type of a variable or object in JavaScript?

Related articles

See more