Fabric. JS basic brush

Brief introduction

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

<br>

Fabric.js Turn on the painting mode , You can set the style of the brush .

There are several kinds of brushes , This paper mainly introduces Fabric Basic brush usage .

Before written 《Fabric.js How to use an eraser 》 Drawing mode is also used , Those who are interested can go and have a look .

<br>

This article USES the Fabric.js 5.2.1

<br>

<br>

Common configuration

First of all, start the painting mode of canvas , Because the normal box selection mode does not support painting .

<br>

start

<canvas id="c" width="600" height="400" style="border: 1px solid #ccc;"></canvas><!--  introduce  Fabric.js --><script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/521/fabric.js"></script><script>  const canvas = new fabric.Canvas('c', {    isDrawingMode: true //  Turn on painting mode   })</script>

take isDrawingMode Set to true Can be opened , This is an important step , Only settings isDrawingMode by true , The following operations in this article are meaningful .

If you do not want to set... During initialization isDrawingMode , It can also be used later canvas.isDrawingMode = true How to set .

<br>

Be careful ： All the following operations are based on “ start ” Code for ！！！

<br>

Set the brush width

//  Omit  “ start ”  Code canvas.freeDrawingBrush.width = 20 //  The width of the brush 

It can be modified by width Adjust the brush thickness .

<br>

Set brush color

//  Omit  “ start ”  Code canvas.freeDrawingBrush.width = 20 //  The width of the brush canvas.freeDrawingBrush.color = 'pink' //  Brush color 

I set the width of the brush to 20, It's easier to show the effect .

<br>

Dotted line

//  Omit  “ start ”  Code canvas.freeDrawingBrush.width = 20 //  The width of the brush canvas.freeDrawingBrush.strokeDashArray = [20, 50] //  Stroke dash array 

Use strokeDashArray Dotted lines can be set , It can also be passed on 2 More than parameters , Try the effect yourself and you'll see .

<br>

Projection

//  Omit  “ start ”  Code canvas.freeDrawingBrush.width = 20 //  The width of the brush //  Brush projection canvas.freeDrawingBrush.shadow = new fabric.Shadow({  blur: 10, //  The degree of eclosion   offsetX: 10, // x Shaft offset   offsetY: 10, // y Shaft offset   color: '#30e3ca' //  Projection color })

<br>

Freehand painting is limited to canvas size

//  Omit  “ start ”  Code canvas.freeDrawingBrush.width = 20 //  The width of the brush canvas.freeDrawingBrush.limitedToCanvasSize = true //  When “ true” when , Freehand painting is limited to canvas size .

<br>

Brush style at the end of the line

canvas.freeDrawingBrush.strokeLineCap = 'round'

except round outside , also butt or square Optional . The default is round.

<br>

The corner style of the brush

canvas.freeDrawingBrush.strokeLineJoin = 'miter'

except miter Outside , You can also choose bevel or round.

<br>

Set the maximum miter length of the brush

canvas.freeDrawingBrush.strokeLineJoin = 'miter' //  The corner style of the brush canvas.freeDrawingBrush.strokeMiterLimit = 10 //  Maximum miter length 

strokeMiterLimit Property is set for strokeLineJoin by miter The situation of .

<br>

<br>

long-winded

Brush in Fabric.js Is a very basic tool , Also very common .

Common scenarios ：

1. On-line PS Drawing board
2. Online correction operation

<br>

Like wechat screenshots , There is also a brush function . Of course , The brush for wechat screenshots is not necessarily Fabric.js To achieve , But we learned Fabric.js It can also be said that it has the ability to realize similar functions ~

<br>

Fabric.js Other brushes are also available , But if you already know how to use basic brushes , It will be easier to learn other brushes .

<br>

<br>

Code warehouse

Native version of the code

<br>

<br>

Recommended reading

• 《Fabric.js Draw ellipses freely 》
• 《Fabric.js How to use an eraser （ Including recovery function ）》
• 《Fabric.js Customize the right-click menu 》
• 《Fabric.js From entry to expansion 》

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