Gradients with multiple stops not smooth

Bug Reports
1

Code for reproduction:

	<Rectangle>
	    <LinearGradient AngleDegrees="120">
			<GradientStop Offset="0" 	      Color="#ff7f7f"/>
			<GradientStop Offset="0.16666667"  Color="#f09680"/>
			<GradientStop Offset="0.33333333"  Color="#dbaf80"/>
			<GradientStop Offset="0.5"         Color="#bfc780"/>
			<GradientStop Offset="0.66666667"  Color="#9bde80"/>
			<GradientStop Offset="0.83333333"  Color="#6bf180"/>
			<GradientStop Offset="1" 		  Color="#00ff7f""/>
	    </LinearGradient>
	</Rectangle>

Result:

Img

Direct Link to screeshot

  • MacOS X 10.12.3
  • Preview
  • Fuse v0.35
2

Seems like the dropbox link to the image isn’t public. :slight_smile:

3

Link updated

4

Still getting AuthenticationFailed when trying to check the image.

5

I add direct link to screenshot to DropBox. But for screenshot above I use another sharing resource calling Droplr. Strange very strange…

Also post this: https://www.dropbox.com/s/jfm8ux7oucs721c/Fuse-Gradient.jpg?dl=0

6

Thanks, got access now.
I’ve raised a ticket for this one.

7

This happens, because our LinearGradient currently uses a smooth-step between the values instead of a linear step. This is going to be configurable in an upcoming version, with the default set to Linear.

8

Cool! It would be even cool if the blending occurred in Linear space instead sRGB!

And another very big request - make possible usage Observable’s array of stops like this:

<LinearGradient AngleDegrees="120">
    <Each Items="{stopColors}">
         <GradientStop Offset="{stop}" Color="{color}"/>
    </Each>
</LinearGradient>