I have a custom view with the following drawing code:
#Override
protected void onDraw(Canvas canvas)
{
super.onDraw(canvas);
canvas.drawColor(Color.BLACK);
mPaint.setColor(Color.GREEN);
canvas.drawRect(0, 0, 100, 100, mPaint);
mPaint.setColor(Color.BLUE);
canvas.drawCircle(100, 100, 100, mPaint);
}
This should draw a square, and then a circle that is twice the size of the square, centred on one of its corners. Instead the circle is the same size as the square.
In other words. It should look like the image on the left, but it actually looks like the image on the right. What gives?
Ok, after testing, this appears to be a bug in the GUI layout editor. I was assuming this would match the results on the device since they actually run the code... and it's a very weird bug that it only affects circles!
Also it is a more complicated bug than just doubling the values. Sometimes drawCircle() draws an ellipse!
Anyway it works as expected on the device.
Related
let's get straight to the point, I was making an android game and I decided to try and use some more android methods like Rect and Path so I can experiment and learn how they work. (in the past I used only bitmaps to draw graphics)
As I was making the game I noticed some weird coloring on my rects, so I tried a lot of things, I made sure my rects are initialized properly and I also tried to simplify my code to make sure the problem was caused there.
For debug purposes my code draws a white square on the top left side of the screen, a black on the top right, and a gray one on the bottom, this is the code:
Paint pGray, pWhite, pBlack;
public myClass()
{
paintGray = new Paint();
paintGray.setARGB(255, 125, 125, 125);
paintWhite = new Paint();
paintWhite.setARGB(255, 255, 255, 255);
paintBlack = new Paint();
paintBlack.setARGB(255, 0, 0, 0);
}
public void draw(Canvas canvas)
{
canvas.drawRect(0, screenHeight/2, screenWidth, screenHeight, paintGray);
canvas.drawRect(0, 0, screenWidth/2, screenHeight/2, paintWhite);
canvas.drawRect(screenWidth/2, 0, screenWidth, screenHeight/2, paintBlack);
}
(I don't know if it matters but it runs on another Thread)
When I run it on my phone and save a screenshot using Android Studio the screenshot looks like this:
which is t he desired result, the problem is that my phone doesn't display the graphics properly and here is a photo:
As you can see the gray square has 2 colors inside it, a darker and a lighter one. It happens on both phones that I have and I have no idea what it is, even weirder is that saving the screenshot doesn't show this problem!!
I also noticed the colorization changes based on the white square, if I make it bigger or smaller the gray square changes its color where the white box ends.
Another thing I noticed is that these lines of "decolorization" (with multiple white boxes, multiple lines appear) on the gray square is vertical on landscape mode, but on portrait it becomes horizontal.
I've been torturing my self for so much time with this, I have commented out my whole application to try and see why it happens, if I'm missing something or anyone knows anything please let me know!
I don't think it's a software bug. My guess would be that that's the way the display is rendering colors.
I am trying to draw multiline text to a bitmap with the font Latto-Reg, and StaticLayout seems to have problems with it.
paint.setTextSize(label.fontSize);
paint.setTypeface(face);
StaticLayout textLayout = new StaticLayout(label.text, paint, (int)StaticLayout.getDesiredWidth(label.text, paint), Alignment.ALIGN_NORMAL, 1.0f, 0.0f, false);
Bitmap bitmapAux = Bitmap.createBitmap(textLayout.getEllipsizedWidth(), textLayout.getHeight(), Bitmap.Config.ALPHA_8);
canvas.setBitmap(bitmapAux);
canvas.save();
canvas.translate(0, textLayout.height());
textLayout.draw(canvas);
canvas.restore();
The texture has padding on top and bottom depending on the font and size, while the text fits perfectly in the bitmap it is a lot of wasted memory space and makes laying it out to be off by a random amount.
I tested using single-line drawing and the bitmap was perfectly fitting the text
paint.getTextBounds(label.text, 0, label.text.length(), rect);
Bitmap bitmapAux = Bitmap.createBitmap(rect.width(), rect.height(), Bitmap.Config.ALPHA_8);
canvas.drawText(label.text, -rect.left, -rect.bottom, paint);
I have tried getting all kinds of metrics from StaticLayout and all of them seem to be off from the text: line 0 bounds, line 0 top, last line bottom...leading to the same padding problems.
EDIT:
I solved the problem by using offset-based single line drawing. Still the StaticLayout class was drawing incorrectly with several different non-standard fonts and I want to know why.
Looking at the android developper page, it looks like it's designed to handle both the multi-line case and being used next to another Layout well, and hence there is space on top of the line of text so that if you place it directly below another Layout it will be correctly spaced. In essence, it's just not designed for what you are trying to achieve.
Overall, it may be easier to get the Text bounds from Paint.getTextBounds() to know what the extent of the text will be within the Layout.
I've created a minimal working example of what I think you're trying to accomplish: creating a bitmap precisely large enough to contain the text rendered through a StaticLayout.
It seems that there are a few things wrong with your code:
You're needlessly translating vertically inside the bitmap;
There doesn't appear to be a height() method for StaticLayout.
Here's my result:
I added a green background to illustrate the size of the bitmap, but otherwise, my code differs very little from yours:
public void createTexture() {
int width = textLayout.getEllipsizedWidth();
int height = textLayout.getHeight();
bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas canvas2 = new Canvas(bitmap);
Paint p2 = new Paint();
p2.setStyle(Style.FILL);
p2.setColor(Color.GREEN);
canvas2.drawRect(0, 0, width, height, p2);
textLayout.draw(canvas2);
}
I created a very simple custom component to draw the bitmap:
#Override
protected void onDraw(Canvas canvas) {
canvas.drawBitmap(bitmap, 0, 0, paint);
}
It seems that perhaps you're translating to draw multiple textures after one another. I'd recommend that you do so in your draw method instead, translating vertically in the height of the previous texture after drawing it.
I'm trying to achieve the same results as per thread:
Make certain area of bitmap transparent on touch.
I'm stick to code presented in this answer: Lumis answer and acording to SteD this solution should work.
Unfortunately is not working for me (and also for another user: Make certain area of bitmap transparent on touch doesn't works, it's draw a black circle), I'm just getting black circle.
I tried many things but not get this solve. Make background transparent as per suggestion from second thread do not make any difference.
After many experiments I found that transparency is working, when I'm set this
android:theme="#android:style/Theme.Translucent"
in my AndroidManifest.xml I can see everything under my application i.e. desktop.
I went through code many times and cant see obvious mistake, only reason I thinking is cause this is Z order, but bitmaps and canvas do not maintenance z orders. Z ordering is done by drawing in certain order (which is correct in this code).
Is this some strange example of optimisation in android code, or I'm missing something in android manifest file?
Finally I found solution that's working:
#Override
public void onDraw(Canvas canvas){
super.onDraw(canvas);
//draw background
canvas.drawBitmap(bgr, 0, 150, null);
//copy the default overlay into temporary overlay and punch a hole in it
c2.drawBitmap(overlayDefault, 0, 0, null); //exclude this line to show all as you draw
c2.drawCircle(X, Y, 80, pTouch);
//draw the overlay over the background
//canvas.drawBitmap(overlay, 0, 0, null);
Paint new_paint = new Paint(/*Paint.ANTI_ALIAS_FLAG*/);
new_paint.setXfermode(new PorterDuffXfermode(Mode.SRC_ATOP));
canvas.drawBitmap(overlay, 0, 0, new_paint);
}
But I don't understand why is working. I was investigate xfermodes with this source code: android Xfermodes demo and according to this image: Xfermodes image
It not make any sense, apart that xfermode make sure that overlay bitmap is bean drawn second (Z order) and transparency came to play. But Z order should be maintained by drawing order.
If somebody have better idea how to solve this, please share your knowledge.
Regards.
you can edit onDraw() method:
public void onDraw(Canvas canvas){
super.onDraw(canvas);
canvas.drawColor(Color.TRANSPARENT);
canvas.drawBitmap(bgr, 0, 0, null);
c2.drawCircle(X, Y, 10, pTouch);
Paint new_paint = new Paint(/*Paint.ANTI_ALIAS_FLAG*/);
new_paint.setXfermode(new PorterDuffXfermode(Mode.SRC_ATOP));
canvas.drawBitmap(overlay, 0, 0, new_paint);
}
I tried and it worked !
Hope this solution helps you
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.
I followed some other questions on the topic, and also API demos on XferModes, and attempted to create an ImageView that masks its content according to an alpha mask.
The alpha bitmap contains 0 alpha for areas to be hidden and 255 alpha for areas to be shown.
This is the onDraw code:
#Override
protected void onDraw(Canvas canvas)
{
super.onDraw(canvas);
Paint paint = new Paint();
paint.setFilterBitmap(false);
paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));
canvas.drawBitmap(mMaskBitmap, 0, 0, paint);
paint.setXfermode(null);
It doesn't work for me. If I put SRC_IN, the mask just gets drawn on top. If I put DST IN, I just see the original image.
Any advice?
The problem was solved, I discovered that the ImageView and the mask bitmap's size had a difference of 4 pixels, which caused the whole thing to silently malfunction... Weird that there was no exception thrown.
Anyway, the above code works, provided that the mask size <= the ImageView size.