Fabric.js 居中元素 🎗️

·  阅读 658
Fabric.js 居中元素 🎗️

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第12天,点击查看活动详情


本文简介

点赞 + 关注 + 评论 = 学会了


在使用 Fabric.js 开发时,可能会需要将元素居中。

本文总结了 Fabric.js 常用的将元素居中的方法,其中包括:

  • 基于视窗的水平居中
  • 基于画布的水平居中
  • 带动画效果的水平居中
  • 基于视窗的垂直居中
  • 基于画布的垂直居中
  • 带动画效果的垂直居中
  • 同时实现水平和垂直居中(也是分基于视窗或基于画布的)

除此之外,还总结了 在画布层面居中指定元素元素自身调用居中方法


阅读本文需要你有一定的 Fabric.js 基础,如果还不太了解 Fabric.js 是什么,可以阅读 《Fabric.js 从入门到膨胀》



创建基础项目

为了方便演示,我在初始化画布的时:

  1. 添加一个背景图,该背景图的尺寸和初始化的画布一样大。
  2. 添加一个矩形,之后要居中的对象就是它了。
  3. 添加鼠标滚轮滚动时缩放画布(方便演示 基于视窗基于画布 的区别)。
  4. 添加鼠标拖拽画布平移位置(方便演示 基于视窗基于画布 的区别)。

01.png

<canvas id="canvasBox" width="600" height="600" style="border: 1px solid #ccc;"></canvas>

<!-- 引入 Fabric.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/521/fabric.js"></script>

<script>
  // 初始化画布
  const canvas = new fabric.Canvas('canvasBox')

  // 设置背景图
  fabric.Image.fromURL('../../images/bg2.jpg', img => {
    canvas.setBackgroundImage(
      img,
      canvas.renderAll.bind(canvas),
      { // 将背景图的宽高设置成画布的宽高
        scaleX: canvas.width / img.width,
        scaleY: canvas.height / img.height
      }
    )
  })

  // 创建矩形
  const rect = new fabric.Rect({
    name: 'rect',
    top: 60, // 距离容器顶部 60px
    left: 60, // 距离容器左侧 200px
    fill: 'orange', // 填充a 橙色
    width: 60, // 宽度 60px
    height: 60, // 高度 60px
    originX: 'center',
    originY: 'center'
  })

  // 将矩形添加到画布中
  canvas.add(rect)

  // 滚轮滚动时可修改画布缩放等级
  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
    )
  })

  /* 拖拽画布 */
  canvas.on('mouse:down', opt => { // 鼠标按下时触发
    let evt = opt.e
    canvas.isDragging = true // isDragging 是自定义的
    canvas.lastPosX = evt.clientX // lastPosX 是自定义的
    canvas.lastPosY = evt.clientY // lastPosY 是自定义的
  })

  canvas.on('mouse:move', opt => { // 鼠标移动时触发
    if (canvas.isDragging) {
      let evt = opt.e
      let vpt = canvas.viewportTransform // 聚焦视图的转换
      vpt[4] += evt.clientX - canvas.lastPosX
      vpt[5] += evt.clientY - canvas.lastPosY
      canvas.requestRenderAll()
      canvas.lastPosX = evt.clientX
      canvas.lastPosY = evt.clientY
    }
  })

  canvas.on('mouse:up', opt => { // 鼠标松开时触发
    canvas.setViewportTransform(canvas.viewportTransform) // 设置此画布实例的视口转换  
    canvas.isDragging = false
  })
</script>
复制代码

代码有点多,但 滚轮滚动时可修改画布缩放等级拖拽画布 部分其实可以不要的,写上这些代码主要是为了方便演示。

以下所有例子中所指的元素都是 rect ,因为本例以 rect 进行讲解。你需要根据实际项目中要操作的对象进行调整。



水平居中

将指定元素水平居中。


基于视窗

02.gif

<button onclick="centerH()">水平居中</button>

<script>
  // 省略部分代码

  // 水平居中
  function centerH() {
    // 从画布的角度操作对象
    canvas.viewportCenterObjectH(rect)

    // 元素自己根据视窗进行居中
    // rect.viewportCenterH()
  }
</script>
复制代码

上面我写了2中方法,方法1是用画布操作指定的对象;方法2是元素自己根据视窗来调整自己的位置。


我直接上图来解释一下什么是 根据视窗水平居中元素

缩放的情况

03.gif


移动画布的情况

04.gif


在缩放和移动画布之后,canvas.viewportCenterObjectHrect.viewportCenterH 还是会根据根据视窗的标准来水平居中。


基于画布

05.gif

// 省略部分代码
canvas.centerObjectH(rect)

// 元素自己根据画布进行居中
// rect.centerH()
复制代码

缩放的情况

06.gif


移动画布的情况

07.gif

可以和 基于视窗 的效果对比一下。


带动画效

08.gif

// 省略部分代码
canvas.fxCenterObjectH(rect)
复制代码

带动画的效果需要在画布中调用 fxCenterObjectH 方法。带动画效果的居中是根据画布来居中的,并非视窗!



垂直居中

垂直居中和水平居中的用法差不多,只是改了一下api。水平居中是用 “H” ,垂直居中用 “V”


基于视窗

09.gif

// 省略部分代码

canvas.viewportCenterObjectV(rect)

// 元素自己根据视窗进行居中
// rect.viewportCenterV()
复制代码

基于画布

// 省略部分代码

canvas.centerObjectH(rect)

// 元素自己根据画布进行居中
// rect.centerH()
复制代码

带动画效果

10.gif

// 省略部分代码

canvas.fxCenterObjectV(rect)
复制代码


水平 + 垂直 同时居中

Fabric.js 还提供同时水平和垂直居中的功能。


基于视窗

11.gif

// 省略部分代码

canvas.viewportCenterObject(rect)

// 元素自己根据视窗进行居中
// rect.viewportCenter()
复制代码

基于画布

12.gif

// 省略部分代码

canvas.centerObject(rect)

// 元素自己根据画布进行居中
rect.center()
复制代码

带动画效果

暂时还没发现同时垂直和水平居中有带动画效果的api,所以可以尝试同时调用 fxCenterObjectHfxCenterObjectV

13.gif

// 省略部分代码

function fxCenter() {
  canvas.fxCenterObjectH(rect)
  canvas.fxCenterObjectV(rect)
}
复制代码


代码仓库

Fabric 居中元素



推荐阅读

👍《Fabric.js 上标和下标的使用偏方》

👍《Fabric.js 缩放画布》

👍《Fabric.js 笔刷到底怎么用?》

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改