Fabric. JS manual bold text iText

Brief introduction

give the thumbs-up + Focus on + Collection = Learned to

<br>

In this paper, Fabric.js Of IText How to make users manually bold text on the canvas .

The effect is shown in the figure ：

<br>

To achieve 2 Kind of operation

1. Full text bold
2. Only bold the selected text

<br>

If you don't know Fabric.js What's the usage? , I highly recommend that you read 《Fabric.js From entry to defiance 》 . This article can make your front-end technology light up another skill point .

<br>

<br>

Full text bold

Just put IText Of fontWeight Property set to bold You can achieve bold .

If you want to change back to the default style , Can be fontWeight Set to normal .

After modifying the text style , You need to perform canvas.renderAll() Re render the canvas contents .

<button onclick="bold()"> In bold </button><canvas id="c2" width="250" height="300" style="border: 1px solid #ccc"></canvas><!--  introduce fabric.js --><script src="js/fabric.js"></script><script>  //  Create a canvas   const canvas = new fabric.Canvas('c2')  //  Create text   const iText = new fabric.IText('hello world')  canvas.add(iText)  function bold() {    //  The currently selected element     let activeTxt = canvas.getActiveObject()    //  Only the selected text does the following     if (activeTxt) {      activeTxt.fontWeight = 'bold' //  Bold the font       canvas.renderAll() //  Re render the canvas     }  }</script>

<br>

<br>

Bold selected text

It can be used setSelectionStyles Set the selected text style , Pass a style object inside .

<button onclick="bold()"> In bold </button><canvas id="c2" width="250" height="300" style="border: 1px solid #ccc"></canvas><!--  introduce fabric.js --><script src="js/fabric.js"></script><script>  //  Create a canvas   const canvas = new fabric.Canvas('c2')  //  Create text   const canvas = new fabric.Canvas('c2')  //  Create text   const iText = new fabric.IText('hello world')  canvas.add(iText)  function bold() {    //  The currently selected element     let activeTxt = canvas.getActiveObject()    if (activeTxt) {      activeTxt.setSelectionStyles({ 'fontWeight': 'bold' }) //  Set the style of the selected text       canvas.renderAll() //  Re render the canvas     }  }</script>

<br>

<br>

Warehouse

• This article code warehouse （ Full version ）

<br>

<br>

Recommended reading

article	brief introduction
《Fabric.js How to use an eraser （ Including recovery function ）》	Eraser needs to download a toolkit , For details, please refer to this article .
《Fabric.js Basic brush usage BaseBrush》	Basic usage of brush
《Fabric.js Draw circles freely 》	take “ Frame selection ” The action is transformed into a free drawing circle
《Fabric.js 3 individual api Set canvas width and height 》	Width and height settings are not available only during initialization , In this paper, 3 There are three ways to set the canvas width and height , Make it easier for your canvas to adapt to different usage scenarios
《Fabric.js Change the picture 3 Methods （ Including changing pictures in the Group , And the existence of cache ）》	If your project needs to dynamically change the pictures on the canvas , Then I'll summarize it for you 3 Medium method
《Fabric.js Righting element 4 Methods （ With transition animation ）》	One click to place the elements that have been rotated by you
《Fabric.js Upload local image to canvas background 》	In addition to setting the canvas background during initialization , I also do the function of uploading background locally , Let the canvas modify the background image at runtime
《 stay Vue3 Use in Fabric.js Achieve gradient (Gradient) effect , Including radial gradient radial》	The official introductory tutorial also has only linear gradients , So that some articles say Fabric.js Only linear gradients are supported . But in fact Radial Gradient I fully support
《Fabric.js From entry to defiance 》	Fabric.js Getting started , Can deal with simple business after learning
《Fabric.js Right-click menu 》	Fabric.js There is no right-click event yet , If you want to realize the function of right-click menu , You can directly copy the code of this article ~

give the thumbs-up + Focus on + Collection = Learned to