5. Fabric 设置画布大小

1. 设置宽度

javascript 复制代码
canvas.setWidth(width)

2. 设置高度

javascript 复制代码
canvas.setHeight(height)

3. 设置大小

javascript 复制代码
canvas.setDimensions({
  width,
  height
})

4. 画布的缩放

javascript 复制代码
canvas.on('mouse:wheel', (opt) => {
    const delta = opt.e.deltaY // 滚轮,向上滚一下是 -100,向下滚一下是 100
    let zoom = canvas.getZoom() // 获取画布当前缩放值
    zoom *= 0.999 ** delta
    if (zoom > 20) zoom = 20 // 限制最大缩放级别
    if (zoom < 0.01) zoom = 0.01 // 限制最小缩放级别
    // 以鼠标所在位置为原点缩放
    canvas.zoomToPoint(
      {
        // 关键点
        x: opt.e.offsetX,
        y: opt.e.offsetY
      },
      zoom // 传入修改后的缩放级别
    )
  })
相关推荐
Lanwarf-前端开发9 天前
3. Fabric 基本使用
前端·javascript·fabric
GDAL15 天前
Fabric.js全面介绍:强大的交互式图形编辑框架
运维·javascript·fabric
GDAL16 天前
Fabric.js中fabric.Text的深入解析
fabric
GDAL16 天前
Fabric.js中fabric.Image的深入解析
fabric
GDAL16 天前
Fabric.js Canvas:核心配置与选项解析
运维·javascript·fabric
段子君23 天前
前端通过draggable结合fabricjs实现拖拽至画布生成元素自定义编排功能
前端·fabric
爱技术的小伙子1 个月前
【Hyperledger Fabric】Hyperledger Fabric的基本概念与应用
运维·fabric
冲上云霄的Jayden1 个月前
fabric 2.5 使用jar安装Java合约(解决Fabric安装Java链码速度慢的问题)
java·jar·智能合约·fabric·java链码·java合约·maven慢
Sun_Sherry1 个月前
Fabric:关于链码的编写及部署的问题记录
fabric