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,
})

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

是否有一种简单的方法来创建动画的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

据我所见，您的任务翻译为

将元素移动到某个位置，使其中心位于画布的中心

这是一个进行计算的函数。参数x和y是画布上该点的坐标； originX和originY描述了您要放置在x,y上元素的哪一点。返回值是一个点，需要考虑对象的原点，将其坐标设置为对象的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>

如何通过动画使对象水平居中？

1 个答案: