I accidentally saw CSDN's essay activity on the World Cup:
Draw a football with code? Haha very interesting!
After thinking about it, drawing a custom View (football) is of course using Canvas, but is there any other way besides Canvas? That is a must, that is to use SVG Path to draw! I happen to be developing harmonyOS applications recently, so let’s use Harmony ArkTs to implement them!
The following is the rendering of the World Cup poster implemented using ArkTs:
Is it that interesting? Ha ha…
For the Hongmeng project development process and precautions, you can refer to my first two articles!
The project structure:
Realize the logic:
First customize a FootballBall component:
@Entry
@Component
export struct FootBall {
build() {
Shape() {
Path()
.commands('M0 250 L0 250,500 250')
.strokeWidth(1)
.stroke("#000")
Path()
.commands('M250 0 L250 0,250 180')
.strokeWidth(1)
.stroke("#000")
Path()
.commands('M220 320 L220 320,150 423')
.strokeWidth(1)
.stroke("#000")
Path()
.commands('M280 320 L280 320,350 423')
.strokeWidth(1)
.stroke("#000")
Path()
.commands('M250 180 L250 180,180 250,220 320,280 320,320 250 Z')
.fill('#000')
Path()
.commands('M250 50 L250 50,190 18 A120 120 0 0 1 310 18')
.strokeWidth(1)
.stroke("#000")
Path()
.commands('M50 250 L50 250,18 310 A120 120 0 0 1 18 190')
.strokeWidth(1)
.stroke("#000")
Path()
.commands('M450 250 L450 250,482 190 A120 120 0 0 1 482 310')
.strokeWidth(1)
.stroke("#000")
Path()
.commands('M150 423 L150 423,180 480 A120 120 0 0 1 80 423')
.strokeWidth(1)
.stroke("#000")
Path()
.commands('M350 423 L350 423,420 423 A120 120 0 0 1 320 480')
.strokeWidth(1)
.stroke("#000")
}
.height('500px')
.width('500px')
.backgroundColor("#FFFFFF")
.borderRadius('250px')
}
}
Use Shape to draw a circle with a white background, then draw a pentagon with the center of the circle as the center, and then draw 5 small fans on the edge of the circle in the direction opposite to the corner of the pentagon:
Path()
.commands('M0 250 L0 250,500 250')
.strokeWidth(1)
.stroke("#000")
M0 250 is about to position the "paintbrush" at the coordinate (0, 250), and L0 250 means that the "paintbrush" starts to draw a line from the coordinate (0, 250) and ends at the coordinate (500, 250)! The same goes for the following!
strokeWidth: brush line width; stroke brush color; fill fill color; these attributes can determine whether the graphics you draw are hollow/line or solid!
The most critical point is the calculation of angles and coordinates. In fact, it can be seen from the above renderings that the pentagon I drew is not a regular pentagon. It is because I took a trick for the convenience of calculation. If there is enough The time and mathematics are only a very solid drawing, and if you draw a regular pentagon, the effect will be even better! Of course, if you are more powerful, you can use Bezier curves to draw a three-dimensional football, which is also very good!
Next, customize a shadow component, which is very simple:
@Entry
@Component
export struct FootBallShadow {
build() {
Shape() {
Ellipse()
.width('100%')
.height('100%')
}
.height('100px')
.width('400px')
}
}
Finally, the home page introduces the layout of two components:
import {
FootBallShadow } from './FootBallShadow';
import {
FootBall } from './FootBall';
@Entry
@Component
struct Index {
build() {
Column() {
Text("FIFA World Cup").fontSize(30)
.linearGradient({
direction: GradientDirection.Left, // 渐变方向
colors: [[0xff0000, 0.0], [0xffff00, 0.5]] // 数组末尾元素占比小于1时满足重复着色效果
})
.fontWeight(600)
.margin({
top: 100 })
Text("Qatar 2022").fontColor(Color.Green).fontSize(20).margin({
top: 20 })
Stack() {
Row() {
FootBallShadow()
}
.position({
x: "300px", y: "430px" })
FootBall()
}
.alignContent(Alignment.TopStart)
.width('600px')
.height('500px')
.margin({
top: '40%' })
}
.width('100%')
.height('100%')
.linearGradient(
{
angle: 180,
colors: [['#BDE895', 0.1], ["#95DE7F", 0.6], ["#7AB967", 1]]
})
}
}
The football and the shadow part use the cascading layout Stack, so a simple World Cup poster is realized!