search

rough-stuff / rough

Create graphics with a hand-drawn, sketchy, appearance
http://roughjs.com
MIT License
19.94k stars 617 forks source link

FillStyle Dots bugs on Rectangles bigger than 200x200 (4.1.4) #143

Closed bynormous closed 4 years ago

bynormous commented 4 years ago

dotshi

it looks like the pattern scales with the rectangle until it's 200x200 then it gets capped. See gif above. Also, the render time increases dramatically after 200x200. See gif. I'm just rendering a simple rectangle with fillStyle = 'dots'

pshihn commented 4 years ago

Are you using SVG or canvas?

If SVG, then you need to recompute the pattern at different sizes, because a repeat pattern would loop choppy.

I'm working on a new version that does not do any pattern fills but It may take some time before it's ready for release.

pshihn commented 4 years ago

Just realized it's not a canvas/svg issue but using the Path object. I suspect you are using SVG Path and not Rectangle for this. RIght?

bynormous commented 4 years ago

I think I'm using rectangle and using canvas:

this.rough.rectangle(0, 0, this.el.w, this.el.h, {
        fill: this.el.fill,
        fillStyle: 'dots',
        stroke: 'black',
        seed: 1
})

I am using matrix transformations using ctx.setTransform to set the position/scale/rotation of my elements. I think that might be why I'm running into more trouble than most people?

This bug isn't critical btw, I'm just playing around with the library. Thanks for your help!

pshihn commented 4 years ago

Excalidraw.com uses transform as well for such stuff (not using dots though) and haven't heard this issue there. If you have a simple example, I can take a look.

bynormous commented 4 years ago

Here's an example: https://codepen.io/psomo/pen/NWGqWWw using the latest roughjs

When I tried an old v3 version of roughjs the bug actually went away

pshihn commented 4 years ago

This was indeed a dumb bug that was caused by an unrelated issue due to a hasty (and bad) decision I made some time ago. Haha. Fixed in a big refactor I did: https://github.com/pshihn/rough/pull/144 Fix Available is v4.2.0