关于前端:摆正元素带过渡动画

30次阅读

共计 3928 个字符,预计需要花费 10 分钟才能阅读完成。

本文简介

这次要讲的是 4 个“摆正”元素的办法 ,这是我工作中遇到的场景。

我不晓得 straighten 应用“摆正”这个词来翻译正不正确,反正我就是要这么叫!

straighten:依据间隔的远近,将元素从以后角度旋转至 0、90、180、270 等角度。

【百度百科的定义】

straighten,英文单词,及物动词、不及物动词,作及物动词时意为“整顿;使…改过;使…挺直;使…恶化”,作不及物动词时意为“变直;恶化”。

英语课代表的揭示~

成果如下图所示

版本阐明

Fabric.js 版本:4.6.0

相干 API

Fabric.js 提供了几个 API 实现 摆正操作

  • canvas.straightenObject(object)
  • object.straighten()
  • canvas.fxStraightenObject(object)
  • object.fxStraighten()

须要留神的是,应用 object.straightenobject.fxStraighten 摆正元素后,画面是不会自动更新的(但理论是曾经摆正了),须要配合 canvas.renderAll() 等刷新画布的 API 一起应用。

这点官网文档上如同没有特地阐明。

下面 4 个 API 中,带 fx 的是有过渡动画成果的。

示例代码

接下来的代码里,应用到的 元素对象 我都在公共变量里定义好的。

如果须要动静获取指定元素,你能够应用 canvas.getObjects()getActiveObject() 等办法,这依据你业务场景来定。

这些办法都不是本文想解说的重点,所以当初先回归到原来的目标吧。

办法 1:canvas.straightenObject

canvas.straightenObject 这个办法容许咱们传入 1 个参数。这个参数是你须要摆正的元素对象 (fabric.Object)。

我用一个 三角形 来举例。逻辑都写在代码正文里。

<button onclick="straightenObject()"> 摆正元素 </button>
<canvas id="canvasBox" width="600" height="600"></canvas>

<!-- 引入 fabric.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/460/fabric.min.js"></script>
<script>
let canvas = null // 画布对象
let triangle = null // 三角形对象

window.onload = function() {
  // 初始化画布
  canvas = new fabric.Canvas('canvasBox', {
    width: 400,
    height: 400
  })

  // 三角形
  triangle = new fabric.Triangle({
    top: 100,
    left: 100,
    width: 80, // 底边长度
    height: 100, // 底边到对角的间隔
    fill: 'blue',
    angle: 30 // 旋转了 30 度
  })
  
  // 将矩形增加到画布中
  canvas.add(triangle)
}

// 摆正
function straightenObject() {
  // 传入三角形对象
  canvas.straightenObject(triangle)
}
</script>

办法 2:object.straighten

应用 object.straighten 也能达到 canvas.straightenObject 的成果。

object.straighten 并不会主动刷新画布,须要应用 canvas.renderAll() 等办法配合。

<!-- 省略局部代码 -->

<script>
// 摆正
function straightenObject() {
  // 三角形对象调用 straighten 办法,从而摆正本身
  triangle.straighten()
  // 摆正完,须要刷新画布
  canvas.renderAll()}
</script>

办法 3:canvas.fxStraightenObject

后面两个办法都是没过渡成果的。

接下来就试试有过渡成果的 API:canvas.fxStraightenObject

canvas.straightenObject 一样,canvas.fxStraightenObject 也须要传入一个 对象参数 (fabric.Object)

<button onclick="fxStraightenObject()"> 摆正元素(过渡动画)</button>
<canvas id="canvasBox" width="600" height="600"></canvas>

<!-- 引入 fabric.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/460/fabric.min.js"></script>
<script>
let canvas = null // 画布对象
let triangle = null // 三角形对象

window.onload = function() {
  // 初始化画布
  canvas = new fabric.Canvas('canvasBox', {
    width: 400,
    height: 400
  })

  // 三角形
  triangle = new fabric.Triangle({
    top: 100,
    left: 100,
    width: 80, // 底边长度
    height: 100, // 底边到对角的间隔
    fill: 'blue',
    angle: 30 // 旋转了 30 度
  })
  
  // 将矩形增加到画布中
  canvas.add(triangle)
}

// 摆正
function fxStraightenObject() {
  // 传入三角形对象
  canvas.fxStraightenObject(triangle)
}
</script>

canvas.fxStraightenObject 不须要应用额定的办法刷新画布。

办法 4:object.fxStraighten

应用 object.fxStraighten 也能够实现带过渡动画的摆正性能。

object.fxStraighten 有点特地,它也能传入 1 个参数,该参数是个对象,对象外面有 2 个函数字段。

  • onComplete:动画实现后的回调函数
  • onChange:动画执行过程中的回调函数

用法如下所示

<!-- 省略局部代码 -->

<script>
// 摆正
function fxStraightenObject() {
  // 传入三角形对象
    triangle.fxStraighten({onChange() {canvas.renderAll()
    },
    onComplete() {canvas.renderAll()
    }
  })
}
</script>

我的想法

  1. 如果要摆正的元素数量不多,能够应用 canvas.straightenObjectcanvas.fxStraightenObject
  2. 如果元素数量比拟多,应用 object.straighten 把元素都放好,而后再执行一次 canvas.renderAll(),刷新一次即可。
  3. 如果元素数量比拟多,应用 object.fxStraighten 时,如果不须要在回调函数里执行什么操作,能够应用 requestAnimationFrame 的办法个体刷新。

下面第 3 点的代码

<button onclick="fxStraightenObject()"> 摆正元素(过渡动画)</button>
<canvas id="canvasBox" width="600" height="600"></canvas>
  
<script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/460/fabric.js"></script>
<script>
let canvas = null // 画布对象
let triangle = null // 三角形对象
let rect = null // 矩形对象

window.onload = function() {
  // 应用 元素 id 创立画布,此时能够在画布上框选
  canvas = new fabric.Canvas('canvasBox', {
    width: 400,
    height: 400
  })

  // 三角形
  triangle = new fabric.Triangle({
    top: 100,
    left: 100,
    width: 80, // 底边长度
    height: 100, // 底边到对角的间隔
    fill: 'blue',
    angle: 30
  })

  // 矩形
  rect = new fabric.Rect({
    top: 70,
    left: 200,
    width: 100, // 宽
    height: 30, // 高
    fill: 'orange',
    angle: -40
  })
  
  // 将矩形增加到画布中
  canvas.add(triangle, rect)
  renderAll()}

// 一直刷新画布
function renderAll() {canvas.renderAll()
  requestAnimationFrame(renderAll)
}

// 摆正(带过渡动画)function fxStraightenObject() {triangle.fxStraighten() // 摆正三角形
  rect.fxStraighten() // 摆正矩形}

</script>

这种写法只是想提供一种思路,实在开发须要依据你业务进行灵便调整。

代码仓库

  • 原生形式实现 摆正元素(带过渡动画)
  • 在 Vue3 中应用 Fabric 实现 摆正元素(带过渡动画)

举荐浏览

  • ⭐《Fabric.js 从入门到收缩》
  • ⭐《Fabric.js 3 个 api 设置画布宽高》
  • ⭐《Fabric.js 自定义右键菜单》

点赞 + 关注 + 珍藏 = 学会了

正文完
 0