如何在Fabric Js中居图案填充？

Question

如何使FabricJS对象的图案填充居中？似乎模式始终面向顶部/左侧。我已经尝试将originX和OriginY设置为模式，填充对象，画布上的“中心”，似乎没有任何帮助。任何的想法？

Answer 1

我找到了答案：

模式使用偏移，而不是起源。因此，要模拟模式的居中，请考虑以下要求：

1. 中心位于物体的半宽处。
2. 要居中，图案对象必须位于宽度一半的中心点。

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

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

Answer 2

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

尝试按编号将其设置为图像大小的一半。