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 // 传入修改后的缩放级别
    )
  })
相关推荐
Kim Jackson2 天前
我的世界Java版1.21.4的Fabric模组开发教程(二十二)创建生物(上)实体外观与动画设计
java·开发语言·fabric
宝桥南山2 天前
Microsoft Fabric - 试一下在Blazor应用中使用 GraphQL API去连接Lakehouse
microsoft·c#·asp.net·.netcore·fabric·db
Kim Jackson6 天前
我的世界Java版1.21.4的Fabric模组开发教程(二十三)创建生物(下)实体在游戏中的实现(1)
java·游戏·fabric
China_Yanhy6 天前
运维日记 - 猛男的AI拓荒录:Fabric (GitHub: danielmiessler/fabric) —— 让 AI 回归 Unix 哲学的终端神器
运维·人工智能·fabric
寒寒_1 个月前
使用Vue与Fabric.js创建图片标注工具
javascript·vue.js·fabric
CC码码2 个月前
基于WebGPU实现canvas高级滤镜
前端·javascript·webgl·fabric
编程之路从0到12 个月前
React Native之Android端Fabric 架构源码分析
android·react native·源码分析·fabric
夏沫mds2 个月前
基于hyperledger fabric的葡萄酒溯源系统
运维·fabric
CC码码2 个月前
迈向开源第一步,给fabric.js提PR
前端·javascript·开源·web·fabric
testpassportcn2 个月前
微軟 DP-600 認證介紹|Microsoft Fabric Analytics Engineer Associate 完整解析與考試攻略
运维·fabric