I'm trying to draw some text on path using the canvas in Android. I can successfully get the text to draw on the top oval line. What i'm struggling to do is make sure that the text is centered.
The problem is that while i can measure the text before it gets drawn round the top line of the oval, i cannot measure it after. This makes estimating where the text should be drawn on the top oval line problematic as it's always a little bit out. This is because when i measure the text to be drawn initially it is measured in a straight line and not as presented on the top line of the oval.
I've tried applying setTextAlign(Paint.Align.CENTER) but this makes the text get drawn about 3/4's of the way round and not what i want.
Does anyone have any ideas how i could calculate the point to draw the text so it is drawn dead centre of the top oval line or any alternative method that may help?
This has to be drawn using the canvas. It can't be done using XML TextViews etc.
Thanks.
You can check how this library done it: https://github.com/amulyakhare/TextDrawable
Its using the same approach. But for multiple lines its almost impossible, theres an issue on this library where me and other developers tried to implement it, and we end up using just xml (a round drawable as a linearLayout view background and one textView inside it).
Related
I'm working on an APP in Android and needs to draw things on a Canvas. I want to draw a Path that is hollow, for example something like this image below.
View Image
The Path may contains lines, arcs, bezier curves, etc.
Is there a way for me to achieve that?
I had tried to draw the Path with a thicker Paint first and draw the Path again with a transparent and thinner Paint. But the problem is: there may be other things drawn on the Canvas. Doing so will cover other things intersecting with the Path.
I had also tried to translate the Canvas and draw the Path twice for the two borders. But it turned out that this will not work, for example a parabola (as shown below, it is not what I expected).
View Image
I had tried to draw the Path with a thicker Paint first and draw the Path again with a transparent and thinner Paint. But the problem is: there may be other things drawn on the Canvas. Doing so will cover other things intersecting with the Path.
What do you mean? If the first path-line covers other things drawn, it's ok the inner line would also. If the first line does not cover anything the 2nd line won't cover either.
When do you face the issue of having the first line not cover something while the thinner line does?
Task : To animate arc with alpha, scaling pulse
I have done almost everything using this Code : "https://github.com/booncol/Pulsator4Droid/blob/master/pulsator4droid/src/main/java/pl/bclogic/pulsator4droid/library/PulsatorLayout.java"
The only change I want to do instead of full circle I want half of it only arc would be great. But this drawn shape should be from bottom to top and placed horizontally on view.
I have searched half of the Internet for implementing this silly thing but
my drawn arc or circle is either like : "(" or ")" I want this curved shape to be facing top like in Some outgoing radiation type.
Have a refference from this link
https://github.com/DevLight-Mobile-Agency/PulseView
This will generate a wave from your icon's shape..
So i believe, for semi-circle wave, the requirement will be a semicircle icon .
I have a custom view that extends ImageView and displays an image and a text header. The text is drawn via drawRect and drawText overriding onDraw.
The first image is the typical use case: The header is inside the canvas bounds.
I'd like to be able to draw the header outside the canvas bounds. If I just draw it outside the bounds, just like image 2, the result is correct, ie. the rectangle is drawn outside the canvas and the text too.
However, I wonder if this works by accident and what kind of problems I may expect. I suppose it's a bad thing to draw outside the canvas bounds, but it'd be very convenient for me because I won't need to further complicate this custom view, or wrap it inside a container, or create another view, etc... I've only tested it on a couple devices I own and it works...
Can anybody share some thoughts on why this is OK, it doesn't really matter, or is very wrong?
For those interested, I've found a legit way to do this:
set the bottom padding to the header size plus the blank space
draw normally, now everything's inside the canvas and the imageView is adjusted to the requested padding, leaving the bottom padding area free to draw my header :P
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! :)