如何使用动画将对象水平居中？

Question

我找到了 centerH 将元素正确放置在中心的方法

const activeElement = canvas.getActiveObject()
activeElement.centerH()

但是它不会为对象设置动画。所以我尝试自己实现

const activeElement = canvas.getActiveObject()

const { left, top } = canvas.getCenter();

const dest = {
  left: left - activeElement.width / 2,
  // top: top - activeElement.height / 2,
}

activeElement.animate(dest, {
  onChange: canvas.renderAll.bind(canvas),
  easing: fabric.util.ease['easeOutCubic'],
  duration: 500,
})

这里的问题是当元素缩放 and/or 旋转时它不起作用。

有没有简单的方法来创建动画centerH？

代码：

const fabric = window.fabric;

const canvas = new fabric.Canvas('canvas', {
  background: 'silver',
  centeredRotation: true,
})

canvas.setWidth(250)
canvas.setHeight(250)

const textbox = new fabric.Textbox('hello world this is', {
  left: 5,
  top: 200,
  fontSize: 30,
  hasRotatingPoint: false,
  centeredScaling: true,
  centeredRotation: true,
  originX: 'left',
  originY: 'top',
  fixedWidth: 200,
  width: 200,
  angle: -75,
}).scale(0.65)
canvas.add(textbox).setActiveObject(textbox)

// grid
const gridStyle = {
  stroke: 'red',
  strokeWidth: 1,
  selectable: false,
}
const center = {
  h: canvas.width / 2,
  v: canvas.height / 2,
}
const h = new fabric.Line([ center.h, 0, center.h, canvas.height], gridStyle)
const v = new fabric.Line([ 0, center.v, canvas.width, center.v], gridStyle)
canvas.add(h)
canvas.add(v)

// center function
document.getElementById('center').addEventListener('click', () => {
  const activeElement = canvas.getActiveObject()
  
  const { left, top } = canvas.getCenter()
  
  const dest = {
    left: left - activeElement.width / 2,
    // top: top - activeElement.height / 2,
  }
  
  activeElement.animate(dest, {
    onChange: canvas.renderAll.bind(canvas),
    easing: fabric.util.ease['easeOutCubic'],
    duration: 500,
  })
}, { passive: true })

body {
  margin: 20px;
}

canvas {
  border: 1px dashed red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.2/fabric.min.js"></script>
<button id="center">center element</button>
<br/>
<canvas id="canvas"></canvas>

Answer 1

据我所知，您的任务转化为

move the element to a position such that its center would be at the canvas' center

这是一个进行计算的函数。参数 x 和 y 是 canvas 上的点的坐标； originX 和 originY 描述了您要将元素的哪个点放置在 x,y。 return 值是一个点，您需要将其坐标设置为对象的 left，top 以获得此位置，同时考虑到对象的原点。

function getPositionByOrigin (x, y, originX, originY) {
  const point = new fabric.Point(x, y)
  const center = this.translateToCenterPoint(point, originX, originY)
  return this.translateToOriginPoint(center, this.originX, this.originY)
}

这基本上是 fabric.Object.prototype.setPositionByOrigin() 但不会立即改变对象。

这是一个片段：

const fabric = window.fabric;

const canvas = new fabric.Canvas('canvas', {
  background: 'silver',
  centeredRotation: true,
})

canvas.setWidth(250)
canvas.setHeight(250)

const textbox = new fabric.Textbox('hello world this is', {
  left: 5,
  top: 200,
  fontSize: 30,
  hasRotatingPoint: false,
  centeredScaling: true,
  centeredRotation: true,
  originX: 'left',
  originY: 'top',
  fixedWidth: 200,
  width: 200,
  angle: -75,
}).scale(0.65)
canvas.add(textbox).setActiveObject(textbox)

// grid
const gridStyle = {
  stroke: 'red',
  strokeWidth: 1,
  selectable: false,
}
const center = {
  h: canvas.width / 2,
  v: canvas.height / 2,
}
const h = new fabric.Line([ center.h, 0, center.h, canvas.height], gridStyle)
const v = new fabric.Line([ 0, center.v, canvas.width, center.v], gridStyle)
canvas.add(h)
canvas.add(v)

function getPositionByOrigin (x, y, originX, originY) {
  const point = new fabric.Point(x, y)
  const center = this.translateToCenterPoint(point, originX, originY)
  return this.translateToOriginPoint(center, this.originX, this.originY)
}

// center function
document.getElementById('center').addEventListener('click', () => {
  const activeElement = canvas.getActiveObject()
  
  const { left, top } = canvas.getCenter()
  const newPosition = getPositionByOrigin.call(activeElement, left, top, 'center', 'center')
  
  const dest = {
    left: newPosition.x,
    top: newPosition.y
  }
  
  activeElement.animate(dest, {
    onChange: canvas.renderAll.bind(canvas),
    easing: fabric.util.ease['easeOutCubic'],
    duration: 500,
  })
}, { passive: true })

body {
  margin: 20px;
}

canvas {
  border: 1px dashed red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.2/fabric.min.js"></script>
<button id="center">center element</button>
<br/>
<canvas id="canvas"></canvas>

如何使用动画将对象水平居中？

How can I center an object horizontally with an animation?

javascript

fabricjs

fabricjs2