Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature request: Textures to fill properties? #6135

Closed
cogerk opened this issue Apr 13, 2017 · 10 comments

Comments

@cogerk
Copy link

commented Apr 13, 2017

Hey All,

I found this message in the google group asking if adding hatching to graphs like quad/circle, etc. was possible. Looks like there is probably an unexposed way to do this in a workaround, but just curious if anything higher level is in the works? Apologies if this is a duplicate request, couldn't find anything with a search. Thanks!

@bryevdv

This comment has been minimized.

Copy link
Member

commented Apr 14, 2017

I thought there was an issue for this but I can't find one either.

Relevant reference: https://www.w3schools.com/tags/canvas_createpattern.asp

I don't think the direct technical aspects of having fill patterns is especially difficult. The main issue is what to do about the API. Bokeh currently uses fill_color everywhere. So we either have to:

  • expand the meaning of fill "color" to include patterns too, or
  • add some new property but somehow prevent (or at least warn about) incompatible usage with fill_color

Thoughts, @bokeh/dev ?

@bryevdv bryevdv added this to the 0.12.7 milestone Apr 14, 2017

@bryevdv

This comment has been minimized.

Copy link
Member

commented Apr 14, 2017

For the second option, we could add a fill_style (Bokeh) property that accepts both colors or instances of a new Pattern model. The fill_color could become a (python) property that just checks that the value is a color, and then sets fill_style. I would say it shouldn't be deprecated because it is far too common, it can just be an alias for setting colors, specifically.

I'm not sure just letting fill_color accept Pattern would be so bad, though.

@jbednar

This comment has been minimized.

Copy link
Contributor

commented Apr 14, 2017

Both options sound reasonable; no particular preference. Definitely would be nice to have!

@bryevdv

This comment has been minimized.

Copy link
Member

commented Jun 8, 2017

Canvas patterns can either be an image or another canvas. Could support both, an ImagePattern that takes a URL to an image, and CustomJSPattern that takes JS commands for drawing on a ctx. Useful example for the latter:

http://jsfiddle.net/UxDVR/7/

@bryevdv bryevdv modified the milestones: 0.12.7, 0.12.8 Aug 21, 2017

@bryevdv bryevdv modified the milestones: 0.12.x, 0.12.11 Oct 16, 2017

@bryevdv

This comment has been minimized.

Copy link
Member

commented Oct 20, 2017

in case the fiddle disappers

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');



// set up a pattern
var pattern = document.createElement('canvas');
pattern.width = 40;
pattern.height = 40;
var pctx = pattern.getContext('2d');

pctx.beginPath();
pctx.moveTo(0.0, 40.0);
pctx.lineTo(26.9, 36.0);
pctx.bezierCurveTo(31.7, 36.0, 36.0, 32.1, 36.0, 27.3);
pctx.lineTo(40.0, 0.0);
pctx.lineTo(11.8, 3.0);
pctx.bezierCurveTo(7.0, 3.0, 3.0, 6.9, 3.0, 11.7);
pctx.lineTo(0.0, 40.0);
pctx.closePath();
pctx.fillStyle = "rgb(188, 222, 178)";
pctx.fill();
pctx.lineWidth = 0.8;
pctx.strokeStyle = "rgb(0, 156, 86)";
pctx.lineJoin = "miter";
pctx.miterLimit = 4.0;
pctx.stroke();

var pattern = ctx.createPattern(pattern, "repeat");
ctx.rect(0,0,200,200);
ctx.fillStyle = pattern;
ctx.fill();

@bryevdv bryevdv modified the milestones: 0.12.11, 0.12.x Oct 23, 2017

@jhdedrick

This comment has been minimized.

Copy link

commented Feb 1, 2018

A trend in graphics generally is to make use of the capabilities of (now ubiquitous) 3D engines. I have no idea what the technical complexities would be, but one thing they're very good at is taking a texture expressed as an image, resizing it (with proper antialiasing), and applying it to a polygon. Very fast, and very general. Is this worth considering as an alternative to patterns we make up out of lines & dots?

@LightnerAndrew

This comment has been minimized.

Copy link

commented Jul 31, 2018

Hi all, I came across this request while searching for an options to fill patches with hashes or other patterns. I have a request to include this attribute for a visual which will not be published until at least the end of this year. I am curious whether the 'fill pattern' option has any chance of being added in the near future.

I fully understand that those who develop bokeh have quite an extensive workload. I would offer to help if I had more (any) JS experience.

@bryevdv bryevdv modified the milestones: 0.13.x, short-term Sep 11, 2018

@bryevdv

This comment has been minimized.

Copy link
Member

commented Apr 22, 2019

I should have a PR later this week:

Screen Shot 2019-04-21 at 8 23 53 PM

Hatching works by tiling a pattern so getting diagonal lines that look good crossing pattern boundaries is tricky. The above is the best i could accomplish after a few hours of experimenting. I will have more pointed questions in the PR about what would be best to do in some cases.

@bryevdv

This comment has been minimized.

Copy link
Member

commented Apr 22, 2019

I think there is a pretty clear path to custom hatching too, if people want to write crazy patterns:
Screen Shot 2019-04-21 at 8 30 45 PM
Screen Shot 2019-04-21 at 8 30 51 PM

If I can get to it this week, I will try to add it.

@bryevdv bryevdv referenced this issue Apr 22, 2019
8 of 10 tasks complete

@bryevdv bryevdv modified the milestones: short-term, 1.1.1 Apr 22, 2019

@bryevdv

This comment has been minimized.

Copy link
Member

commented Apr 22, 2019

@cogerk @jhdedrick @LightnerAndrew please check out the PR and leave any comments on spelling, default patterns, etc.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.