Fabric. JS free draw circle

Brief introduction

This time we're going to talk about Draw circles freely .

stay 《Fabric.js Draw a rectangle freely 》 The ideas mentioned in , It's not very suitable to put it in a circle .

The effect to be achieved this time is shown in the figure below .

<br>

<br>

Ideas

Fabric.js The default box selection operation is rectangle , If you need to achieve the effect shown in the figure above , We need to do the following 3 Step ：

1. When clicking on the canvas canvas.on('mouse:down', fn), Create a circle .
2. When the mouse moves canvas.on('mouse:move', fn), The size of the circle is scaled according to the position of the mouse .
3. When you release the mouse canvas.on('mouse:up', fn), Determine the size of the circle .

<br>

In terms of interaction , I follow PhotoShop Operation logic of Ellipse Tool .

The diameter of a circle is the short side of a rectangle .

<br>

If “ Move the coordinate point of the mouse ” stay Coordinate point when clicking Left or above , You need to move the upper left corner of the circle to “ Move the coordinate point of the mouse ” .

<br>

<br>

Do it

I post it here for The original way Implementation code and comments .

If you want to know Vue3 How to achieve Fabric.js Draw a rectangle freely , Can be in Code warehouse Search in .

<!--  The toolbar  --><div class="toolbar">  <select onchange="typeChange(this.options[this.options.selectedIndex].value)">    <option value="default"> Default （ Frame selection ）</option>    <option value="circle"> circular </option>  </select></div><!--  canvas  --><canvas id="canvas" width="800" height="800"></canvas><!--  introduce fabric.js --><script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/460/fabric.js"></script><script>let canvas = null //  Canvas object let currentType = 'default' //  Current operating mode （ Default  ||  Create a circle ）let downPoint = null //  Coordinates when pressing the mouse let upPoint = null //  Coordinates when releasing the mouse let currentCircle = null //  Temporary circle , Use... When creating circles //  Initialize Sketchpad function initCanvas() {  canvas = new fabric.Canvas('canvas')  canvas.on('mouse:down', canvasMouseDown)   //  Press the mouse on the canvas   canvas.on('mouse:move', canvasMouseMove)   //  Move the mouse over the canvas   canvas.on('mouse:up', canvasMouseUp)       //  Release the mouse on the canvas }//  Canvas operation type switching function typeChange(opt) {  currentType = opt  switch(opt) {    case 'default': //  Default box selection mode       canvas.selection = true //  Allow box selection       canvas.selectionColor = 'rgba(100, 100, 255, 0.3)' //  Check box fill color ： Translucent blue       canvas.selectionBorderColor = 'rgba(255, 255, 255, 0.3)' //  Check box border color ： Translucent gray       canvas.skipTargetFind = false //  Allow selection       break    case 'circle': //  Create a rectangular pattern       canvas.selectionColor = 'transparent' //  Check box fill color ： transparent       canvas.selectionBorderColor = 'transparent' //  Check box border color ： Black with low transparency （ It looks gray ）      canvas.skipTargetFind = true //  Do not select       break  }}//  Press the mouse on the canvas function canvasMouseDown(e) {  downPoint = e.absolutePointer  if (currentType === 'circle') {    //  Use  Fabric.js  Provided api Create a circle , Now the radius of the circle is 0    currentCircle = new fabric.Circle({      top: downPoint.y,      left: downPoint.x,      radius: 0,      fill: 'transparent',      stroke: 'rgba(0, 0, 0, 0.2)'    })    canvas.add(currentCircle)  }}//  Move the mouse over the canvas function canvasMouseMove(e) {  if (currentType === 'circle' && currentCircle) {    const currentPoint = e.absolutePointer    //  radius ： Use the short side to calculate the diameter of the circle , Finally divide by 2, Get the radius of the circle     let radius = Math.min(Math.abs(downPoint.x - currentPoint.x), Math.abs(downPoint.y - currentPoint.y)) / 2    //  Calculate the of a circle top and left coordinates     let top = currentPoint.y > downPoint.y ? downPoint.y : downPoint.y - radius * 2    let left = currentPoint.x > downPoint.x ? downPoint.x :  downPoint.x - radius * 2    //  Set the radius of the circle separately 、top and left    currentCircle.set('radius', radius)    currentCircle.set('top', top)    currentCircle.set('left', left)    canvas.requestRenderAll()  }}//  Release the mouse on the canvas function canvasMouseUp(e) {  upPoint = e.absolutePointer  if (currentType === 'circle') {    //  If the mouse click and release are in the same coordinate , Then you won't create a circle （ In fact, the radius just created is 0 Delete the circle ）    if (JSON.stringify(downPoint) === JSON.stringify(upPoint)) {      canvas.remove(currentCircle)    } else {      if (currentCircle) {        //  Create a circle （ It's actually changing the color of the circular border to  #000        currentCircle.set('stroke', '#000')      }    }    //  After finishing the above operation , Empty the temporary circle .    currentCircle = null  }}//  The life cycle of page loading , Execute here   Initialize canvas   The operation of window.onload = function() {  initCanvas()}</script>

<br>

<br>

Code warehouse

• Native version of the code
• Vue3 Version code

<br>

<br>

Recommended reading

• 《Fabric.js Draw a rectangle freely 》
• 《Fabric.js Customize the right-click menu 》
• 《Fabric.js From entry to expansion 》

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