I have a Paint object that contains a linear gradient like this:
init{
this.myPaint.shader = LinearGradient(0f, 0f, 0f, 15f, 0xFF1F9928.toInt(), 0xFF184F1E.toInt(), Shader.TileMode.MIRROR);
}
And i use it to draw a health bar for my character like this:
canvas.drawRect(x, y, x + 100f * fill, y + 15f, this.myPaint)
This work well. But when the character moves with the camera the gradient stays at its original place. This results in the health bar changing color based on its position.
How can i make the gradient stay fixed to the health bar, instead of the global coordinate system?
Never used LinearGradient myself however from what I can tell from the documentation. You will have to configure the shader every time you call drawRect. The gradient stays in the initial position because the gradient's coordinates never change.
Changes needed:
// pass appropriately the coordinates you want here
this.myPaint.shader = LinearGradient(0f, 0f, 0f, 15f, 0xFF1F9928.toInt(), 0xFF184F1E.toInt(), Shader.TileMode.MIRROR);
canvas.drawRect(x, y, x + 100f * fill, y + 15f, this.myPaint)
Be careful about creating object creation onDraw.
I found a solution.
You have to translate the canvas, and draw your gradient at (0, 0) position. Then restore the canvas back.
canvas.save()
canvas.translate(x, y)
canvas.drawRect(0, 0, 100f * fill, 15f, this.myPaint)
canvas.restore()
This is the correct way to do it.
Related
I am new to OpenGL, and have recently successfully drawn my first shapes with the guide on the Android Developers website. Right now I am trying to only focus on the upper half of the graph on my OpenGL 2D rendering. So as you guys know, right smack in the middle of the screen is (0,0). However now I want the origin to be at the middle of the bottom of the screen, while maintaining the y axis 0.5f value to be at the middle of the screen and 1f at the top of the screen. In essence, the negative y axis portion is not in view.
These are the coordinates of my square:
float squareCoords[] = {
// x , y , z
-0.5f, 0.5f , 0.0f //top left
-0.5f, 0f , 0.0f //bottom left
0.5f, 0f , 0.0f //bottom right
0.5f, 0.5f , 0.0f //top right
};
This is how I want the square to look on the screen
Ive tried using the camera to focus view but it makes the view bigger(the max y-value and x-value increases, and the object becomes smaller) in the renderer class:
Matrix.setLookAtM(viewMatrix,0,0,0.5f,3,0f,0.5f,0f,0f,1.0f,0.0f)
Does it have something to with GLES20.glViewport? The best I can come up with from online research is a function ortho2d() but it seems like Android Studio does not support it. Any help appreciated.Thanks!
You can use Matrix.orthoM
Matrix.orthoM(
projectionMatrix, 0,
left, right,
bottom, top,
near, far
);
And multiply it with viewMatrix set with Matrix.setLookAtM to obtain View-Projection matrix:
Matrix.multiplyMM(
vpMatrix, 0,
projectionMatrix, 0, viewMatrix, 0
);
Then use vpMatrix in your shader
void main() {
gl_Position = u_VpMatrix * a_Position;
}
...
int uVpMatrix = glGetUniformLocation(program, "u_VpMatrix");
...
glUniformMatrix4fv(uVpMatrix, 1, false, vpMatrix, 0);
Found the soln after further trial and error
In the renderer class at onSurfaceChanged(GL10 unused, int width ,int height){
//edit the Matrix.frustumM method, value for parameter bottom should be set to 0
Matrix.frustumM(projectionMatrix,0,left,right,bottom,top,near,far)
}
Should help with people who want to change the position of their origins to any other location as well, simply change the left,right,top,bottom values.
or refer to this stackoverflow: Set origin to top-left corner of screen in OpenGL ES 2
for other possible solutions.
I want to draw smooth semicircle with drawArc() method. But what I get is:
RectF oval = new RectF(x - cornerRadius, y - cornerRadius, x + cornerRadius,y + cornerRadius);
canvas.drawArc(oval, start, 180, true, cornerPaint);
What's wrong with my code?
The problem has gone after I have created Paint from zero, not copying it from another Paint. Seems like another paint had parameters that affected line shape.
I am trying to draw a heart shaped Canvas using Path in Android. The code is as follows :
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// Fill the canvas with background color
canvas.drawColor(Color.WHITE);
// paint.setShader(null);
// Defining of the heart path starts
path.moveTo(left + WIDTH / 2, top + HEIGHT / 4); // Starting point
// Create a cubic Bezier cubic left path
path.cubicTo(left+WIDTH/5,top,
left+WIDTH/4,top+4*HEIGHT/5,
left+WIDTH/2, top+HEIGHT);
// This is right Bezier cubic path
path.cubicTo(left + 3 * WIDTH / 4, top + 4 * HEIGHT / 5,
left + 4 * WIDTH / 5, top,
left + WIDTH / 2, top + HEIGHT / 4);
paint.setShader(new LinearGradient(0, canvas.getHeight()/4, canvas.getWidth(), canvas.getHeight()/4, new int[]{Color.RED, Color.YELLOW, Color.GREEN}, new float[]{0, 0.6f, 1}, Shader.TileMode.CLAMP));
canvas.drawPath(path, paint);
heart_outline_paint.setColor(getResources().getColor(R.color.heart_outline_color)); // Change the boundary color
heart_outline_paint.setStrokeWidth(4);
heart_outline_paint.setStyle(Paint.Style.STROKE);
canvas.drawPath(path, heart_outline_paint);
}
I am able to draw heart without any issue and I am able to fill color inside the heart using the Fill option in Paint. But I should be able to fill the heart dynamically according to some data and it cannot be filled fully all the time. What I have achieved so far is as follows :
I have made an extensive search and came across a lot of things similar to this. Some of which includes :
Android fill in part of a path?
filling a circle gradually from bottom to top android
I also came across the concept of converting the canvas to bitmap and filling color inside the bitmap using Flood Fill Algorithm which lets users to fill colors inside the bitmap. However, I do not want the bitmap to fill the color while touching inside the heart but to fill while a button click action.
I thought that filling a circle gradually from bottom to top android
would give help me but it makes use of a circle and I am not well-versed in Canvas which makes me very weak in adapting the circle code to such a shape.
If anybody has some ideas or any insights on how to achieve this, it will be really helpful. Cheers. Thanks in advance.
P.S : I also tried some tricks using setShader in Paint but nothing would give me what I want.
EDIT :
I just stumbled upon a idea of drawing a rectangle over the heart with another color same as the background of the canvas so that it will look like its half filled !! I am still working on the idea and not sure how accurate this is gonna be for me. If someone has a better idea, you're most welcome.
I used clipPath function available in Canvas to achieve what I needed. I draw the heart by above method and draw a rectangle over it, and I use the clipPathfunction to clip out the region that is outside the heart.
public static double filled_amount = .90;
path.moveTo(left_x_moveto, left_y_moveto);
path.cubicTo(left_x1, left_y1, left_x2, left_y2, left_x3, left_y3);
path.cubicTo(right_x2, right_y2, right_x1, right_y1, left_x_moveto, left_y_moveto);
path.close();
Rect rect = new Rect((int)(canvas.getWidth()*.10),(int)(canvas.getHeight()*filled_amount),(int) canvas.getWidth(), (int) canvas.getHeight());
canvas.clipPath(path);
paint.setColor(Color.WHITE);
paint.setStyle(Paint.Style.FILL);
canvas.drawPath(path, paint);
canvas.drawRect(rect, rect_paint);
heart_outline_paint.setColor(getResources().getColor(R.color.heart_outline_color)); // Change the boundary color
heart_outline_paint.setStrokeWidth(15);
heart_outline_paint.setStyle(Paint.Style.STROKE);
canvas.drawPath(path, heart_outline_paint);
This will give me the desired result of filling the heart dynamically. Changing the value of filled_amount dynamically and calling invalidate() will make it look like the heart is being filled dynamically.
#Henry's answer might be a better one but this did the trick for me and I dont look deeply in to the edges so a bit of zig-zags here and there is all right.
You could use Bitmap Masking to get a partially filled Heart. What you ideally do here is use one bitmap to mask the other.
In your case you could have a filled rectangle in the canvas and you have then have the heart shape in a new bitmap to act as the mask. You could then dynamically change the filling of the heart by changing the height of the background rectangle.
Refer this: https://stackoverflow.com/a/33483600/4747587. This contains the implementation of partially filling a Star. The idea is the same.
Everytime I use this code nothing is drawn. I need to draw a bitmap inside of a specified rectangle.
canvas.drawBitmap(MyBitmap, null, rectangle, null)
I've looked online but can't find much help.
EDIT
The original answer is incorrect.
You can use the sourceRect to specify a part of a Bitmap to draw.
It may be null, in which case the whole image will be used.
As per the fryer comment he was drawing beneath something, I'll add a note on that.
drawBitmap(bitmap, srcRect, destRect, paint)
does not handle Z ordering (depth) and the order of calling draw on object matters.
If you have 3 shapes to be drawn, square, triangle and circle. If you want the square to be on top then it must be drawn last.
You're not specified any source, so its not drawn anything.
Example:
You have a Bitmap 100x100 pixels. You want to draw the whole Bitmap.
canvas.drawBitmap(MyBitmap, new Rect(0,0,100,100), rectangle, null);
You want to draw only the left half of the bitmap.
canvas.drawBitmap(MyBitmap, new Rect(0,0,50,100), rectangle, null);
You need to specify the source rect, the source rect can be a rectangle anywhere from 0,0 to the width,height of the bitmap.
The main item to remember when defining the Rect is:
left < right and top < bottom
The rect is in screen coordinates (positive Y downward) ...
I find it helpful to think of the Rect arguments
(left, top, right, bottom)
as
(X, Y, X + Width, Y + Height)
where X,Y is the top left corner of the sprite image.
NOTE: If want to center the image on a particular location, remember to offset those values by half the sprite width & height. For example:
int halfWidth = Width/2;
int halfHeight = Height/2
Rect dstRectForRender = new Rect( X - halfWidth, Y - halfHeight, X + halfWidth, Y + halfHeight );
canvas.drawBitmap ( someBitmap, null, dstRectForRender, null );
This uses the whole original image (since src rect is null) and scales it to fit the size and position from dstRectForRender ... and using the default Paint.
I dont know why but this worked for me!
Rect rectangle = new Rect(0,0,100,100);
canvas.drawBitmap(bitmap, null, rectangle, null);
Thanks:)
I'm writing a custom View, but I can't really figure out how to use clipRect on a Canvas. I need this because I'm calling draw(Canvas) on another object and I'd like to give it my own (clipped) Canvas. My current solution is:
StaticLayout sl = new StaticLayout(text, tp, (int) (rect.right - rect.left), Alignment.ALIGN_NORMAL, 1f, 0f, true);
Bitmap layoutBitmap = Bitmap.createBitmap((int) (rect.right - rect.left), (int) (rect.bottom - rect.top), Config.ARGB_8888);
Canvas layoutCanvas = new Canvas(layoutBitmap);
sl.draw(layoutCanvas);
canvas.drawBitmap(layoutBitmap, null, rect, null);
However, this feels dirty, creating a new bitmap and a new canvas every time (I'm using this method to draw text in a box, see my previous question).
What I'd like to do is something like this:
StaticLayout sl = new StaticLayout(text, tp, (int) (rect.right - rect.left), Alignment.ALIGN_NORMAL, 1f, 0f, true);
canvas.save();
canvas.clipRect(rect, Region.Op.REPLACE);
sl.draw(canvas);
canvas.restore();
That "feels" much better, except that it doesn't work. Am I using clipRect wrong? Do I not understand what it's actually for or how to use it? Please advise.
P.S. My understanding of clipRect is that after that clipRect call, 0, 0 should actually translate to rect.left, rect.top.
After a bit of experimenting, it seems that clipRect only restricts drawing to the given rect, so that any draw calls outside that rect will be clipped to that rect. Thus, my understanding of clipRect was wrong.
This means that, in order to use StaticLayout I'd have to first draw it to a Bitmap that is the size of my rect and then draw that Bitmap to my Canvas at the coordinates I need.
However, I have resorted to using Canvas.drawText and TextPaint.breakText instead (so I don't have to create a Bitmap everytime).