龙空技术网

Fabric.js 3个api设置画布宽高

德育处主任pro 140

前言:

眼前朋友们对“js获取图片的宽高”都比较看重,小伙伴们都需要分析一些“js获取图片的宽高”的相关资讯。那么小编在网上搜集了一些对于“js获取图片的宽高””的相关知识,希望你们能喜欢,兄弟们一起来学习一下吧!

本文简介

使用 Fabric.js 创建画布时,可以在参数里配置画布的宽高。

除了初始化时设置之外,Fabric.js 还提供了其他 api 供后期修改画布宽高。

本文列举了 Fabric.js 的3个 api 设置画布宽高。

这3个 api 虽然简单,但在实际开发中可能很重要。比如监听浏览器窗口缩放,动态调整画布的宽高。

如果想入门 Fabric.js 可以看 Fabric.js 中文入门教程

环境说明

Chrome浏览器版本:96.0.4664.45

Fabric.js版本:4.6.0

我是在原生环境下开发的,同时也提供了一份 Vue3 环境下开发的代码(文末有链接)。

实际操作

本例使用了3个 api :

canvas.setWidth:设置画布宽度canvas.setHeight:设置画布高度Canvas.setDimensions:设置画布大小

<style>  .btn-x {    margin-bottom: 10px;  }  #canvasBox {    border: 1px solid #ccc;  }</style><div class="btn-x">  <button onclick="setWidth(200)">宽度200px</button>  <button onclick="setHeight(300)">高度300px</button>  <button onclick="setDimensions(600, 400)">一键设置宽高:宽度600px,高度400px</button></div><canvas id="canvasBox" width="600" height="600"></canvas><script src=";></script><script>  let canvas = null  // 设置画布宽度  function setWidth(width) {    canvas.setWidth(width)  }  // 设置画布高度  function setHeight(height) {    canvas.setHeight(height)  }  // 一键设置宽高  function setDimensions(width, height) {    canvas.setDimensions({      width,      height    })  }  window.onload = function() {    // 使用 元素id 创建画布,此时可以在画布上框选    canvas = new fabric.Canvas('canvasBox', {      width: 100,      height: 100    })  }</script>

关注我,了解更多Fabric.js的玩法~ 专栏代码仓库:

标签: #js获取图片的宽高