I want to say that maybe (probably) the word 'layer' is not the correct one, but I believe it gives the correct idea of what I want to do.
I am using a SurfaceView which implements SurfaceHolder.Callback.
I am working on a canvas. I am drawing a quite complex set of points.
I have the canvas translated, rotated and scaled (translateX and translateY are variable that changes when the user interacts with the canvas):
canvas.translate(0, 0);
canvas.rotate(-90);
canvas.translate(translateX, translateY);
canvas.scale(scaleX, scaleY);
My next step is to add text and images on top of this canvas.
Both the text and the images should not be scaled nor rotated, only translated (they should follow the canvas).
For this reason I was thinking about having some sort of 'layer' or something similar transparent which only follows the canvas movements and does not change on zoom in or zoom out or on rotation [think them as some sort of UI which stay over the whole canvas].
EDIT:
Here is a snippet:
#Override
public void onDraw(Canvas canvas) {
try{
pt.setColor(Color.BLACK);
canvas.drawColor(Color.WHITE);
canvas.drawText("HELLOOOOOOOOOOOOOOOO", 100, 10, pt);
pt.setAntiAlias(true);
canvas.save();
canvas.rotate(-90, 0, 0);
canvas.drawText("HELLOOOOOOOOOOOOOOOO", getHeight(), 10, pt);
canvas.restore();
}
catch(Exception e)
{}
}
I want the two 'HELLOOOOOO' to appear close to each other. I can't figure out how to.
Why not use save() and restore() so that after all your canvas is "normal" again. Than you can draw on it easily?
Save and restore working like a SceneGraph, if you have heard of it.
I managed to fix this. I simply rotated the canvas using:
rotate(+90, X, Y);
and then rotated back
rotate(-90, X, Y);
Doing this, the (X,Y) coordinates remain the same.
Related
I've written a custom view that displays text in the center of the screen as seen below.
I've also made it so that if you touch the green box you can rotate and scale the text as seen below.
Heres the problem.
Whenever I rotate the text and let go, then try to rotate again it cant detect that the rect is being touched using myRect.contains(X,Y).
After some time I found that after its rotated, and touch where the original green box was, it allows me to rotate again.
OnTouchEvent is obviously calculating the Rects position correctly since it drawing in the correct location. I just can figure out why the touch coordinates seem to be referencing old positions.
Here's my onDraw() method.
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.save();
canvas.rotate((float)mAngle, mBorderRect.centerX(), mBorderRect.centerY());
canvas.drawRect(mBorderRect, mTextBorderPaint);
canvas.drawText(mText, mBorderRect.left, mBorderRect.bottom, mTextPaint);
canvas.drawRect(mResizeRect, mBGPaint);
canvas.restore();
}
Remember that you're rotating the canvas, not the Rect. To get this to work you'll have to apply the inverse rotation on the touch position first, then compute myRect.contains(X,Y).
I am creating a custom view that extends the TextView. What I need is a couple of labels on the left handside and another checker on the right hand side of the TextView.
So I can draw those labels and then save the canvas and translate it right so that the text can be drawn beside the bitmaps. This is how I am doing that.
canvas.drawBitmap(bitmap1, 0, top, paint);
canvas.drawBitmap(bitmap2, bitmap1_width, top, paint);
canvas.save();
canvas.translate(bitmap1_width + bitmap2_width, 0);
Here I want to call super.onDraw but ask it to use the width so that the widths of the two bitmaps and the checker are subtracted.
Then I am can call my
canvas.drawBitmap(checker, checkerLeft, top, null);
So after translating the canvas, how can I can tell the canvas in the super.onDraw to use only the measured width? Please feel free to throw in any alternatives. I do want to use canvas though since my requirement is a little more complicated than this example.
Ok I did it by changing the scale factor using canvas.scale(sx, sy) before calling super.onDraw().
This is displaying the text in the way I want. If there is a better answer, please post it.
canvas.save();
canvas.translate(margin, 0);
canvas.scale(scaleX, 1f);
super.onDraw(canvas);
canvas.restore();
I'd like to draw an oval, but I'd like to be able to rotate it. I know that I can use canvas.drawOval(...) and canvas.rotate(...). However, I want to just rotate my oval and not the whole canvas; that is, I want to rotate my oval before draw it to the canvas.
I have successfully rotated a rect by manipulating the coordinates before drawing it, but that approach isn't working for me with the oval.
There's canvas.save() and canvas.restore() to serve that purpose - i.e.
canvas.save();
canvas.rotate(90);
canvas.drawOval(....);
canvas.restore();
....//do other drawing
So my aim is to flip an image horizontally then draw it on a canvas. Currently I'm using canvas.scale(-1,1) which effectively works and draws the image horizontally, however it also screws with the x axis values where before the scale the x position would be 150 and after I'd have to switch it to -150 to render in the same spot.
My question is, how can I make it so the x value is 150 in both cases without having to adjust the x position after the scale? Is there a more effective way to do this without taking a hit on performance?
I know this question is old, but I happened to bump into the same problem. In my situation, I had to flip the canvas when drawing on a class extending an ImageButton. Fortunately, the solution for this specific case was more elegant than I thought. Simply override the onDraw(Canvas) method as follows:
#Override
protected void onDraw(final Canvas canvas) {
// Scale the canvas, offset by its center.
canvas.scale(-1f, 1f,
super.getWidth() * 0.5f, super.getHeight() * 0.5f);
// Draw the button!
super.onDraw(canvas);
}
I've fixed this by applying the transformation to the bitmap prior to ever using it like this:
public void applyMatrix(Matrix matrix) {
mBitmap = Bitmap.createBitmap(mBitmap, 0, 0,
mBitmap.getWidth(), mBitmap.getHeight(), matrix, true);
}
...
Matrix matrix = new Matrix();
matrix.preScale(-1, 1);
mSprite.applyMatrix(matrix);
Did you try repeating the canvas.scale(-1, 1)? It will effectively remove the transformation, since two negatives make a positive.
I'm used to handle graphics with old-school libraries (allegro, GD, pygame), where if I want to copy a part of a bitmap into another... I just use blit.
I'm trying to figure out how to do that in android, and I got very confused.
So... we have these Canvas that are write-only, and Bitmaps that are read-only? It seems too stupid to be real, there must be something I'm missing, but I really can't figure it out.
edit: to be more precise... if bitmaps are read only, and canvas are write only, I can't blit A into B, and then B into C?
The code to copy one bitmap into another is like this:
Rect src = new Rect(0, 0, 50, 50);
Rect dst = new Rect(50, 50, 200, 200);
canvas.drawBitmap(originalBitmap, src, dst, null);
That specifies that you want to copy the top left corner (50x50) of a bitmap, and then stretch that into a 150x150 Bitmap and write it 50px offset from the top left corner of your canvas.
You can trigger drawing via invalidate() but I recommend using a SurfaceView if you're doing animation. The problem with invalidate is that it only draws once the thread goes idle, so you can't use it in a loop - it would only draw the last frame. Here are some links to other questions I've answered about graphics, they might be of use to explain what I mean.
How to draw a rectangle (empty or filled, and a few other options)
How to create a custom SurfaceView for animation
Links to the code for an app with randomly bouncing balls on the screen, also including touch control
Some more info about SurfaceView versus Invalidate()
Some difficulties with manually rotating things
In response to the comments, here is more information:
If you get the Canvas from a SurfaceHolder.lockCanvas() then I don't think you can copy the residual data that was in it into a Bitmap. But that's not what that control is for - you only use than when you've sorted everything out and you're ready to draw.
What you want to do is create a canvas that draws into a bitmap using
Canvas canvas = new Canvas(yourBitmap)
You can then do whatever transformations and drawing ops you want. yourBitmap will contain all the newest information. Then you use the surface holder like so:
Canvas someOtherCanvas = surfaceHolder.lockCanvas()
someOtherCanvas.drawBitmap(yourBitmap, ....)
That way you've always got yourBitmap which has whatever information in it you're trying to preserve.
In android you draw to the canvas, and when you want it to update you call invalidate which will the redraw this canvas to the screen. So I'm guessing you have overridden the onDraw method of your view so just add invalidate();
#Override
public void onDraw(Canvas canvas) {
// Draw a bitmap to the canvas at 0,0
canvas.drawBitmap(mBitmap, 0, 0, null);
// Add in your drawing functions here
super.onDraw(canvas);
// Call invalidate to draw to screen
invalidate();
}
The above code simply redraws the bitmap constantly, of course you want to add in extra thing to draw and consider using a timing function that calls invalidate so that it is not constantly running. I'd advice having a look at the lunarlander sources.