Home > Article > Web Front-end > How to add linethrough to IText using FabricJS?

How to add linethrough to IText using FabricJS?

WBOYforward: 2023-09-02 22:37:021157browse

如何使用 FabricJS 向 IText 添加 linethrough？

In this tutorial, we will learn how to add linethrough to an IText object using FabricJS. The IText class was introduced in FabricJS version 1.4, which extends Fabric.Text and is used to create IText instances. IText instances give us the freedom to select, cut, paste or add new text without additional configuration. There are also various supported key combinations and mouse/touch combinations to make text interactive that are not available in Text.

However, IText-based Textbox allows us to resize the text rectangle and wrap it automatically. This is not the case for IText, as the height does not adjust based on line breaks. We can manipulate IText objects by using various properties. Likewise, we can add linethrough using the linethrough attribute.

grammar

new fabric.IText(text: String , { linethrough: Boolean }: Object)

parameter

text - This parameter accepts a string which is the text we want to display string.
Options (optional) - This parameter is an object that provides additional customization to our IText object. Using this parameter, you can change the color, cursor, border width, and many other properties associated with the object for which linethrough is an attribute.

Option key

inethrough - This property accepts a Boolean value that allows us to specify whether text decoration linethrough is required.

Example 1

Default appearance of IText objects

Let's look at a code example to see what our IText object looks like when not using the linethrough property.

<!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 appearance of IText object</h2>
   <p>You can see that there is no linethrough on text</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 an itext object
      var itext = new fabric.IText("Add Sample Text Here.", {
         width: 300,
         left: 60,
         top: 70,
         fill: "green",
      });

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

Example 2

Pass the linethrough property as key with value true

In this example, we pass the linethrough property as a key with a value of true, which will add linethrough to our IText object.

<!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 the linethrough property as key with the value as true</h2>
   <p>You can see that the linethrough has been added</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 an itext object
      var itext = new fabric.IText("Add Sample Text Here.", {
         width: 300,
         left: 60,
         top: 70,
         fill: "green",
         linethrough: true,
      });

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

The above is the detailed content of How to add linethrough to IText using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!

String Boolean 字符串对象 fabric

Statement：

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

Previous article：How to call a function that returns another function in JavaScript?Next article：How to call a function that returns another function in JavaScript?

See more