当前位置:网站首页>Fabric. JS free draw circle
Fabric. JS free draw circle
2022-07-02 14:27:00 【Director of Moral Education Department】
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 :
- When clicking on the canvas
canvas.on('mouse:down', fn)
, Create a circle . - When the mouse moves
canvas.on('mouse:move', fn)
, The size of the circle is scaled according to the position of the mouse . - 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
<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
边栏推荐
- C crystal report printing
- 默认插槽,具名插槽,作用域插槽
- HMS core machine learning service helps zaful users to shop conveniently
- STM32-DAC实验&高频DAC输出测试
- PyQt5_ Qscrollarea content is saved as a picture
- Method of creating linked server for cross server data access
- 故事點 vs. 人天
- 自定义事件,全局事件总线,消息订阅与发布,$nextTick
- Daily learning 2
- Default slot, named slot, scope slot
猜你喜欢
Selenium installing selenium in pycharm
[development environment] Dell computer system reinstallation (download Dell OS recovery tool | use Dell OS recovery tool to make USB flash disk system | install system)
腾讯云 TStor 统一存储通过信通院首批文件存储基础能力评测
PyQt5_QScrollArea内容保存成图片
千元投影小明Q1 Pro和极米NEW Play谁更好?和哈趣K1比哪款配置更高?
MQ教程 | Exchange(交换机)
c# 水晶报表打印
TeamTalk源码分析之win-client
How kaggle uses utility script
The use of TestNG, the testing framework (II): the use of TestNG XML
随机推荐
Borui data integrated intelligent observable platform was selected into the "Yunyuan production catalogue" of China Academy of communications in 2022
2022家用投影仪首选!当贝F5强悍音画效果带来极致视听体验
Whole house Wi Fi: a pain point that no one can solve?
Everyone believes that the one-stop credit platform makes the credit scenario "useful"
给Android程序员的一些面试建议「建议收藏」
SystemServer进程
途家木鸟美团夏日折扣对垒,门槛低就一定香吗?
The global special paper revenue in 2021 was about $27 million, and it is expected to reach $35 million in 2028. From 2022 to 2028, the CAGR was 3.8%
Launcher启动过程
每日学习3
Word frequency statistics & sorting
Tip: SQL Server blocked the state 'openrowset/opendatasource' of component 'ad hoc distributed queries'
QT - make a simple calculator - realize four operations
瀏覽器驅動的下載
Browser driven Download
Use of UIC in QT
Multi rotor aircraft control using PID and LQR controllers
kaggle如何使用utility script
[to be continued] [UE4 notes] l5ue4 model import
Qt新建项目