is there any way to blur only part of an image in android?
searched a lot but dint find any help.
most of the examples use gaussian blur which blurs full imageview.
i want to allow user to dynamically draw rectangle on imageview & on action up
area within rectangle should be blured.
any help will be really appreciated.
Bluring images on the fly is not an easy task, ask Roman Nurik (The one behind Muzei app)
He gave useful tips on this Google+ post but it's for animated images, from focus to blur.
In your case, I would say that you need to (roughly):
Get the bounds of the drawn rectangle
Get the image part that corresponds to the previous bounds
Blur on the fly the previous image part
Draw, into the same canvas, the blurred image part on top of the original image
Set up a onDrag Listener to move the drawn rectangle and do again step 1
EDIT: After re-thinking about it, computing and draw a blurred area each time the drawn rectangle move it too heavy, it won't work. The solution is probably this:
Blur the entire image and keep it into memory
Get the bounds of the drawn rectangle
Get the part of the blurred image that corresponds to the previous bounds
Draw, into the same canvas, the blurred image part on top of the original image
Set up a onDrag Listener to move the drawn rectangle to do again step 2-3-4
put the image view in a relative layout.
you detect the touch events of the user.
for each rectangle that he is drawing, you add an image view of it is size superposed to the initial one (I mean in the same relative layout) and of course with your blur effect.
you will see your image view blured part by part ...
put another layout on the half part of the image and set a translucent type background to the layout.
Once you have drawn your rectangle set alpha = 0.5 or as per your need so that your dynamic view that you have drawn will look blurred.
This is code for blur:
http://shaikhhamadali.blogspot.in/2013/07/gaussian-blur-imagebitmap-in-imageview.html
In this code computeConvolution3x3 method is used for computing the blur.For computing blur it convert the bitmap in to pixel array then it apply on those pixel. So you have to just do is get pixels array of that part of the image that you want blur.
Related
I have a circle image(image1) and i am getting one more circle image(image2) dynamically. Now i want to fit the image2 in the image1. is it possible?if yes, How can we implement it.
Image1
You should be able to draw it within the bounds of the canvas of your image. Specifically you can grab the width/height of the second image and then change the drawing positioning of your bitmap by drawing it manually on a canvas and then controlling the X/Y offsetting during the drawing procedure.
Something like this
This is if your source image is at a fixed resolution (ideal). The concept would be to build the image using the Canvas object and then superimpose the other image on top of it. And build a bitmap from that.
I'm currently working on an app where people can place objects in a SurfaceView -- images etc and they can resize it and things like that. Now i have a use case where someone can place in a frame like image -- lets say its a square image with the center as transparent. Now they can set an image that can go inside this frame and will be restricted to the bounds of that frame only and from there they can resize it as they will. Anyone does an implementation like this? Note that this is different from when a frame is full screen, that is easy to do. See my sample below:
The green is the main background area of the SurfaceView, he added the maroon/red frame, now he sets the picture to go in the frame (this is all within the same surface). The main difference this time around is that when he resize/move the image here, it should be bounded by the red frame ( he wont see it overlap outside like in the picture below). Anyone have experience how to do this on Android.?
Use the clipRect() method of the Canvas. You can supply it with a rectangle specifying your frame before you draw the image to be framed. Something like this should work:
First when moving the frame you need to have a corresponding Rect:
myRect.set(frameleft, frametop, frameright, framebottom);
And in your onDraw() you clip the picture with this rectangle:
canvas.save(Canvas.CLIP_SAVE_FLAG);
canvas.clipRect(pictureRect);
canvas.drawBitmap(/*your drawing parameters for the image*/);
canvas.restore(); //Restore to drawing the entire canvas
In my android application I am stuck in a problem and nothing seems to work for me.
I have an ImageView on the top of another ImageView inside a relative layout.
Now I need to resize the imageview on top when user touches one of its corners and drags.
Just like a cropping frame we generally see. When we drag any one corner, then the diagonally opposite corner must remain fixed and the resizing must be done across the corner which is being dragged.
What I am doing is setting OnTouchListener and getting new/dragged coordinates on Action.MOVE then I tried to resize using Bitmap's createScaledBitmap. This does resize the image view but not across the corner which is being dragged. I am totally confused .
How I can use the coordinates to draw an Image View just like we do it while drawing a rectangle using Canvas.
Please help.
I wouldn't do this in an ImageView. I would subclass View and override onTouchEvent and onDraw to handle the input and draw all the various components. You have to break this down into it's components and manage a number of objects in this view.
You have a Rect that represents the size of the crop area. This probably defaults to the size of the control. In onTouchEvent, you need to test for an area around each corner and then keep track of which corner is being dragged to resize your Rect appropriately.
You don't have to call createScaledBitmap each time you draw it, and you probably shouldn't because you are flirting with an OutOfMemoryException at that point (clean up your Bitmaps too slowly and you'll find out the hard way what this is). Just decode the Bitmap when the control gets created and draw it to the canvas using a destination Rect.
Lots of code to write, but it sounds like a fun project. There's no easy way to drop in a control like this (if I'm understanding you correctly). You have to manage the touches, drags, and the destination rectangle inside the custom View.
I want to crop my image which is being displayed on an ImageView. How I want to go about it is that I want a re-sizable rectangle to be displayed on the image. That rectangle will have moveable corners (which I can drag around with touch) to increase/decrease its size. The image below illustrates a demo of something I would like to develop.
P. S. I am not quite sure how to phrase my question.
What I want:
http://imageshack.us/photo/my-images/832/customcropbox.jpg/
The final solution I came up with after ample research was:
Extend ImageView to make my own custom view.
#Override onDraw method and do my custom drawing there in that method.
Implement onTouchListener on the view to get the touch events and process them according to their position.
e. g.
I checked whether the touch was in the radius of the anchor point circle I drew around the movable rectangle that I was drawing in my overriden onDraw method.
Edit:
I am sorry guys I don't have that piece of code anymore, I came here after a very long time otherwise would have loved to help you out.
Heartache.
Is there a way to animate the drawing of an image (from PNG) in a custom view?
I have an image of a circle that I would like to be drawn within a custom view. It would have to appear to be drawn in a clockwise direction.
Thanks
Since you want something to look drawn, not just a current image manipulated/transformed, I would look at Frame Animation.
http://developer.android.com/guide/topics/graphics/view-animation.html#frame-animation