如何在 FabricJs 中居中填充图案？答案

【问题标题】：How to center pattern fill in FabircJs?如何在 FabricJs 中居中填充图案？
【发布时间】：2014-05-15 00:50:32
【问题描述】：

如何使 FabricJS 对象的图案填充居中？似乎该模式总是面向顶部/左侧。我尝试将 originX 和 OriginY 设置为图案、填充对象、画布的“中心”，但似乎没有任何帮助。有什么想法吗？

【问题讨论】：

【解决方案1】：

我找到了答案：

模式使用偏移量，而不是原点。因此，要模拟图案居中，请考虑以下要求：

中心位于对象的一半宽度处。
要居中，图案对象必须位于其宽度一半的中心点。

pattern = new fabric.Pattern({
    source: function () {[...]},
    repeat: 'repeat',
    offsetX: [objectwidth/2] - [patternwidth/2],
    offsetY: [objectheight/2] - [patternheight/2]
});

做到了！如果您更改了其中任何一项的比例，您也需要对其进行补偿。

【讨论】：

【解决方案2】：

在 Fabric.js 的 Pattern Example 中，只有 int 值用作 OriginX/Y。

尝试按数字设置，设置为图像大小的一半。

【讨论】：

感谢您的建议！我会试试这个。我的模式不同之处在于它们是由路径而不是图像构成的。我会想象他们以同样的方式工作。定位是相对于图案画布还是图案图像？我想画布大小是决定因素，因为它用于创建图案。
我终于有时间重新审视这个问题。不幸的是，模式示例没有使用 OriginX，而是使用 OffsetX/Y 来移动模式。有没有办法操纵偏移量来补偿图案的大小，以便始终居中？