I just want the shadow of an empty box. But if I give the Rect a transparent Paint color the shadow becomes transparent too. Is this possible?
Paint paint = new Paint();
//paint.setColor(0x00000000);
paint.setShadowLayer(10, 0, 0, Color.BLACK);
Rect rect = new Rect(0, 0, 100, 100);
canvas.drawRect(rect, paint);
I ended up creating a second Canvas and a second Bitmap and then merge them after I cut out some parts with PorterDuff.Mode.CLEAR. This way I create layers like in image editing applications and don't lose the background.
This is how I cut parts out:
Paint paint = new Paint();
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
Rect rect = new Rect(left, top, right, bottom);
canvas.drawRect(rect, paint);
And this is how I put the layers back together:
bottomCanvas.drawBitmap(topBitmap, 0, 0, null);
Related
How can I draw a stroke with a fill color and a (different color) border?
e.g. I want something like this:
I tried creating 2 paints - one with a Stroke style and one with a Fill style, but calling
strokePaint = new Paint();
strokePaint.setStyle(Paint.Style.STROKE);
strokePaint.setColor(Color.parseColor("#A3A3A3"));
fillPaint = new Paint();
fillPaint.setStyle(Paint.Style.FILL);
fillPaint.setColor(Color.WHITE);
canvas.drawPath(totalPath, strokePaint);
canvas.drawPath(totalPath, fillPaint);
doesn't create the intended effect and looks quite bad.
Is it even possible?
Figured it out. The trick is to draw it twice, once as a background layer that is 1-2 pixels thicker, and then the foreground layer.
i.e. :
strokePaintBackground = new Paint(Paint.ANTI_ALIAS_FLAG);
strokePaintBackground.setStyle(Paint.Style.STROKE);
strokePaintBackground.setColor(Color.BLACK);
strokePaintBackground.setStrokeWidth(8);
strokePaintBackground.setPathEffect(new DashPathEffect(new float[]{30, 15}, 0));
strokePaintBackground.setStrokeCap(Paint.Cap.ROUND);
strokePaintBackground.setStrokeJoin(Paint.Join.ROUND);
strokePaintForground = new Paint(Paint.ANTI_ALIAS_FLAG);
strokePaintForground.setStyle(Paint.Style.STROKE);
strokePaintForground.setColor(Color.WHITE);
strokePaintForground.setStrokeWidth(6);
strokePaintForground.setPathEffect(new DashPathEffect(new float[]{30, 15}, 0));
strokePaintForground.setStrokeCap(Paint.Cap.ROUND);
strokePaintForground.setStrokeJoin(Paint.Join.ROUND);
canvas.drawPath(totalPath, strokePaintBackground);
canvas.drawPath(totalPath, strokePaintForground);
I am trying to use Android's onDraw function to draw rectangles and lines with shadows around them so they can be seen on a white backgrounds. I have my Paint set up to have a shadowlayer but there is no shadow when the lines are drawn.
Here is my code for the Paint:
paint = new Paint();
paint.setColor(Color.WHITE);
paint.setStyle(Paint.Style.FILL);
paint.setTextSize(m_textSize);
paint.setAntiAlias(true);
Typeface font = Typeface.create("Times New Roman", Typeface.NORMAL);
paint.setTypeface(font);
paint.setShadowLayer(5, 0, 0, Color.BLACK);
this.setLayerType(View.LAYER_TYPE_HARDWARE, paint);
And here is my drawing code:
private void drawMark(Canvas c, float y, float size)
{
float x = (float) (getWidth()-5.0-size);
c.drawRect(x, y, x + size, y + markHeight, paint);
}
Is there something I am missing to make the shadow work for drawRect?
Please note that I am also using the canvas to draw text and the text does get the shadow effect, but shapes and lines do not.
Thanks
The shadows will only appear when you're drawing in software mode:
this.setLayerType(View.LAYER_TYPE_SOFTWARE, paint);
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);
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 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);