当前位置：网站首页>Fabric. JS free drawing ellipse

Fabric. JS free drawing ellipse

2022-07-02 14:26:00 【Director of Moral Education Department】

Brief introduction

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

This article is explained in Fabric.js How to draw ellipses freely in , If you don't already know Fabric.js, You can refer to 《Fabric.js From entry to mastery 》.

The effect is shown below

file

Ideas

Fabric.js After initializing the canvas , You can perform box selection , But the default is to use a rectangle to frame , As shown in the figure below ：

file

I hope that when I use the mouse to create an ellipse, I can see the shadow of another ellipse , This makes it easier for me to observe what the ellipse to be drawn looks like .

So we can select the box first Frame and Background color Set to transparent , Then monitor the mouse click when the box is selected 、 Move 、 Loose event , So as to draw an ellipse .

The detailed steps are as follows ：

When the box is selected Make the border and background transparent
mouse Clicking time Create ellipse
mouse When moving Modify the ellipse size
mouse When loosening Generate a formal ellipse

I split the whole drawing event into the above 4 Step , But in fact 3 Step is still a little difficult , We need to consider several situations ：

The coordinates when clicking are at the bottom left when moving
The coordinate when clicking is at the top left when moving
The coordinate when clicking is at the top right when moving
The coordinates when clicking are at the bottom right when moving

this 4 In this case, I'm 《Fabric.js Draw a rectangle freely 》 It has been analyzed one by one , You can check it out （ Remember to like ~）

code

After sorting out the ideas , We can formalize the coding phase .

I will still follow 1、2、3、4 Steps to code , You open this article in two browser windows , One side is coding , One side is thinking , It may be clearer by comparison .

<canvas id="canvas" width="800" height="800"></canvas><script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/521/fabric.js"></script><script>  let canvas = null  let currentType = 'default'  let downPoint = null  let upPoint = null  let currentEllipse = null //  Temporary ellipse   //  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        canvas.selectionColor = 'rgba(100, 100, 255, 0.3)'        canvas.selectionBorderColor = 'rgba(255, 255, 255, 0.3)'        canvas.skipTargetFind = false //  Allow selection         break      case 'ellipse':        //  Elliptical mode         //  When the box is selected , Make the border and background transparent         canvas.selectionColor = 'transparent'        canvas.selectionBorderColor = 'transparent'        canvas.skipTargetFind = true //  Do not select         break    }  }  //  Press the mouse on the canvas   function canvasMouseDown(e) {    downPoint = e.absolutePointer    if (currentType === 'ellipse') {      currentEllipse = new fabric.Ellipse({        top: downPoint.y,        left: downPoint.x,        rx: 0,        ry: 0,        fill: 'transparent',        stroke: 'rgba(0, 0, 0, 0.2)'      })      canvas.add(currentEllipse)    }  }  //  Move the mouse over the canvas   function canvasMouseMove(e) {    if (currentType === 'ellipse' && currentEllipse) {      const currentPoint = e.absolutePointer      let rx = Math.abs(downPoint.x - currentPoint.x) / 2      let ry = Math.abs(downPoint.y - currentPoint.y) / 2      let top = currentPoint.y > downPoint.y ? downPoint.y : downPoint.y - ry * 2      let left = currentPoint.x > downPoint.x ? downPoint.x :  downPoint.x - rx * 2      //  Set the size and location of the ellipse       currentEllipse.set('rx', rx)      currentEllipse.set('ry', ry)      currentEllipse.set('top', top)      currentEllipse.set('left', left)      //  Refresh the canvas       canvas.requestRenderAll()    }  }  //  Release the mouse on the canvas   function canvasMouseUp(e) {    upPoint = e.absolutePointer    if (currentType === 'ellipse') {      //  You need to judge whether the coordinate points of the mouse are equal when clicking and releasing , If equal, no ellipse will be created       if (JSON.stringify(downPoint) === JSON.stringify(upPoint)) {        canvas.remove(currentEllipse)      } else {        //  Set ellipse style         currentEllipse.set('stroke', '#000')      }      //  Clear the temporarily created ellipse       currentEllipse = null    }  }  window.onload = function() {    initCanvas()  }</script>

As you can see from the code above , The main core part is “ On mouse click , When the mouse moves , Release the mouse ” These links . When the mouse moves , To monitor the current coordinates of the mouse in real time , Release the mouse and stop listening .

file