A detailed introduction to drawing circles with XML in Vector
Before we start, let's understand the basic commands for drawing a circle:
A(rx ry x-axis-rotation large-arc-flag sweep-flag x y)- rx ry Ellipse radius
- x-axis-rotation x-axis rotation angle
- When large-arc-flag is 0, it means to take small radians, and when 1, take large radians (when rounding, whether to be long or short)
- sweep-flag 0 is counterclockwise, 1 is clockwise
- xy end position
It looks too round
Simpler:
A (x-axis radius of the circle, y-axis radius, x-axis rotation angle, 0/1-minor/major radian, 0/1-counter/clockwise, the end position of the circle at x point, the end position of the circle at y point)
Generally as above ↑, just looking at its explanation, most of it should be understandable, but a small part is not very clear.
Let's get to know it in practice :
First look at the effect:
First move to the center point of the canvas (24, 24), draw a circle with a radius of 10, and the end point is 12, 12. The renderings are as follows:
In this way, the location of the points is not clear. In order to make it easier for everyone to know the location of each point, I changed the way.
As shown in the figure, after all, this vector drawing mainly deals with the position of each point. In this form, you should be able to clearly understand the position of each coordinate. In this way, I don't have to always mark a certain point x1, y1, a certain point x2, y2, blah blah blah, the head is bigger, I personally prefer to look at the picture and talk~~ After all, this is also convenient for me, haha.
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="48dp"
android:height="48dp"
android:viewportHeight="48"
android:viewportWidth="48">
<path
android:fillColor="#ff000000"
android:pathData="M0 0 0 48 48 48 48 0z"
android:strokeAlpha="1"/>
<path
android:pathData="M24 24 A 10,10 0 1 0 12,12"
android:strokeAlpha="1"
android:strokeColor="@color/colorAccent"
android:strokeLineCap="round"
android:strokeWidth="1"/>
</vector>
Here I will introduce the basic attributes first, I am afraid that very new friends will not understand:
- strokeWidth : stroke width
- stroke Color: stroke color
- strokeAlpha : stroke transparency 1 = FF can also be achieved by changing color (0xffff0000=red)
Okay, enough bullshit, let's get to the point:
Conjecture: On a straight line between 2 points, draw a semicircular arc (the size of the circle is determined by the x, y radius
), and then change the direction of rotation according to clockwise and counterclockwise .
Review our basic commands:
A ( x-axis radius of the circle, y-axis radius , x-axis rotation angle, 0/1-minor/major radian, 0/1-counter/clockwise , the end position of the circle at x point, the end position of the circle at y point )
The properties marked in red above are what we need to verify next.
In order to confirm the conjecture, I made 2 renderings and attached the code.
Effect picture 1:
Key code 1:
<path
android:pathData="M12 12 A 5,5 0 1 1 24,12"
android:strokeWidth="1"
android:strokeColor="#ffff0000"
android:strokeAlpha="1"
/>
<path
android:pathData="M12 12 A 5,5 0 1 0 24,12"
android:strokeWidth="1"
android:strokeColor="#ff00ff00"
android:strokeAlpha="1"
/>
<path
android:pathData="M24 24 A 5,5 0 1 0 24,36"
android:strokeWidth="1"
android:strokeColor="#ffff0000"
android:strokeAlpha="1"
/>
<path
android:pathData="M24 24 A 5,5 0 1 1 24,36"
android:strokeWidth="1"
android:strokeColor="#ff00ff00"
android:strokeAlpha="1"
/>
<path
android:pathData="M36 36 A 5,5 0 1 0 36.1,35.9"
android:strokeWidth="1"
android:strokeColor="#ff0000ff"
android:strokeAlpha="1"
/>
Effect picture 2:
Key code 2:
<!--Semicircle-->
<path
android:pathData="M12 12 A 5,5 0 1 1 36,12 M12 12 L 36 12"
android:strokeWidth="0.1"
android:strokeColor="#ff00ff00"
/>
<path
android:pathData="M12 12 A 5,5 0 1 1 32,13 M12 12 L 32 13"
android:strokeWidth="0.1"
android:strokeColor="#ffff0000"
/>
<path
android:pathData="M12 12 A 5,5 0 1 1 28,15 M12 12 L 28 15"
android:strokeWidth="0.1"
android:strokeColor="#ff0000ff"
/>
<path
android:pathData="M12 12 A 5,5 0 1 1 24,18 M12 12 L 24 18"
android:strokeWidth="0.1"
android:strokeColor="#ffffff00"
/>
<!--circle-->
<path
android:pathData="M12 36 A 5,5 0 1 1 11,36 M12 36 L 11 36"
android:strokeWidth="0.1"
android:strokeColor="#ff00ff00"
/>
<path
android:pathData="M12 36 A 5,5 0 1 1 10,34 M12 36 L 10 34"
android:strokeWidth="0.1"
android:strokeColor="#ffff0000"
/>
<path
android:pathData="M12 36 A 5,5 0 1 1 12,32 M12 36 L 12 32"
android:strokeWidth="0.1"
android:strokeColor="#ff0000ff"
/>
<path
android:pathData="M12 36 A 5,5 0 1 1 16,37 M12 36 L 16 37"
android:strokeWidth="0.1"
android:strokeColor="#ffffff00"
/>
Such as the renderings, in fact, I don't need to say too much, you should almost understand when you look at the pictures and talk.
Highlights:
The starting point and the end point determine a straight line, and a semi-circular arc is drawn through the straight line. That is to say, the length of the straight line determines the opening size of the arc. The closer the straight line is to 0, the closer the arc is to the circle.
Get the most important, the other is some sub-attributes. You can directly try them one by one, and the effect is the most intuitive.
Thanks 18-4-20 17:25