当前位置：网站首页>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 .

file

If you want to get started Fabric.js You can see 《Fabric.js From entry to expansion 》

<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>

Actual operation

This example uses the 3 individual api ：

canvas.setWidth： Set the canvas width
canvas.setHeight： Set the canvas height
Canvas.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>