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 // 传入修改后的缩放级别
    )
  })
相关推荐
CC码码3 天前
迈向开源第一步,给fabric.js提PR
前端·javascript·开源·web·fabric
testpassportcn6 天前
微軟 DP-600 認證介紹|Microsoft Fabric Analytics Engineer Associate 完整解析與考試攻略
运维·fabric
peihexian8 天前
ingress-nginx更换为f5 nginx gateway fabric
nginx·gateway·fabric
一个处女座的程序猿9 天前
LLMs之Prompt:Fabric的简介、安装和使用方法、案例应用之详细攻略
llm·prompt·fabric
添加shujuqudong1如果未回复20 天前
基于S-S或LCC-S结构的WPT无线电能传输电路模型,采用输出电压闭环PI控制。 另附带电路...
fabric
友莘居士20 天前
Hyperledger Fabric与 FISCO BCOS深度对比
区块链·fabric·fisco
kaozhengpro21 天前
Microsoft DP-700 考試戰報|Fabric 資料工程師一次通過心得
运维·microsoft·fabric
TFATS21 天前
Nvidia H100 算力服务器 Cuda Fabric Manager 升级
服务器·postgresql·fabric
563471794123 天前
分布式驱动电动汽车路面附着系数估计:无迹卡尔曼与容积卡尔曼滤波大比拼
fabric
二狗哈24 天前
Cesium快速入门22:fabric自定义着色器
运维·开发语言·前端·webgl·fabric·cesium·着色器