Fabric.js: 居中元素的艺术

2023-09-21 20:07:16

Fabric.js：巧用居中技巧，打造优雅布局

在 Fabric.js 的设计领域中，元素居中的掌控是一门必备的艺术。无论是将图像置于画布中心，还是使文本框整齐排列，居中元素都能为你的作品增添专业性和美感。掌握 Fabric.js 的居中技巧，你将如虎添翼，创造出令人惊艳的设计。

居中到视窗：引领视觉焦点

居中到视窗的技巧，让你将元素完美置于屏幕中央。这对于展示重要信息或创建平衡和谐的构图至关重要。首先，获取视窗的尺寸，然后计算出元素的中心点。fabric.util.js 中的 getCenter 函数正是为此而生：

const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;

const rect = new fabric.Rect({
  width: 100,
  height: 100,
  fill: 'red'
});

rect.set('left', viewportWidth / 2 - rect.getWidth() / 2);
rect.set('top', viewportHeight / 2 - rect.getHeight() / 2);

居中到画布：画布上的中心舞台

与居中到视窗类似，居中到画布的原理旨在将元素放置在画布的正中央。步骤与前者如出一辙：获取画布尺寸，计算元素中心点，再将元素定位于中心。代码如下：

const canvasWidth = canvas.getWidth();
const canvasHeight = canvas.getHeight();

const rect = new fabric.Rect({
  width: 100,
  height: 100,
  fill: 'red'
});

rect.set('left', canvasWidth / 2 - rect.getWidth() / 2);
rect.set('top', canvasHeight / 2 - rect.getHeight() / 2);

旋转居中：旋转中的和谐

当元素旋转时，居中的复杂性有所提升，因为元素的中心点也会随之变化。不过，Fabric.js 提供了一个贴心的 getBoundingRect 函数，它能返回元素的边界框，无论其旋转角度如何：

const rect = new fabric.Rect({
  width: 100,
  height: 100,
  fill: 'red'
});
rect.set('angle', 45);

const boundingRect = rect.getBoundingRect();

rect.set('left', boundingRect.left + boundingRect.width / 2 - rect.getWidth() / 2);
rect.set('top', boundingRect.top + boundingRect.height / 2 - rect.getHeight() / 2);