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 // 传入修改后的缩放级别
    )
  })
相关推荐
飞天阁2 天前
Hyperledger Fabric 2.x 环境搭建
运维·区块链·fabric
野槐6 天前
fabric.js
运维·fabric
微软技术栈10 天前
活动预告 |【Part1】Microsoft Azure 在线技术公开课:使用 Microsoft Fabric 实现数据湖仓
microsoft·azure·fabric
宝桥南山23 天前
Microsoft Fabric - 尝试一下Delta Table
microsoft·微软·database·powerbi·fabric
webmote1 个月前
做一个FabricJS.cc的中文文档网站——面向markdown编程
canvas·fabric·使用手册·中文·fabricjs
weifont1 个月前
fabric操作canvas绘图(1)共32节
vue.js·fabric
冲上云霄的Jayden2 个月前
Hyperledger Fabric有那些核心技术,和其他区块链对比Hyperledger Fabric有那些优势
区块链·智能合约·fabric·数据隐私·共识机制·多通道技术·模块化架构
webmote2 个月前
H5的Canvas绘图——使用fabricjs绘制一个可多选的随机9宫格
前端·动画·fabric·九宫格·fabricjs
Lanwarf-前端开发3 个月前
3. Fabric 基本使用
前端·javascript·fabric