I'm trying to play with canvas. I could draw some triangles and fill it partially drawing a path and paint it.I used Path, Points and Line. It was a great exercise to remember trigonometry. For now I would like to do the same with a circle, as you can see below. I want set a percentage and to fill this circle until the circle's height * percentage. How could me draw a circle like that with canvas or some lib?
You should think about it a little differently. The way I'd do it is to draw a coloured rectangle (where the height is a percentage of the circle's intended height) and then crop it with a circle. This answer explains how to crop an image in a circular shape (I'd rather link than retype the code here).
I finally got do it. I created two methods. As roarster suggested, I created a white rectangle as mask where the height is a percentage of the circle's intended height.
private Bitmap drawWithPorterDuff(Bitmap original, Bitmap mask, PorterDuff.Mode mode) {
Bitmap bitmap = Bitmap.createBitmap(original.getWidth(), original.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
Paint maskPaint = new Paint();
maskPaint.setAntiAlias(true);
canvas.drawBitmap(original, 0, 0, null);
maskPaint.setXfermode(new PorterDuffXfermode(mode));
canvas.drawBitmap(mask, 0, 0, maskPaint);
Bitmap edge = BitmapFactory.decodeResource(getResources(), R.drawable.edge);
maskPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.ADD));
canvas.drawBitmap(edge, 0, 0, maskPaint);
return bitmap;
}
public Bitmap createMask(int width, int height) {
Paint paint = new Paint();
paint.setStyle(Paint.Style.FILL);
paint.setColor(Color.WHITE);
paint.setAntiAlias(true);
Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
canvas.drawRect(0, 0, width, height, paint);
return bitmap;
}
At view's constructor I created a init() method with the folling code
PorterDuff.Mode mode = PorterDuff.Mode.SRC_IN;
Bitmap original = BitmapFactory.decodeResource(getResources(), R.drawable.blue_graph);
Bitmap mask = createMask(original.getWidth(), (int) ((original.getHeight()) * (1 - percentage)));
Bitmap result = drawWithPorterDuff(original, mask, mode);
imageView.setImageBitmap(result);
Related
I have a canvas with graph, i get it from server. Sometimes the graph is not in the center. Now i want to cut off the rest part of canvas. I have the graph max and min x,y points. Ho to cut off the rest part of canvas? I can't find a solution.
First create a tempBitmap of size full width and Height like this
Bitmap tempImage = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Bitmap finalBitmap = Bitmap.createBitmap(tempImage, (int) minX, (int) minY, width, height);
here finalBitmap is that which you want.
You can draw it in canvas and also save as bitmap.
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'm trying to make a photo crop app and i want to load a large size image and scale it to to 480 Width and 800 Height (keep aspect ratio) but the problem is if i scale bitmap it shrinks image and when i save it the result get low quality so i decided to scale its canvas to keep bitmap original size.
i need to keep original size but scale the image to fit in screen?
here is my code:
public void setBitmap(Bitmap bitmap) {
finalBitmap = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888);
myCanvas = new Canvas(finalBitmap);
myCanvas.drawBitmap(bitmap, 0, 0, null);
myCanvas.scale(scaleFactor,scaleFactor);
isLoaded = true;
}
draw method:
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (isLoaded)
canvas.drawBitmap(finalBitmap, 0, 0, null);
}
i changed scalefactor with 0.9f ,480,... but non of them had effect on bitmap
Your code should look like this
canvas.save();
canvas.scale(mScaleFactor, mScaleFactor);
canvas.drawBitmap(bitmap, 0, 0, null);
canvas.restore();
Another option is to use the drawBitmap that does the scaling for you with the following call canvas.drawBitmap (Bitmap bitmap, Rect src, Rect dst, Paint paint)
I need to create simple image in my application programmatically. Simple image will have black background with text inside which is created programmatically. Is it possible?
int width = 200;
int height = 100;
Bitmap bitmap = Bitmap.createBitmap(width, height, Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
Paint paint = new Paint();
paint.setColor(Color.BLACK);
paint.setStyle(Paint.Style.FILL);
canvas.drawPaint(paint);
paint.setColor(Color.WHITE);
paint.setAntiAlias(true);
paint.setTextSize(14.f);
paint.setTextAlign(Paint.Align.CENTER);
canvas.drawText("Hello Android!", (width / 2.f) , (height / 2.f), paint);
And then do whatever you wanted to do with the Bitmap. For example:
ImageView image = new ImageView();
image.setImageBitmap(bitmap);
This depends very much on your implementation details (Java SE? Android? Restricted imports? etc)
I suggest you take a look at this StackOverflow question and see if any of the libraries linked are right for your situation.
I want to draw a shape(many circles particularly) into a Specific Bitmap.
I have never used canvas / 2D graphs etc.
Anyone that can point me to the right direction to do what i want.?
#
As i see it i create a Drawable put the bitmap in it then "canvas-it" to the shapes i want etc
but i really need some guideline
OK i sorted it out
Bitmap b=BitmapFactory.decodeResource(CON.getResources(),R.drawable.deltio);
Bitmap bmOverlay = Bitmap.createBitmap(b.getWidth(), b.getHeight(), b.getConfig());
canvas = new Canvas(bmOverlay);
Paint paint = new Paint();
paint.setColor(Color.RED);
canvas.drawBitmap(b, new Matrix(), null);
canvas.drawCircle(750, 14, 11, paint);