当前位置：网站首页>Fabric. JS round brush

Fabric. JS round brush

2022-07-02 05:18:00 【Director of Moral Education Department】

Brief introduction

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

In this paper, Fabric.js Circular brush function of .

The circular brush is used to “ Freehand drawing ” On the brush of . You can tell by the name , This brush will fill the painted path with circles .

It will be more intuitive to look at the pictures

file

Fabric.js Will use different frequencies 、 size 、 Color depth to draw the above effect .

This article USES the Fabric.js 5.2.1

Common configuration

To make the effect of the above figure , First, you need to set the canvas to Painting mode .

Initialize canvas

First, you need to initialize the canvas , After that, each attribute and method will be explained , Will be based on this code .

<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>  //  How to write it 1  const canvas = new fabric.Canvas('c', {    isDrawingMode: true //  Turn on painting mode   })    //  How to write it 2  // const canvas = new fabric.Canvas('c')  // canvas.isDrawingMode = true</script>

To set the canvas to Painting mode , Need to put isDrawingMode Set to true .

Choose one of the above two ways to write .

Turn on the round brush

Setting the brush to round also has 2 Species writing .

How to write it 1

//  Omit the initialization code canvas.freeDrawingBrush = new fabric.CircleBrush(canvas)

How to write it 2

//  Omit the initialization code let circleBrush = new fabric.CircleBrush()circleBrush.initialize(canvas)canvas.freeDrawingBrush = circleBrush

file

Either of the above two ways can be used , But it will affect the amount of subsequent code .

If you want to modify the brush properties frequently in the future , I suggest using How to write it 2 .

Set the brush width

If you use the above step How to write it 1 , To set the brush width, you need to write this

//  Omit the initialization code canvas.freeDrawingBrush = new fabric.CircleBrush(canvas) //  Create a circular brush canvas.freeDrawingBrush.width = 6 //  brush width , Default 10

file

If you use How to write it 2 , The set code is as follows

//  Omit the initialization code //  Create a circular brush let circleBrush = new fabric.CircleBrush()circleBrush.initialize(canvas)canvas.freeDrawingBrush = circleBrushcircleBrush.width = 30

file

Set brush color

file

//  Omit the initialization code circleBrush.color = 'pink'

I set the brush to pink , Except for keyword color , And support rgb Etc

circleBrush.color = '#c123a8'circleBrush.color = 'rgb(10, 230, 120)'

Set shadow

file

//  Omit the initialization code circleBrush.shadow = new fabric.Shadow({  blur: 10, //  The degree of eclosion   offsetX: 20, // x Shaft offset   offsetY: 20, // y Shaft offset   color: '#30e3ca' //  Projection color })

and Basic brush The method of setting shadows is the same .

Common methods

There are several common methods , But there are some things that need attention , To be effective, use it in combination .

The mouse click

//  Omit the initialization code circleBrush.onMouseDown = function (pointer, e) {  console.log(pointer)  console.log(e)}

Use onMouseDown You can set the event to be triggered when the mouse is pressed . The event has 2 Parameters .

Release the mouse

//  Omit the initialization code circleBrush.onMouseUp = function (pointer) {  console.log(pointer)}

and “ The mouse click ” It's as simple as . Use onMouseUp You can set the event of mouse release .

When the mouse moves

//  Omit the initialization code circleBrush.onMouseMove = function (pointer, e) {  console.log(pointer)  console.log(e)  circleBrush.drawDot(pointer)}

Use onMouseMove You can set the event when the mouse moves . However, in this event, it is necessary to perform drawDot event , And pass in the current mouse position to draw correctly .

More methods can be added to mouse movement events , For example, on the basis of drawing , Draw another line nearby

//  Omit the initialization code circleBrush.onMouseMove = function (pointer, e) {  console.log(pointer)  console.log(e)  circleBrush.drawDot(pointer)  circleBrush.addPoint({x: pointer.x + 50, y: pointer.y + 50}) //  There is one more line nearby }

file