当前位置:网站首页>Fabric. JS 3 APIs to set canvas width and height
Fabric. JS 3 APIs to set canvas width and height
2022-07-02 05:17:00 【Director of Moral Education Department】
Brief introduction
Use Fabric.js
When creating canvas , You can configure the width and height of the canvas in the parameters .
In addition to the settings during initialization ,Fabric.js
There are other api
For later modification of canvas width and height .
This article lists Fabric.js
Of 3 individual api
Set canvas width and height .
this 3 individual api
Simple though , But it may be important in practical development . For example, monitor browser window zoom , Dynamically adjust the width and height of the canvas .
If you want to get started Fabric.js
You can see 《Fabric.js From entry to expansion 》
<br>
<br>
Environmental statement
Chrome Browser version :96.0.4664.45
Fabric.js edition :4.6.0
I developed it in a native environment , It also provides a copy of Vue3
Code developed in the environment ( There is a link at the end of the article ).
<br>
<br>
Actual operation
This example uses the 3 individual api
:
canvas.setWidth
: Set the canvas widthcanvas.setHeight
: Set the canvas heightCanvas.setDimensions
: Set canvas size
<style> .btn-x { margin-bottom: 10px; } #canvasBox { border: 1px solid #ccc; }</style><div class="btn-x"> <button onclick="setWidth(200)"> Width 200px</button> <button onclick="setHeight(300)"> Height 300px</button> <button onclick="setDimensions(600, 400)"> One key setting width and height : Width 600px, Height 400px</button></div><canvas id="canvasBox" width="600" height="600"></canvas><script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/460/fabric.min.js"></script><script> let canvas = null // Set the canvas width function setWidth(width) { canvas.setWidth(width) } // Set the canvas height function setHeight(height) { canvas.setHeight(height) } // One key setting width and height function setDimensions(width, height) { canvas.setDimensions({ width, height }) } 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: 100, height: 100 }) }</script>
<br>
<br>
Warehouse and recommended reading
Warehouse
<br>
Recommended reading
《Fabric.js Achieve gradient (Gradient) effect , Including radial gradient radial》
《Fabric.js Change the picture 3 Methods ( Including changing pictures in the Group , And the existence of cache )》 give the thumbs-up + Focus on + Collection = Learned to
边栏推荐
- Feign realizes file uploading and downloading
- Gee series: unit 8 time series analysis in Google Earth engine [time series]
- 6.30 year end summary, end of student age
- js中的Map(含leetcode例题)
- Basic differences between Oracle and MySQL (entry level)
- 7.1模擬賽總結
- php/js cookie共享跨域的问题
- C # picture display occupancy problem
- 黑馬筆記---Set系列集合
- Differential identities (help find mean, variance, and other moments)
猜你喜欢
Dark horse notes -- Set Series Collection
Fabric.js 激活输入框
【pyinstaller】_get_sysconfigdata_name() missing 1 required positional argument: ‘check_exists‘
el-cascader回显只选中不显示的问题
6.网络-基础
[high speed bus] Introduction to jesd204b
运维工作的“本手、妙手、俗手”
Pycharm breakpoint management: temporarily cancel some breakpoints + run directly to a line
Pyechart1.19 national air quality exhibition
Nodejs (03) -- custom module
随机推荐
Exercise notes 13 (effective letter ectopic words)
Using Kube bench and Kube hunter to evaluate the risk of kubernetes cluster
Mysql重点难题(2)汇总
el-cascader回显只选中不显示的问题
将光盘中的cda保存到电脑中
Draw a wave chart_ Digital IC
Leetcode basic programming: array
Paddlepaddle project source code
运维工作的“本手、妙手、俗手”
Gee data set: export the distribution and installed capacity of hydropower stations in the country to CSV table
C case of communication between server and client based on mqttnet
Domestic all Chinese automatic test software apifox
Global and Chinese market of pressure gauges 2022-2028: Research Report on technology, participants, trends, market size and share
Record my pytorch installation process and errors
Latest: the list of universities and disciplines for the second round of "double first-class" construction was announced
[bus interface] Axi interface
[high speed bus] Introduction to jesd204b
Johnson–Lindenstrauss Lemma(2)
php/js cookie共享跨域的问题
Video multiple effects production, fade in effect and border background are added at the same time