Straighten elements (with transition animation)

Brief introduction

This time we're going to talk about 4 individual “ straighten ” Element method , This is the scene I met at work .

I don't know straighten Use “ straighten ” This word is not translated correctly , That's what I'm going to call it anyway ！

straighten： According to the distance , Rotate the element from the current angle to 0、90、180、270 Equal angle .

<br>

【 The definition of Baidu Encyclopedia 】

straighten, English words , transitive verb 、 intransitive verb , As a transitive verb, it means “ rectify ; send … correct ; send … Straight ; send … to become better ”, As an intransitive verb, it means “ Straighten up ; to become better ”.

<br>

English class representative's reminder ~

<br>

The effect is shown below

<br>

<br>

Version Description

Fabric.js edition ：4.6.0

<br>

<br>

relevant API

Fabric.js There are several API complete Straightening operation ：

• canvas.straightenObject(object)
• object.straighten()
• canvas.fxStraightenObject(object)
• object.fxStraighten()

<br>

It should be noted that , Use object.straighten and object.fxStraighten After straightening the elements , The picture will not be updated automatically （ But in fact, it has been put right ）, Need to cooperate with canvas.renderAll() Wait to refresh the canvas API Use it together .

There seems to be no special explanation on this official document .

<br>

above 4 individual API in , belt fx Is a transition animation effect .

<br>

<br>

Sample code

In the next code , Used Element object I defined it in public variables .

If you need to get the specified element dynamically , You can use canvas.getObjects() 、getActiveObject() Other methods , It depends on your business scenario .

These methods are not the focus of this article , So now let's return to the original purpose .

<br>

Method 1：canvas.straightenObject

canvas.straightenObject This method allows us to pass in 1 Parameters . This parameter is the element object you need to straighten (fabric.Object).

<br>

I use one. triangle For example . The logic is written in the code comments .

<button onclick="straightenObject()"> Straighten the elements </button><canvas id="canvasBox" width="600" height="600"></canvas><!--  introduce fabric.js --><script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/460/fabric.min.js"></script><script>let canvas = null //  Canvas object let triangle = null //  Triangle object window.onload = function() {  //  Initialize canvas   canvas = new fabric.Canvas('canvasBox', {    width: 400,    height: 400  })  //  triangle   triangle = new fabric.Triangle({    top: 100,    left: 100,    width: 80, //  Bottom edge length     height: 100, //  Distance from bottom edge to diagonal     fill: 'blue',    angle: 30 //  It's spinning 30 degree   })    //  Add rectangle to canvas   canvas.add(triangle)}//  straighten function straightenObject() {  //  Pass in the triangle object   canvas.straightenObject(triangle)}</script>

<br>

Method 2：object.straighten

Use object.straighten Can also achieve canvas.straightenObject The effect of .

but object.straighten Does not automatically refresh the canvas , Need to use canvas.renderAll() And other methods .

<!--  Omitted code  --><script>//  straighten function straightenObject() {  //  Triangle object calls  straighten  Method , So as to straighten itself   triangle.straighten()  //  Straighten out , The canvas needs to be refreshed   canvas.renderAll()}</script>

<br>

Method 3：canvas.fxStraightenObject

The first two methods have no transition effect .

Next, try the transition effect API：canvas.fxStraightenObject .

and canvas.straightenObject equally ,canvas.fxStraightenObject You also need to pass in a Object parameters (fabric.Object) .

<button onclick="fxStraightenObject()"> Straighten the elements （ Transition animations ）</button><canvas id="canvasBox" width="600" height="600"></canvas><!--  introduce fabric.js --><script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/460/fabric.min.js"></script><script>let canvas = null //  Canvas object let triangle = null //  Triangle object window.onload = function() {  //  Initialize canvas   canvas = new fabric.Canvas('canvasBox', {    width: 400,    height: 400  })  //  triangle   triangle = new fabric.Triangle({    top: 100,    left: 100,    width: 80, //  Bottom edge length     height: 100, //  Distance from bottom edge to diagonal     fill: 'blue',    angle: 30 //  It's spinning 30 degree   })    //  Add rectangle to canvas   canvas.add(triangle)}//  straighten function fxStraightenObject() {  //  Pass in the triangle object   canvas.fxStraightenObject(triangle)}</script>

canvas.fxStraightenObject There is no need to use additional methods to refresh the canvas .

<br>

Method 4：object.fxStraighten

Use object.fxStraighten It can also realize the straightening function with transition animation .

but object.fxStraighten A little special , It can also be introduced into 1 Parameters , This parameter is an object , There are 2 Function fields .

• onComplete ： Callback function after animation
• onChange ： Callback function during animation execution

Use as follows

<!--  Omitted code  --><script>//  straighten function fxStraightenObject() {  //  Pass in the triangle object     triangle.fxStraighten({    onChange() {      canvas.renderAll()    },    onComplete() {      canvas.renderAll()    }  })}</script>

<br>

My thoughts

1. If the number of elements to be straightened is small , have access to canvas.straightenObject or canvas.fxStraightenObject.
2. If there are many elements , Use object.straighten Put all the elements in place , Then do it again canvas.renderAll() , Refresh once .
3. If there are many elements , Use object.fxStraighten when , If you don't need to do anything in the callback function , have access to requestAnimationFrame The method of collective refresh .

<br>

The above first 3 Point code

<button onclick="fxStraightenObject()"> Straighten the elements （ Transition animations ）</button><canvas id="canvasBox" width="600" height="600"></canvas>  <script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/460/fabric.js"></script><script>let canvas = null //  Canvas object let triangle = null //  Triangle object let rect = null //  Rectangular objects window.onload = function() {  //  Use   Elements id  Create a canvas , At this point, you can box select... On the canvas   canvas = new fabric.Canvas('canvasBox', {    width: 400,    height: 400  })  //  triangle   triangle = new fabric.Triangle({    top: 100,    left: 100,    width: 80, //  Bottom edge length     height: 100, //  Distance from bottom edge to diagonal     fill: 'blue',    angle: 30  })  //  rectangular   rect = new fabric.Rect({    top: 70,    left: 200,    width: 100, //  wide     height: 30, //  high     fill: 'orange',    angle: -40  })    //  Add rectangle to canvas   canvas.add(triangle, rect)  renderAll()}//  Constantly refresh the canvas function renderAll() {  canvas.renderAll()  requestAnimationFrame(renderAll)}//  straighten （ With transition animation ）function fxStraightenObject() {  triangle.fxStraighten() //  Equilateral triangle   rect.fxStraighten() //  Straighten the rectangle }</script>

This way of writing is just to provide a way of thinking , Real development needs to be flexibly adjusted according to your business .

<br>

<br>

Code warehouse

• Native way to achieve Straighten the elements （ With transition animation ）
• stay Vue3 Use in Fabric Realization Straighten the elements （ With transition animation ）

<br>

<br>

Recommended reading

• 《Fabric.js From entry to expansion 》
• 《Fabric.js 3 individual api Set canvas width and height 》
• 《Fabric.js Customize the right-click menu 》

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