I have an image view with a (not really) complex background. The background is to be the composition of three circles, each with different dynamically set colors.
one circle, the largest, is actually a perimeter (i.e. stroke)
one circle, the second largest, is concentric with the perimetric circle
one circle, the smallest, sits at the base of the other two circles (so that it is not concentric).
I successfully create the 3-circle background using layer-list. But the problem is that I am not able to change the colors in the layer-list dynamically. Changing the color of these circles is a crucial part of the design.
So since my ImageView is part of a custom view anyway, I am now thinking of using the canvas in onDraw(Canvas canvas) to create my three circles and set them as the background of the ImageView. However, the problem with this approach is that I don't know how to set my composite image (the three circles) as the background of my ImageView.
Any snippet of code solving this problem is greatly appreciated.
Related
I am creating a simple drawing app using kotlin. I want to implement an eraser and was not able to find any proper solution for this. Every solution either uses white color as a substitute for eraser or completely resets the canvas after clicking on eraser button. As I have also implemented the feature of importing background images from the gallery, I can't use white color as eraser.
There is no magic eraser in canvas, because erasing is nothing but drawing something onto the canvas. You can't set the paint color to Transparent and draw on canvas to erase what is already drawn. This simply draws something that is transparent, which is basically nothing.
So you will need to implement an eraser by using a Color. Normally this is white, because the background is usually set to white. So this gives the appearance of erasing the content.
In your case, you have a background image. To implement an eraser for this, you will need 2 canvas. The background image will be drawn in the 1st canvas. All the other content (drawCircle, drawRect, drawPath, etc...) are drawn onto the 2nd canvas. Now, you could take the bitmap out of the 2nd canvas and draw that in the 1st canvas (drawBitmap). This gives the final appearance.
Now, in this setup, you could use "White" as a color to erase from the 2nd canvas. While drawing 2nd canvas content onto the 1st, use one of the PorterDuff mode, so that the "White" goes away.
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.
I want to apply the border to this custom view shape
which created by many canvas.draw...() in onDraw()
The border that i want to create and apply to my custom view should have equal range all the way with some distance from the custom view and it should also cover small circle in each slice.
Any idea how to make this?
Thanks.
This isn't so much an answer, but more of a recommendation. Take a look at the Porter-Duff modes available to you. Worst case you may need to do some per pixel image manipulation which should be fine as long as the view isn't animated.
On second thought, here's an idea: why not create two images: one large circle which will always draw behind everything and a second which will always draw behind the small circles. The large circle would just be the complete border you want displayed, whereas the small circles would actually only be a semi circle border, which would render on top of the large circle (covering the large circle border under it). The key would then be to rotate the small border circle depending on where it's located. I hippie that makes sense, but it should work and be very efficient too.
Another option would be to separate the rendering into white circles and slightly larger border color circles. If you render the slightly larger (border color) circles first, then render the normal circles (white) on top, then you won't have to worry about any rotations and it will render correctly if the small outer circles begin to overlap.
So the idea is similar to the first suggestion. You'll still need a large circle and small circle (both white), but in addition, you'll need slightly larger border colored large and small circles.
I hope this description is a little clearer, but I assume that you are comfortable enough with compound drawables to figure out the rest, given that you've gotten this far in making your view.
All the best implementing it, and feel free to ask for any clarification! :)
Am I approaching this correctly or is there a better way?
I would like to have various shapes such as lines, rectangles, etc, that a user would be able to re-size, rotate, and otherwise change its parameters by clicking on the shape and dragging.
So far, I've implemented this with shapes by drawing the shape into a view and then adding the view onto a layout. A user can then drag that view.
But is this the best way? By doing this, I am manipulating the view that contains the shape and not the shape itself.
Can the shape be re-sized/moved directly through user manipulation?
The best way to draw shapes in Android is extend class from view then draw shapes in onDraw method also you can resize and move shapes using onTouch method dynamically.
Refer this link,
http://www.kellbot.com/2009/06/android-hello-circle/
On an android Canvas, if I draw a circle with alpha 0xCC and color Color.RED and then draw another circle which partially overlaps the first circle with the same parameters, I'll end up with a venn diagram.
Here is a random example I found (just ignore the [Text] in there). I want to draw overlapping circles like in this diagram, but I don't want the center to be darker, but I do want the whole thing to have alpha so that the map underneath is visible.
Is there a way to do this directly or do I need to draw to a bitmap without alpha and then set the alpha for the whole bitmap and draw it to a canvas? (I haven't used bitmaps yet, so I am not sure how they are used yet.)
The easy way would be your suggested solution, ie. drawing all circles with no alpha to a bitmap, then draw that bitmap to another one using the desired alpha.
The hard way would be using blend modes, specifically PorterDuff.Mode in Android. An example can be found here.