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

Support different Gradient modes for Color gradient brushes #22

Open
jongleur1983 opened this issue Nov 12, 2019 · 4 comments
Open

Support different Gradient modes for Color gradient brushes #22

jongleur1983 opened this issue Nov 12, 2019 · 4 comments

Comments

@jongleur1983
Copy link
Contributor

In general Gradients from colorA to colorB can have different styles, e.g. gradienting around the color-wheel (clockwise, counter-clockwise), gradienting in a straight line in the color cube or something else.
A sample for that can be seen in Gimp, that has the following options (condensed to those relevant for ImageSharp Gradients):
image

Translated to English:

  1. Foreground to Background - hard edge
  2. Foreground to Background - HSV color counter-clockwise
  3. Foreground to background - HSV color clockwise
  4. Foreground to background - RGB

Option 3 and 4 don't differ on the red-to-yellow example, but do on green-to-red:
image

Up to now there's no option on how to calculate the gradients yet.
Currently we calculate an intermediate color by this code:

https://github.com/SixLabors/ImageSharp/blob/133d90879b17577032a4cc165014915c0829540e/src/ImageSharp.Drawing/Processing/GradientBrush.cs#L121

If I'm not mistaking that's how option 4 from GIMP works.

With the options from the GIMP example above this would be exchanged by
HardEdge: onLocalGradient > 0.5 ? toAsVector : fromAsVector
for HsvClockwise and HsvCounterClockwise the logic basically would be

  • linear interpolation of Hue and Saturation component
  • blending the V(alue) component as a linear blending around the color cone edge in the given direction (clockwise or counter-clockwise).

Conversion HSV<>RGB is already implenmented in HsvAndRgbConverter.cs

jongleur1983 referenced this issue in SixLabors/ImageSharp Nov 12, 2019
@JimBobSquarePants
Copy link
Member

@jongleur1983
Copy link
Contributor Author

thanks @JimBobSquarePants changed the description accordingly. Did not meant to close this issue, sorry for that. Not sure how to undo the stuff the automation did as a result...

@JimBobSquarePants
Copy link
Member

@jongleur1983 Don't worry about it mate. I closed another one with a commit message the other day by accident!

@antonfirsov antonfirsov transferred this issue from SixLabors/ImageSharp Jan 17, 2020
@antonfirsov antonfirsov added this to the Future milestone Jun 19, 2021
@JimBobSquarePants
Copy link
Member

JimBobSquarePants commented Nov 1, 2023

Revisiting this after several years.

Hard edges can already be achieved. It works like CSS gradients in that you add additional stops.

CanRenderTextOutOfBoundsIssue301

For example, the following stops were used to generate the above image.

new ColorStop(0, Color.Red),
new ColorStop(0.5f, Color.Red),
new ColorStop(0.5f, Color.Yellow),
new ColorStop(1f, Color.Yellow)

The difference between 3 and 4 is the result of gamma handling. We can mimic 3 by transforming the colors to the linear equivalent. CSS defaults to our approach though for RGB as it's interpreted as sRGB.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants