CODEWITHSUNDEEP
javascriptfabricjs
mike.bronner
mike.bronner

Reputation: 1249

How to center pattern fill in FabircJs?

How do I center the pattern fill of a FabricJS object? It seems the pattern is always oriented to top/left. I have tried setting originX and OriginY to 'center' on the pattern, the filled object, the canvas, nothing seems to help. Any idea?

Upvotes: 1

Views: 930

Answers (2)

mike.bronner
mike.bronner

Reputation: 1249

I found the answer:

Patterns use offsets, and not origins. So, to simulate centering a pattern, consider the following requirements:

  1. The center is at half-width of the object.
  2. To be centered, the pattern object must be at the center point at half it's width.
pattern = new fabric.Pattern({
    source: function () {[...]},
    repeat: 'repeat',
    offsetX: [objectwidth/2] - [patternwidth/2],
    offsetY: [objectheight/2] - [patternheight/2]
});

That did it! If you changed the scale on either of the items, you will need to compensate for that as well.

Upvotes: 1

kolenda
kolenda

Reputation: 2811

In Pattern Example of Fabric.js there are only int values used as OriginX/Y.

Try to set it by number, to the half of your image size.

Upvotes: 0

Related Questions