This must be an easy one but I'm really at a loss... The following code draws a rectangle with a linear gradient going from left to right, from white to black,
int x1 = 0, y1 = 0, x2 = 100, y2 = 40;
Shader shader = new LinearGradient(x1, y1, x2, y2, Color.WHITE, Color.BLACK, TileMode.CLAMP);
Paint paint = new Paint();
paint.setShader(shader);
canvas.drawRect(new RectF(x1, y1, x2, y2), paint);
Ok, fine. Now what I'd like to do is to change this gradient into a horizontal one, so that the color goes from white to black, from top to bottom. What I tried to do is to add:
Matrix trans = new Matrix();
trans.setRotate(90);
shader.setLocalMatrix(trans);
but instead the gradient goes at a funny angel, or there is just a single color... I also tried to play with the coordinates of the gradient in all sorts of way (thinking that maybe they should be transformed) to no avail. What am I missing?
I haven't done much android coding, but one approach worth trying is:
int x1 = 0, y1 = 0, x2 = 0, y2 = 40;
The x never changes in the gradient only the y does.
So what this might look like is:
Shader shader = new LinearGradient(0, 0, 0, 40, Color.WHITE, Color.BLACK, TileMode.CLAMP);
Paint paint = new Paint();
paint.setShader(shader);
canvas.drawRect(new RectF(0, 0, 100, 40), paint);
you can adjust the gradient orienation
Top to Bottom
LinearGradient(0, 0, 0, height, gradientStartColor, gradientEndColor, Shader.TileMode.CLAMP)
Bottom to Top
LinearGradient(0, height, 0, 0, gradientStartColor, gradientEndColor, Shader.TileMode.CLAMP)
Left to Right
LinearGradient(0, 0, width, 0, gradientStartColor, gradientEndColor, Shader.TileMode.CLAMP)
Right to Left
LinearGradient(width, 0, 0, 0, gradientStartColor, gradientEndColor, Shader.TileMode.CLAMP)
Related
I am trying to create an arc (variable number of degrees) that gradually goes from one color to another. From example from blue to red:
This is my code:
SweepGradient shader = new SweepGradient(center.x, center.y, resources.getColor(R.color.startColor),resources.getColor(R.color.endColor));
Paint paint = new Paint()
paint.setStrokeWidth(1);
paint.setStrokeCap(Paint.Cap.FILL);
paint.setStyle(Paint.Style.FILL);
paint.setShader(shader);
canvas.drawArc(rectF, startAngle, sweepAngle, true, paint);
But the result is the entire arc is painted with the same color.
Edit:
After more experimenting, I found out that the color spread is determined by the angle of the arc. If I draw an arc with a small angle, only the first color is displayed. The larger the angle, more colors are drawn. If the angle is small it seems that there is no gradient. Here is an example. I am drawing 4 arcs - 90, 180, 270 and 360:
RectF rect1 = new RectF(50, 50, 150, 150);
Paint paint1 = new Paint();
paint1.setStrokeWidth(1);
paint1.setStrokeCap(Paint.Cap.SQUARE);
paint1.setStyle(Paint.Style.FILL);
SweepGradient gradient1 = new SweepGradient(100, 100,
Color.RED, Color.BLUE);
paint1.setShader(gradient1);
canvas.drawArc(rect1, 0, 90, true, paint1);
RectF rect2 = new RectF(200, 50, 300, 150);
Paint paint2 = new Paint();
paint2.setStrokeWidth(1);
paint2.setStrokeCap(Paint.Cap.SQUARE);
paint2.setStyle(Paint.Style.FILL);
SweepGradient gradient2 = new SweepGradient(250, 100,
Color.RED, Color.BLUE);
paint2.setShader(gradient2);
canvas.drawArc(rect2, 0, 180, true, paint2);
RectF rect3 = new RectF(50, 200, 150, 300);
Paint paint3 = new Paint();
paint3.setStrokeWidth(1);
paint3.setStrokeCap(Paint.Cap.SQUARE);
paint3.setStyle(Paint.Style.FILL);
SweepGradient gradient3 = new SweepGradient(100, 250,
Color.RED, Color.BLUE);
paint3.setShader(gradient3);
canvas.drawArc(rect3, 0, 270, true, paint3);
RectF rect4 = new RectF(200, 200, 300, 300);
Paint paint4 = new Paint();
paint4.setStrokeWidth(1);
paint4.setStrokeCap(Paint.Cap.SQUARE);
paint4.setStyle(Paint.Style.FILL);
SweepGradient gradient4 = new SweepGradient(250, 250,
Color.RED, Color.BLUE);
paint4.setShader(gradient4);
canvas.drawArc(rect4, 0, 360, true, paint4);
And here is the result:
This is surprising because I'd expect the RED to be at the start of the arc, the BLUE at the end and enything between to be spread evenly regardless of angle.
I tried to space the colors manually using the positions parameter but the results were the same:
int[] colors = {Color.RED, Color.BLUE};
float[] positions = {0,1};
SweepGradient gradient = new SweepGradient(100, 100, colors , positions);
Any idea how to solve this?
The solution for this is to set the position of BLUE. This is done like so:
int[] colors = {Color.RED, Color.BLUE};
float[] positions = {0,1};
SweepGradient gradient = new SweepGradient(100, 100, colors , positions);
The problem here is that when setting the position of BLUE to '1' this does not mean that it will be positioned at the end of the drawn arc, but instead at the end of the circle of which the arc is part of.
To solve this, BLUE position should take into account the number of degrees in the arc. So if I'm drawing an arc with X degrees, position will be set like so:
float[] positions = {0,Xf/360f};
So if X is 90, the gradient will place BLUE at 0.25 of the circle:
To add to Yoav's solution.
On my Galaxy Nexus 4.2 stock Android, the solution given doesn't work.
If the array doesn't contain a 0.0f and 1.0f, it appears to be ignored.
My final solution was:
int[] colors = {Color.RED, Color.BLUE, Color.RED};
float[] positions = {0, Xf/360f, 1};
five years later, but the right way is make 0.749f with 0.750f of the separate line, simple code is like:
val colors = intArrayOf(0xffff0000.toInt(), 0xff0000ff.toInt(), 0xffff0000.toInt(), 0xffff0000.toInt())
val positions = floatArrayOf(0.0f, 0.749f, 0.750f, 1.0f)
Using SweepGradient, you can pass null for positions (in case you want default gradient) and you can also rotate the gradient by setLocalMatrix
override fun onDraw(canvas: Canvas?) {
super.onDraw(canvas)
val centerX = width.toFloat() / 2
val centerY = height.toFloat() / 2
val paint = Paint()
paint.isAntiAlias = true
val colors = intArrayOf(Color.RED, Color.BLUE)
val gradient = SweepGradient(centerX, centerY, colors, null) // null position
val matrix = Matrix()
matrix.postRotate(270f, centerX, centerY) // rotate
gradient.setLocalMatrix(matrix)
paint.shader = gradient
val radius = 400f
val oval = RectF(centerX - radius,centerY - radius,centerX + radius,centerY + radius)
canvas?.drawArc(oval, 0f, 360f, false, paint)
}
My goal is to fill shade the outer parabola when its downward but when i used paint that's the output.
My Code
Paint lineFill = new Paint();
lineFill.setAlpha(200);
lineFill.setShader(new LinearGradient(0, 0, 0, 250, Color.WHITE, Color.GREEN, Shader.TileMode.MIRROR));
series1Format.setFillPaint(lineFill);
Pulling my hear out over this one. I have a background bitmap that I want to overlay another bitmap on top of that has transparent cutouts. I have no problem doing that if the cutout is a basic shape, but I need the cutout to be the intersection of two circles (sort of a leaf shape). I tried making a third bitmap to produce the a cutout template but I can't even get a clean representation of the cutout let alone get it to work as a cutout template.
Anyone know how to do something like this? Here is my (simplified) attempt:
#Override
public void draw(Canvas canvas) {
float w = canvas.getWidth();
float h = canvas.getHeight();
// just used to set some proportions
float off = 300f;
Paint paint = new Paint();
// make a background bitmap with a yellow to green gradient
Bitmap bitmapBkg = Bitmap.createBitmap((int) w, (int) h, Bitmap.Config.ARGB_8888);
Canvas canvasBkg = new Canvas(bitmapBkg);
paint.reset();
paint.setShader(new LinearGradient(0, h/2 - off, 0, h/2 + off, Color.YELLOW, Color.GREEN, Shader.TileMode.CLAMP));
canvasBkg.drawRect(new RectF(0, 0, w, h), paint);
// make an overlay bitmap with a red to magenta gradient which will have the cutouts
Bitmap bitmapOver = Bitmap.createBitmap((int) w, (int) h, Bitmap.Config.ARGB_8888);
Canvas canvasOver = new Canvas(bitmapOver);
paint.reset();
paint.setShader(new LinearGradient(0, h/2 - off, 0, h/2 + off, Color.RED, Color.MAGENTA, Shader.TileMode.CLAMP));
canvasOver.drawRect(new RectF(0, 0, w, h), paint);
// make a bitmap of intersecting circles to be used as the cutout shape
Bitmap bitmapCut = Bitmap.createBitmap((int) w, (int) h, Bitmap.Config.ARGB_8888);
Canvas canvasCut = new Canvas(bitmapCut);
paint.reset();
paint.setColor(Color.BLACK);
//paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.XOR));
canvasCut.drawCircle(w / 2 - (off / 2 ), h / 2, off, paint);
paint.reset();
paint.setColor(Color.BLACK);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.XOR));
canvasCut.drawCircle(w / 2 + (off / 2), h / 2, off, paint);
// apply cutout to overlay
paint.reset();
paint.setColor(Color.BLACK);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_ATOP));
canvasOver.drawBitmap(bitmapCut, 0, 0, paint);
// draw background and overlay onto main canvas
paint.reset();
paint.setColor(Color.BLACK);
canvas.drawBitmap(bitmapBkg, 0, 0, paint);
canvas.drawBitmap(bitmapOver, 0, 0, paint);
}
Here is an image of what I am getting:
What I am trying to get would have the outside portion also red-magenta; only the eye-shape in the middle should be yellow-green.
Turns out the trick was adding yet another layer.
// make a secondary overlay that cuts out the whole circles
Bitmap bitmapOver2 = Bitmap.createBitmap((int) w, (int) h, Bitmap.Config.ARGB_8888);
Canvas canvasOver2 = new Canvas(bitmapOver2);
paint.reset();
paint.setShader(new LinearGradient(0, h / 2 - off, 0, h / 2 + off, Color.RED, Color.MAGENTA, Shader.TileMode.CLAMP));
canvasOver2.drawRect(new RectF(0, 0, w, h), paint);
paint.reset();
paint.setColor(Color.BLACK);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
canvasOver2.drawCircle(w / 2 - (off / 2), h / 2, off, paint);
canvasOver2.drawCircle(w / 2 + (off / 2), h / 2, off, paint);
Applying it like so:
// draw background and overlay onto main canvas
paint.reset();
paint.setColor(Color.BLACK);
canvas.drawBitmap(bitmapBkg, 0, 0, paint);
canvas.drawBitmap(bitmapOver2, 0, 0, paint);
canvas.drawBitmap(bitmapOver, 0, 0, paint);
Basically it is a bit of a trick. It draws the mid-tier backdrop twice, once with a full circle cutouts and the other with the eye-shape cutout. The two fit together just right to pull off the desired effect.
Of course #Rotwang, you are probably right. Using Path and arcTo() would be a much better solution. The only reason I avoided that approach is b/c arcTo() is an api 21+ feature. So far I've manged to keep the api to 17+. But if anyone else would like to provide an arcTo() solution for completeness that would be cool to compare.
I'm trying to draw a half circle inside the ImageView but i can't control where draw it. The idea is to draw it inside another circle with another color using drawcircle (50, 50, 20, paint). This is the code i'm using:
<ImageView android:id="#+id/circle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10sp" />
Bitmap bmp = Bitmap.createBitmap(100, 70, Bitmap.Config.RGB_565);
ImageView circle = (ImageView) findViewById (R.id.circle);
Paint paint = new Paint();
paint.setColor(Color.RED);
Canvas canvas = new Canvas (bmp);
RectF rectf = new RectF (0, 0, 40, 40);
canvas.drawArc(rectf, 0, 180, true, paint);
Thanks.
I think the problem you are having is: you do not understand the two different representations that is used by Circle and Arc.
For Circle, you need to give it the x, y position of the center, and the radius.
but for the Arc, you need the 4 edges of the container.
so it should look something like this:
//setting for Circle
paint.setColor(Color.RED);
int xPosition=50;
int yPosition=50;
int size = 40;
canvas.drawCircle(xPosition, yPosition, size/2, paint);
//setting for Arc
paint.setColor(Color.YELLOW);
size = size * 8 / 10; // make the Arc smaller
xPosition=xPosition-size/2;
yPosition=yPosition-size/2;
RectF rectf = new RectF (xPosition, yPosition, xPosition+size, yPosition+size);
canvas.drawArc(rectf, 0+45, 180, true, paint);
The following code snippet draws a red rectangle:
RectF rectangle = new RectF(50, 100, 100, 50);
Paint paint = new Paint();
paint.setColor(Color.RED);
canvas.drawRoundRect(rectangle, 0, 0, paint);
However if i change rx and ry both to a positive value, say 5, than nothing is shown. Any ideas?
Your rectangle definition is incorrect. The parameters of a RectF are left, top, right and bottom, not x, y, width and height. Try with 50, 100, 150, 150 for instance.