I am trying to draw a transparent circle on a Bitmap in android. I have three primary variables:
mask = Bitmap.createBitmap(this.getWidth(),this.getHeight(), Bitmap.Config.ARGB_8888);
Canvas can = new Canvas(mask);
Paint clear = new Paint();
If I do the following, I get my expected results:
clear.setColor(Color.TRANSPARENT);
can.drawRect(new Rect(0,0,this.getWidth(),this.getHeight()),clear);
However, if I draw something else on the canvas first, then try to clear it out with transparency, the old data remains. For example:
clear.setColor(Color.argb(255,255,0,0));
can.drawRect(new Rect(0,0,this.getWidth(),this.getHeight()),clear);
clear.setColor(Color.TRANSPARENT);
can.drawRect(new Rect(0,0,this.getWidth(),this.getHeight()),clear);
I only see a giant red square. The bottom two lines are supposed to "erase" the filled red to make it transparent again. Ultimately the mask is drawn on another canvas like this:
#Override
public void onDraw(Canvas c)
{
c.drawBitmap(mask,0,0,null);
super.onDraw(c);
}
As it turns out it does have to do with the Paint object and setting the Xfermode...
mask = Bitmap.createBitmap(this.getWidth(),this.getHeight(),
Bitmap.Config.ARGB_8888);
Canvas can = new Canvas(mask);
Paint clear = new Paint();
clear.setColor(Color.argb(255,255,0,0));
can.drawRect(new Rect(0,0,this.getWidth(),this.getHeight()),clear);
PorterDuffXfermode xfer = new PorterDuffXfermode(PorterDuff.Mode.CLEAR);
clear.setXfermode(xfer);
clear.setColor(Color.TRANSPARENT);
can.drawCircle(this.getWidth()/2, this.getHeight()/2, this.getHeight()/2, clear);
Related
I want to develop an application that takes a photograph and allows you to select a frame for photography.
I already have developed the interfaces, like taking the photo and storing it.
But I put a frame to the photo taken I could not.
Any recommendation?
In what format do you store taken photos and your frame images? If you plan to insert your picture into a simple frame, I'd suggest to first draw your taken picture on a Canvas, and then draw your frame over it. Keep in mind the sizing - you don't want your picture be too small or too big.
I'm providing an example snippet here:
public Bitmap Output(Bitmap takenPhoto, Bitmap frameImage)
{
int width, height, x, y;
height = ### // your desired height of the whole output image
width = ### // your desired width of the whole output image
x = ### // specify indentation for the picture
y = ###
Bitmap result = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas c = new Canvas(result);
Paint paint = new Paint();
c.drawBitmap(takenPhoto, x, y, paint); // draw your photo over canvas, keep indentation in mind (x and y)
c.drawBitmap(frameImage, 0, 0, paint); // now draw your frame on top of the image
return result;
}
Keep in mind that I have not tested the code and you might (actually, you'll have to) apply corrections.
Thanks for the help, I put my solution :
ImageView Resultado;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Bitmap miBitmap = Bitmap.createBitmap(1000, 1000, Bitmap.Config.ARGB_8888);
Canvas c = new Canvas(miBitmap);
Paint paint = new Paint();
c.drawBitmap(drawableToBitmap(R.mipmap.ic_launcher), 500, 500, paint); // draw your photo over canvas, keep indentation in mind (x and y)
c.drawBitmap(drawableToBitmap(R.drawable.silver_frame), 0, 0, paint); // now draw your frame on top of the image
Resultado.setImageBitmap(miBitmap);
}
public Bitmap drawableToBitmap(int imagen){
return BitmapFactory.decodeResource(getApplicationContext().getResources(), imagen);
}
I am ddrawing a circle on the bitmap and setting this bitmap to ImageView. the circle is drawn correctly but i dont want it to be a filled circle is there any way to make the filled area transparent?
i am using the following code
Bitmap bmp = RasterImageConverter.convertToBitmap(_loadedImage, ConvertToImageOptions.NONE.getValue());
Canvas c = new Canvas(bmp);
c = new Canvas(bmp);
myimgview.draw(c);
Paint p = new Paint();
p.setColor(Color.RED);
float x=(float) circleX;
float y=(float) circleY;
float Tx=(float) textX;
float Ty=(float)textY;
// c.drawLine(x, y, xend, yend, p);
c.drawCircle(300, 300, 200, p);
c.drawText(myText, Tx, Ty, p);
myimgview.setImageBitmap(bmp);
You need to inform the paint that you dont' use a fill style, but a stroke style.
The default is FILL
The Style specifies if the primitive being drawn is filled, stroked, or both (in the same color). The default is FILL.
So your code must be:
Paint p = new Paint();
p.setStyle(Paint.Style.STROKE);
Here are explained the differences between the different styles.
STROKE
Geometry and text drawn with this style will be stroked, respecting the stroke-related fields on the paint.
FILL
Geometry and text drawn with this style will be filled, ignoring all stroke-related settings in the paint.
FILL_AND_STROKE
Geometry and text drawn with this style will be both filled and stroked at the same time, respecting the stroke-related fields on the paint.
You need to change the Paint style to stroke:
Paint p = new Paint();
p.setStyle(Paint.Style.STROKE);
Use the setStyle(Paint.Style.STROKE) method on your paint p instance.
You are almost there... you need to set the style of the Paint object...
by invoking the method
p.setStyle(Paint.Style.STROKE);
The options are:
Example:
Bitmap bmp = RasterImageConverter.convertToBitmap(_loadedImage, ConvertToImageOptions.NONE.getValue());
Canvas c = new Canvas(bmp);
c = new Canvas(bmp);
myimgview.draw(c);
Paint p = new Paint();
p.setColor(Color.RED);
p.setStyle(Paint.Style.STROKE);
Bitmap newBm = ...
Canvas canvas = new Canvas(newBm);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(Color.WHITE);
paint.setTextSize((int) (44 * scale));
Rect bounds = new Rect();
paint.getTextBounds(gText, 0, gText.length(), bounds);
canvas.drawText(gText, x, y, paint);
I drew text on the Bitmap like so. How could I get a grey background that is the same height as the text but covers the whole screen??
You could use a Rect. Before drawing the text draw the Rect to the screen:
int screenWidth = getApplicationContext().getResources().getDisplayMetrics().widthPixels;
Rect greyBack = new Rect(0,top,screenWidth,bottom);
Paint paint = new Paint();
paint.setARGB(128, 100, 100, 100); //added alpha because Snapchat has translucent //grey background
canvas.drawRect(greyBack, paint);
top and bottom need to be coordinates above and below the text. You could use y's value and take away a bit for top and add a bit for bottom. How much you add/subtract is up to you and changes the height of the greyBack background.
The best way to see and learn how these sort of things are done with well written code is to look at the android source code itself. For example here is the onDraw method for a TextView it includes additional stuff you won't probably need like compoundPadding, but you can follow it through and get the basic concept of how it's done.
I have a canvas and a simple bitmap for background image, fills the whole screen. I created a rect painted black and set it's alpha to 250 in order to make a "dark" effect on the background image. My aim to make a simple circle object that reveals the place it's hovering above. I tried thinking in many ways how to excecute it and failed.
I think the best way is to create a simple circle that manages to decrease the darkness alpha on the position it hovers above, but I have no idea how to do it.
The relevant part of my code:
private ColorFilter filter = new LightingColorFilter(Color.BLACK, 1);
private Paint darkPaint = new Paint(Color.BLACK), paint = new Paint(), paint2 = new Paint();//The style of the text and dark.
public DarkRoomView(Context context) {
super(context);
myChild = this;
darkPaint.setColorFilter(filter);
darkPaint.setAlpha(250);
paint2.setAlpha(10);
paint.setAlpha(50);
}
private void loadGFX() {//Loads all of this view GFX file.
backgroundImage = BitmapFactory.decodeResource(getResources(), R.drawable.darkroomscreen);
lightImage = BitmapFactory.decodeResource(getResources(), R.drawable.light);
}
private void drawGFX(Canvas canvas) {
canvas.drawBitmap(backgroundImage, 0, 0, paint2);//The backgeound image.
canvas.drawRect(0, 0, WIDTH, HEIGHT, darkPaint);//The darkness.
canvas.drawBitmap(lightImage, 50, 50, paint);//A spotlight.
}
Any ideas how I should get it done?
Thanks!
For the spotlight, you could draw a circle of the original image over the darkness. You'd simply need to find the correct rectangle of the original image (based on where your finger is), and then draw a circle of that particular rectangle over the darkness. Trying to look "through" the darkness won't really get you anywhere; you need to place something over it.
By the time you draw the "spotlight", you've already darkened the image with the rectangle. It would be difficult to recover information lost during that draw.
A more flexible approach would be to draw a dark rectangle with a spotlight in a separate image (that is, compose the "darkness" and spotlight alpha and color mask image first), and then draw that mask image on top of the background as a separate step. This would also let you easily do things like e.g. give the spotlight fuzzy borders.
I have a picture (http://imgur.com/lIfzpWB.png) which I opening via Bitmap.decodeFile(path);.
But what I can do with my bitmap to get this picture (http://imgur.com/GHltevM.png) as result?
I think I need to apply some kind of color mask on the Bitmap. How I can do that?
UPD I used following code to achieve my result:
image.setImageDrawable(convert(original, 0x7F00FF00));
public BitmapDrawable convert(Bitmap src, int color) {
BitmapDrawable temp = new BitmapDrawable(src);
temp.setColorFilter(new LightingColorFilter(0, color));
return temp;
}
UPD I did my code work! I've just replaced new LightingColorFilter(0, color) with new LightingColorFilter(color, 0). Thank you guys for all your help!
try something like this.
Bitmap bitmap = Bitmap.decodeFile(path);
Canvas canvas = new Canvas(bitmap);
Paint paint = new Paint();
paint.setColorFilter(new LightingColorFilter(0, 0x005500));
canvas.drawPaint(paint);
This should do what you want (I haven't tried it), although the value for the lightingColorFilter will probably have to be tweaked for the effect you are trying to achieve.
you need to remove the green color channel.
you can open the file as buffered image as the variable named `imagè and then use the following code:
for(int i=0;i<image.getWidth();i++)
for(int j=0;j<image.getHeight();j++){
Color c=new Color(image.getRGB(i,j));
int pixel=c.getRed()<<16|c.getBlue();
image.setRGB(pixel);
}
the resultant `imagè will be your image with no green channel.