I have this code to draw the arrow tail line between 2 point but how should I draw curved line for arrow tail?
canvas.drawLine(pt1[X], pt1[Y], pt2[X], pt2[Y], paint);//draw line
I want to have something like this, whereby the arrow is dynamic
Depending on what shape you want for the curved line, you could perhaps use Canvas.drawArc(), but that is restricted to sections of an oval aligned with the screen axes.
For a more general approach, define your curved line as a Path and then use Canvas.drawPath() to render it to the canvas. A Path can be composed of an arbitrary number of straight line, quadratic curve, and cubic curve segments. (See the docs for how to construct the Path that you want.) For a solid arrow tail, you should set the paint's style to FILL when calling drawPath().
Related
I'm trying to make the bottom side semicircular, but it doesn't work.
An example of a figure in "main background"
main background
Make a Path object by issuing 4 individual draw commands (3 draw lines for the 3 straight sides, 1 drawArc for the bottom), then draw that path to the canvas
As background, I am new to Android graphics. I'm trying to create a rectangle with rounded corners using Path specifically (I don't want to use method addRoundRect as I will make changes to my Path object later to not be rectangular). I want this to have the same curvature as a shape with corners with a radius of 12 dp. I'd like to use the methods rQuadTo or quadTo (based off of this question), but am a bit confused how to get the corners to match each other perfectly. Can someone explain the math behind how to to achieve this and what setting the radius exactly mean for drawable resource shape (is this a correct definition?)? Visuals would be help as well! Thanks.
Yes, link contains correct definition.
To build rounded corner with quadratic Bezier quadTo, you should start curve (end straight line) at distance r=12 before corner position, make control point exactly at corner position (to provide symmetry) and make end point at distance r after corner at perpendicular edge. Quadratic Bezier curve does not give perfect circle arc, but it is not significant for small sizes.
Example:
Horizontal edge in right direction to corner 100, 100.
End point of line is 88, 100. (and starting point of curve)
And quadto(100, 100, 100, 112)
My app teaches how to write letters and I want to draw for example letter "A" programmatically.
I do not want to draw it pixel by pixel(it is so hard!)
What other ways to do that?
UPDATE:
I want to show how to write "A" not just showing A in the screen
Romain Guy recently wrote a blog post on how to do path tracing using paths. If you can construct paths yourself (or finding a method for creating correct paths for letters) you could use the information from his blog to do something.
http://www.curious-creature.org/2013/12/21/android-recipe-4-path-tracing/#more-1904
Good luck
if you are using Canvas, you can draw text on canvas using this:
canvas.drawText("A",marginFromLeft,MarginFromRight, paint);
also you can draw bitmap of A on canvas using this:
canvas.drawBitmap(bmp,marginLeft,marginTop, paint);
after drawing this,you can animate an other image like circle using animationSet:
anim One: animate circle moving from bottom left to top center of A
anim Two: animate circle moving from top center of A to bottom left Right
anim Three: animate circle moving from left-verticaly-center to right-verticaly-center.
I am trying to draw smooth line following my finger. The problem is in superposition. Left example is array of drawLine, and right is drawPath. Is it way to make it like smooth left example?
Construct the line as a solid color, then wrap that line inside of a drawable. Turn this drawable transparent, and then draw it to the screen.
Stage 1. I have a background
Stage 2. I apply an overlay to background with a canvas to draw. First I fill the whole area with canvas.drawColor(Color.argb(128,0,0,0))
Then I need to draw a red transparent circle with color.argb(128,255,0,0) at a specified place, but I want circle red transparency replaced black filling transparency, not added. So, I wanna get this
but NOT this
How can I get it?
You can try to use Canvas.clipPath before filling area with black color to exclude area, which will be used later by circle.