I'm trying to find a way to implement a shape (a rectangle) that can be moved over an image. The user would drag the rectangle to an area in the image, as to eventually select it.
How can this be done? What should I use? Any help would be appreciated!
Use canvas
choosenImageView = (ImageView) this.findViewById(R.id.ChoosenImageView);
canvas = new Canvas(bitmap); //Bitmap
mBitmapPaint = new Paint();
mBitmapPaint.setAntiAlias(true);
mBitmapPaint.setStyle(Paint.Style.STROKE);
mBitmapPaint.setStrokeWidth(5);
choosenImageView.setOnTouchListener(this);
Related
I have tried the solution suggested here Android: How to overlay-a-bitmap/draw-over a bitmap?. I seems to work but I obtained a slightly disoriented image from it.
before-overlay
after-overlay
I have set my edit icon to toggle between start and stop drawing on canvas. When the user stops drawing, I retrieve the canvas bitmap and the imageView and overlay canvas bitmap on the imageView.
As can be seen from the screenshots, the imageView is the laptop image and canvas bitmap is the up arrow I drew.
Here is my overlay function.
private Bitmap overlay(Bitmap bmp1, Bitmap bmp2) {
Bitmap bmOverlay = Bitmap.createBitmap(bmp1.getWidth(), bmp1.getHeight(), bmp1.getConfig());
Canvas canvas = new Canvas(bmOverlay);
canvas.drawBitmap(bmp1, new Matrix(), null);
canvas.drawBitmap(bmp2, new Matrix(), null);
return bmOverlay;
}
I am new to android and would appreciate some help in this regard.
Thanks!
i think you can use something like this to achieve what you want :
Paint paint = new Paint(Paint.FILTER_BITMAP_FLAG);
Canvas result = new Canvas(underlayBitmap);
result.drawBitmap(overlayBitmap, left, top, paint);
you can give the top side and left side where you want your overlay to be drawn.
hope this helps.
The most easier way to do that without go deeper with graphics libs is using FrameLayout, with this layout you can place one view above the other in order as they are added to the layout, example:
<FrameLayout>
<ImageView android:id="#+id/imageView1" />
<ImageView android:id="#+id/imageView2" />
</FrameLayout>
In example above imageView2 will overlap imageView1, this is so far the fastest way to overlay one image with another. This approach allows to place any descendant of View above another one.
I want to crop shape in Hexagon,Octagon and in circle shape.I have used Custom Image view class and use in xml for showing image. It works properly for different shapes.
Now i need to crop the image in user selected shape in next activity.i get image in next activity.
I tried this example:
Masking(crop) image in frame But the image didn't fit in shape.only part of the image get masked.
How i can achieve this?
Read this blog post by Romain Guy on how to make images with rounded corners. Using this technique you can create a variety of shapes.
How would this work?
If you have a predefined number of shapes, I'd suggest you create a class with a few Shapes defined by Paths. Now whenever your user asks for a different shape to be used on an ImageView, you create a Bitmap and return a bitmap from that class and put it on your ImageView.
For example a octagon shape would be something like this:
public static Bitmap drawOctagonShapedBitmap(Bitmap src) {
Bitmap dst = Bitmap.createBitmap(src.getWidth(), src.getHeight(), Bitmap.Config.ARGB_8888);
//Create an output as big as the actual bitmap.
Path octagon = null; //Create an octagon shape, it should be big enough to crop enough of the bitmap.
Canvas canvas = new Canvas(dst);
Paint mPaint = new Paint();
BitmapShader mBitmapShader = new BitmapShader(src, Shader.TileMode.CLAMP,
Shader.TileMode.CLAMP);
mPaint.setAntiAlias(true);
mPaint.setShader(mBitmapShader);
canvas.drawPath(octagon, mPaint);
return dst;
}
I have a custom view that is showing an image inside a shape.
I used BitmapShader to fit my image into the shape with TileMode is CLAMP
Now I have a problem that when I am moving my image (using setLocalMatrix method) it make my image become terrible.
here is my image when moving around:
Here is my code:
BitmapShader shader=new BitmapShader(sbmp, TileMode.CLAMP, TileMode.CLAMP);
Matrix currMatrix = new Matrix(this.getMatrix());
currMatrix.postTranslate(currX, currY);
shader.setLocalMatrix(currMatrix);
mpaint.setShader(shader);
You can translate image with instead of localMatrix
int i = canvas.save();
canvas.translate(currX, currY);
//Here draw image
canvas.restoreToCount(i);
Hello and sorry for my bad English.
On my application, onDraw() method draws 10x10 field with lines using canvas.
Then, in other method I want some cells to be painted in yellow for example.
The code is:
Paint ship = new Paint();
ship.setColor(getResources().getColor(R.color.ship_color));
Canvas canvas = new Canvas();
Rect r = new Rect(x*(rebro_piece),y*rebro_piece, x*(rebro_piece+1), y*(rebro_piece+1));
canvas.drawRect(r, ship);
but nothing happens. What shall I do?
UPD: am I right, that Canvas only draws within onDraw() method and from nothing else?
I need to draw shapes on an image in my layout. This image needs to be able to change to another image programically, and I also need to draw shapes (rectangles and circles) over top of this image programically. The shapes will also change. I have an existing xml layout and would like to use this layout with the programmed image view in it. What's the easiest way to do this? Would it be possible to see a short example?
I figured out how to do this:
Here's how:
ImageView image = (ImageView) findViewById(R.id.mainImageView);
Bitmap bMap = BitmapFactory.decodeFile(imageFileString);
bMap = bMap.copy(Bitmap.Config.ARGB_8888 , true);
Canvas canvas = new Canvas(bMap);
Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(1);
paint.setColor(Color.BLUE);
canvas.drawCircle(x, y, radius, paint);
image.setImageBitmap(bMap);
Explanation: The first line gets the ImageView from the layout. I then grab the new image I want displayed using BitmapFactory.decodeFile, where imageFileString is the file location of the new image I want to display. After that I create a new canvas using the bitmap and draw on it. I then display the bitmap to the ImageView using image.setImageBitmap(bMap);.