search

fabricjs / fabric.js

Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser
http://fabricjs.com
Other
29.11k stars 3.52k forks source link

Problems with pattern fill on fabric.Text using patternTransform #5506

Open grafmouse opened 5 years ago

grafmouse commented 5 years ago

Version

2.6.0

Test Case

http://jsfiddle.net/nhwmj1pa/

Information about environment

Browser: latest Chrome and Safari

Steps to reproduce

  1. Create a text
  2. Add text to canvas
  3. Create pattern with image
  4. Set fill of text to pattern
  5. Change pattern fill patternTransform value to [.75, 0, 0, .75, 0, 0]
  6. Redner canvas

Expected Behavior

Text filled with scaled down pattern.

Actual Behavior

Pattern is wrong. Text paths are ignored. Pattern does not repeat itself.

No scale defined in patternTransform: zrzut ekranu 2019-01-25 o 16 08 23

Scale defined in patternTransform: zrzut ekranu 2019-01-25 o 16 09 01

asturur commented 5 years ago

This is a known issue and one of the reason why we do no have scaling patterns at all in fabricJS. But i need to do some fixes for the scaling stroke, maybe we can fix this too.

asturur commented 5 years ago

the point here is that we have to dynamically create a new pattern based on the old one transformed, so that we do not have to scale the context.

Text has a different fill / stroke logic compare to everything else. Would be different if we could draw text as a path efficently.

millcity commented 5 years ago

I'm having the same issue, would like to see a fix as well :)

kcap commented 3 years ago

Another issue, pattern becomes blurry when patternTransform is [1/scaleX, 0, 0, 1/scaleY, 0, 0] http://jsfiddle.net/0wmhpj5b/1/

asturur commented 3 years ago

Can't see the pattern loading in your fiddle... Ok is a chrome issue, in Firefox the fiddle works correctly.

The way text work is very different from shapes. In order for a pattern to be scaled independently of text on the canvas, we need to transform it in a bigger or smaller pattern at pixel level. So blurryness is something that we have to live with.