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 // 传入修改后的缩放级别
    )
  })
相关推荐
开开心心就好9 天前
体积小巧的图片重复查找工具推荐
linux·运维·服务器·智能手机·自动化·excel·fabric
无忧智库10 天前
从数据孤岛到全球实时协同:某跨国企业 Data Fabric 供应链数据编织平台全解析(WORD)
运维·fabric
搬砖魁首18 天前
Fabric系列 - HSM之3 区块链上的结合
区块链·php·fabric·长安链·hsm
weixin_4138385619 天前
基于区块链的校园二手书交易系统
vue.js·spring·区块链·fabric
IAUTOMOBILE1 个月前
Ubuntu 22.04 下 NVIDIA H100 服务器完整部署攻略:驱动、Fabric Manager 与 Container Toolkit 配置
服务器·ubuntu·fabric
搬砖魁首1 个月前
Fabric系列 - HSM之2 容器化
docker·fabric·hsm·bccsp·pkcs11
搬砖魁首1 个月前
Fabric系列 - HSM之1 介绍
fabric·国密·ca·hsm·pkcs·硬件加密·bccsp
Kim Jackson2 个月前
我的世界Java版1.21.4的Fabric模组开发教程(二十二)创建生物(上)实体外观与动画设计
java·开发语言·fabric
宝桥南山2 个月前
Microsoft Fabric - 试一下在Blazor应用中使用 GraphQL API去连接Lakehouse
microsoft·c#·asp.net·.netcore·fabric·db
Kim Jackson2 个月前
我的世界Java版1.21.4的Fabric模组开发教程(二十三)创建生物(下)实体在游戏中的实现(1)
java·游戏·fabric