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

问题描述 投票:1回答:2

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

javascript fabricjs
2个回答
1
投票

我找到了答案:

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

  1. 中心位于物体的半宽处。
  2. 要居中,图案对象必须位于宽度一半的中心点。
pattern = new fabric.Pattern({
    source: function () {[...]},
    repeat: 'repeat',
    offsetX: [objectwidth/2] - [patternwidth/2],
    offsetY: [objectheight/2] - [patternheight/2]
});

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


0
投票

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

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

© www.soinside.com 2019 - 2024. All rights reserved.