Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Lineargradient is drawn offset from specified positon

I made a hue gradient with a Lineargradient with this code: (I know it could have been made simpler with Color.parseColor but it has to be this way for what I intend to do. I cannot use a drawable either.)

colors = new int[]{ Color.HSVToColor(new float[]{0, 1, 1}),
                    Color.HSVToColor(new float[]{60, 1, 1}), 
                    Color.HSVToColor(new float[]{120, 1, 1}), 
                    Color.HSVToColor(new float[]{180, 1, 1}),
                    Color.HSVToColor(new float[]{240, 1, 1}), 
                    Color.HSVToColor(new float[]{300, 1, 1}), 
                    Color.HSVToColor(new float[]{360, 1, 1}) };
Shader shader = new LinearGradient(0, 0, width, 0, colors, null, Shader.TileMode.CLAMP);
paint.setShader(shader);

Which produces this result with slightly offsetted colors, green area is too small and blue area is too large compared with the expected result.

comparison

I checked everything. I tried to use new float[]{0f, 1/6f, 2/6f, 3/6f, 4/6f, 5/6f, 1f} instead of null for the positions argument, same result. This might be a bug too.

Note that this is not a duplicate of this post nor this one. These are about incorrect gradient stops set in code which is not my case. It might be related to this one but I don't see how.

EDIT: Maybe this could be solvable by setting unequal positions to colors, but how can I calculate these exact positions?

like image 867
Nicolas Avatar asked Dec 02 '16 01:12

Nicolas


People also ask

What is offset in linear gradient?

The x1, x2, y1,y2 attributes of the <linearGradient> tag define the start and end position of the gradient. The color range for a gradient can be composed of two or more colors. Each color is specified with a <stop> tag. The offset attribute is used to define where the gradient color begin and end.

What is linear gradient?

linear-gradient() The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the <gradient> data type, which is a special kind of <image> .

Which of the following function defines a linear gradient as a CSS image?

The linear-gradient() function sets a linear gradient as the background image.

How do you apply a linear gradient to an image?

To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.


1 Answers

I've been working to solve this more than 3 hours in total and well... turns out it was almost nothing. And it was in my code. The worst of it is I added a bounty and solved it 15 minutes later.

I drew the gradient in a view with a certain padding and instead of this

LinearGradient(0, 0, width, 0, colors, null, Shader.TileMode.CLAMP);

I had to do this:

LinearGradient(left, 0, right, 0, colors, null, Shader.TileMode.CLAMP);

Somehow the gradient begins before the padding I added to my view, at (0, 0), which is 10 dip left of my gradient start, causing the offset.

enter image description here

It all makes sense now.

like image 103
Nicolas Avatar answered Oct 28 '22 08:10

Nicolas