This is my code to draw rectangle over an image in specified position. rectangle is drawn but my problem is that now my image is not shown.
Bitmap bitmap = Bitmap.createBitmap(50, 50, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
imageView.setImageBitmap(bitmap);
Paint paint = new Paint();
paint.setColor(Color.RED);
paint.setStyle(Paint.Style.FILL_AND_STROKE);
paint.setStrokeWidth(50);
float left = 20;
float topy = 20;
float right = 50;
float bottom = 50;
canvas.drawRect(left, topy, right, bottom, paint);
Please tell anything wrong on my code ?
You have set StrokeWidth to 50. which is very huge. Either remove it or decrease. Otherwise code is fine to draw rectangle.
I tried following code.
Bitmap bitmap = Bitmap.createBitmap(50, 50, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
button.setImageBitmap(bitmap);
Paint paint = new Paint();
paint.setColor(Color.BLACK); // canvas background fill
canvas.drawPaint(paint); // just to check how big rectangle draw on canvas
//you can remove 2 above lines. its my testing
paint.setColor(Color.RED);
paint.setStyle(Paint.Style.FILL_AND_STROKE);
paint.setStrokeWidth(5); //5 instead of 50
float left = 20;
float topy = 20;
float right = 50;
float bottom = 50;
canvas.drawRect(left, topy, right, bottom, paint);
Edit
You can try following layout
<LinearLayout
android:id="#+id/linearParentHolder"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:gravity="center" >
<RelativeLayout
android:id="#+id/relativeHolder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center" >
<ImageView
android:id="#+id/imgMainImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:contentDescription="#string/app_name"
android:scaleType="fitCenter" />
<com.customview.CustomRectangleOverlayView
android:id="#+id/photoSortrView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imgMainImage"
android:layout_alignLeft="#+id/imgMainImage"
android:layout_alignRight="#+id/imgMainImage"
android:layout_alignTop="#+id/imgMainImage" />
</RelativeLayout>
</LinearLayout>
In which, two views are in RelativeLayout. One is image view, Second is your Custom View which is used to draw rectangles. Your ImageView will be overlaped with second one. Second view has transparency. So, this will look like you are drawing rectangle on original image.
try this
Bitmap bm = new BitmapFactory().decodeResource(getResources(), your_image_id, Bitmap.Config.ARGB_8888);
Bitmap bitmap = Bitmap.createBitmap(bm);
Canvas canvas = new Canvas(bitmap);
Paint paint = new Paint();
paint.setColor(Color.RED);
paint.setStyle(Paint.Style.FILL_AND_STROKE);
paint.setStrokeWidth(50);
float left = 20;
float topy = 20;
float right = 50;
float bottom = 50;
canvas.drawRect(left, topy, right, bottom, paint);
imageView.setImageBitmap(bitmap);
you need to do image first mutable and then draw rectangle on it and gain make it immutable-
bitmap3=mutableimage3.copy(Bitmap.Config.ARGB_4444,true);// mutable image.
bitmap3=mutableimage3.copy(Bitmap.Config.ARGB_4444,false);//immutable
Related
I want to create a shape like this on a canvas. I know how to draw a circle with a stroke but I want a crescent moon kind of an effect on the circle.
Here is the code of the circle:
Bitmap bitmap = Bitmap.createBitmap(50, 50, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
float mid1;
float min1,fat1,half1,rad1;
mid1 = ImageWidth / 2;
min1 = Math.min(ImageWidth, ImageHeight);
fat1 = min1 / 17;
half1 = min1 / 2;
rad1 = half1 - fat1;
mid1 = mid1 - half1;
Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setStyle(Paint.Style.FILL);
paint.setColor(color);
canvas.drawCircle(mid1 + half1, half1, rad1, paint);
The code is working perfectly for the circle. I know how to draw a stroke too but I cant create a crescent moon effect.
Set a circular clip path and then draw a second circle displaced by some quantity in both x and y.
You can refer to this view，Use Bezier curve to draw, use PorterDuff.Mode.DST_OUT to get the correct partial view (moon view).
I want to add transparent canvas on the price quote. Exactly we can see in following picture ($74). I tried to follow SO question but nothing was working for me. Here is my code:
#Override
public Bitmap transform(Bitmap bitmap) {
// TODO Auto-generated method stub
synchronized (ImageTransform.class) {
if (bitmap == null) {
return null;
}
Bitmap resultBitmap = bitmap.copy(bitmap.getConfig(), true);
Bitmap bitmapImage = BitmapFactory.decodeResource(context.getResources(), R.drawable.ic_heart);
bitmapImage = Bitmap.createScaledBitmap(bitmapImage, 50, 50, true);
Canvas canvas = new Canvas(resultBitmap);
Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setColor(Color.WHITE);
paint.setStyle(Paint.Style.FILL);
paint.setTextSize(40);
paint.setShadowLayer(2.0f, 1.0f, 1.0f, Color.BLACK);
canvas.drawText("$250", 20, 400, paint);
canvas.drawBitmap(bitmapImage, 510, 55, null);
bitmap.recycle();
return resultBitmap;
}
How can I add a transparent color or image on price section?
Edit-1
However I am able to add canvas rectangle but not at the right position
Paint paintrect = new Paint();
paintrect.setColor(Color.BLACK);
paintrect.setStyle(Paint.Style.FILL_AND_STROKE);
paintrect.setStrokeWidth(10);
float left = 20;
float top = 80;
float right = 50;
float bottom = 0;
canvas.drawRect(left, top, right, bottom, paintrect);
I got this :
You can see black rectangle on top-left of image.
You are almost there!
Paint paintrect = new Paint();
paintrect.setColor(Color.BLACK);
paintrect.setStyle(Paint.Style.FILL_AND_STROKE);
paintrect.setStrokeWidth(10);
paintrect.setAlpha(127);
float left = 18;
float top = 360;
float right = 128;
float bottom = 416;
canvas.drawRect(left, top, right, bottom, paintrect);
You will have to tweak the rectangle coordinates to get it right where you want; I estimated as best I could.
I'm trying to draw a half circle inside the ImageView but i can't control where draw it. The idea is to draw it inside another circle with another color using drawcircle (50, 50, 20, paint). This is the code i'm using:
<ImageView android:id="#+id/circle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10sp" />
Bitmap bmp = Bitmap.createBitmap(100, 70, Bitmap.Config.RGB_565);
ImageView circle = (ImageView) findViewById (R.id.circle);
Paint paint = new Paint();
paint.setColor(Color.RED);
Canvas canvas = new Canvas (bmp);
RectF rectf = new RectF (0, 0, 40, 40);
canvas.drawArc(rectf, 0, 180, true, paint);
Thanks.
I think the problem you are having is: you do not understand the two different representations that is used by Circle and Arc.
For Circle, you need to give it the x, y position of the center, and the radius.
but for the Arc, you need the 4 edges of the container.
so it should look something like this:
//setting for Circle
paint.setColor(Color.RED);
int xPosition=50;
int yPosition=50;
int size = 40;
canvas.drawCircle(xPosition, yPosition, size/2, paint);
//setting for Arc
paint.setColor(Color.YELLOW);
size = size * 8 / 10; // make the Arc smaller
xPosition=xPosition-size/2;
yPosition=yPosition-size/2;
RectF rectf = new RectF (xPosition, yPosition, xPosition+size, yPosition+size);
canvas.drawArc(rectf, 0+45, 180, true, paint);
How can I draw text on a bitmap? I made this:
float width = Converter.convertDpToPixel(250, context);
float height = Converter.convertDpToPixel(40, context);
Bitmap myBitmap = Bitmap.createBitmap((int)width + 1, (int)height+1, Bitmap.Config.ARGB_8888);
Canvas myCanvas = new Canvas(myBitmap);
Paint paint = new Paint();
Typeface tanger = Typeface.createFromAsset(context.getAssets(),"fonts/Tangerine_Bold.ttf");
paint.setAntiAlias(true);
paint.setSubpixelText(true);
paint.setTypeface(tanger);
paint.setStyle(Paint.Style.FILL);
paint.setColor(Color.BLACK);
paint.setTextSize(55);
paint.setTextAlign(Align.CENTER);
myCanvas.drawText(quote, 16, 60, paint);
return myBitmap;
but only display a part of the text and I don´t know why.
Thank you
Your Bitmap is 40px in height, while your text is drawn starting from 60px below the top of your bitmap. Since your textSize is 55 part of it is still visible. You'll probably want to increase the height of your Bitmap.
I am using the following code snippet to create a bitmap with text.
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setStyle(Style.FILL);
paint.setColor(fontColor);
paint.setTextSize(fontSize);
canvas.drawText("My Text", x, y, paint);
Here's the catch. How do I determine the size of the Bitmap to use in the canvas beforehand? For instance if I want a bitmap with "Hello World!" on it, I want to find the width and height of it even before I draw the text on the canvas.
You can tyr this:
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
Rect bounds = new Rect();
paint.setStyle(Style.FILL);
paint.setColor(fontColor);
paint.setTextSize(fontSize);
paint.getTextBounds("My Text", 0, "My Text".length(), bounds);
int width = bounds.width();
int height = bounds.height();
canvas.drawText("My Text", x, y, paint);
Try this, it loads the bitmap, then gets the heigth and width, then you just have to draw it. Replace bitmap with your image name
bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.bitmap);
bitmapHeigth = bitmap.getHeigth();
bitmapWidth = bitmap.getWidth();