锐客网

  1. 首页 > it技术 > >

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

本文简介 使用 Fabric.js 创建画布时，可以在参数里配置画布的宽高。
除了初始化时设置之外，Fabric.js 还提供了其他 api 供后期修改画布宽高。
本文列举了 Fabric.js 的3个 api 设置画布宽高。
这3个 api 虽然简单，但在实际开发中可能很重要。比如监听浏览器窗口缩放，动态调整画布的宽高。
Fabric.js|Fabric.js 3个api设置画布宽高
文章图片

如果想入门 Fabric.js 可以看 《Fabric.js从入门到膨胀》




环境说明

【Fabric.js|Fabric.js 3个api设置画布宽高】Chrome浏览器版本：96.0.4664.45
Fabric.js版本：4.6.0
我是在原生环境下开发的，同时也提供了一份 Vue3 环境下开发的代码（文末有链接）。




实际操作 本例使用了3个 api ：
  • canvas.setWidth：设置画布宽度
  • canvas.setHeight：设置画布高度
  • Canvas.setDimensions：设置画布大小
.btn-x { margin-bottom: 10px; } #canvasBox { border: 1px solid #ccc; }





仓库及推荐阅读 仓库
  • 原生方式实现 设置画布宽高
  • 在Vue3中使用Fabric实现 设置画布宽高


推荐阅读
  • 《Fabric.js 从入门到精通》
  • 《Fabric.js实现渐变(Gradient)效果，包括径向渐变radial》
  • 《Fabric.js 自定义右键菜单》
  • 《Fabric.js 更换图片的3种方法（包括更换分组内的图片，以及存在缓存的情况）》
    本文由博客一文多发平台 OpenWrite 发布！

    推荐阅读


    上一篇：通过ve模板实现一键在线视频制作

    下一篇：Web3.0时代 | 数字人如何突破规模落地三大难点（ 百度李士岩（两年内每个人有望实现“数字人自由”））