Fabric. How to use js brush?

Brief introduction

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

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 .

This article USES the  

Fabric.js 5.2.1

Common configuration

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

start

<canvas id=&quot;c&quot; width=&quot;600&quot; height=&quot;400&quot; style=&quot;border: 1px solid #ccc;&quot;></canvas>

<!--  introduce  Fabric.js -->
<script src=&quot;https://cdn.bootcdn.net/ajax/libs/fabric.js/521/fabric.js&quot;></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 .

Be careful ： All the following operations are based on  

“ start ”

  Code for ！！！

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 .

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 .

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 .

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
})


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 .


Brush style at the end of the line

canvas.freeDrawingBrush.strokeLineCap = 'round'


except  

round

  outside , also  

butt

  or  

square

  Optional . The default is  

round

.

The corner style of the brush

canvas.freeDrawingBrush.strokeLineJoin = 'miter'


except  

miter

  Outside , You can also choose  

bevel

  or  

round

.

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 .

long-winded

Brush in  

Fabric.js

  Is a very basic tool , Also very common .

Common scenarios ：

• On-line PS Drawing board

• Online correction operation

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 ~

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 .

Code warehouse

 

Native version of the code