用ArkTs在鸿蒙系统上画一个世界杯海报

Posted 白玉梁

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用ArkTs在鸿蒙系统上画一个世界杯海报相关的知识,希望对你有一定的参考价值。

偶然看到了CSDN关于世界杯的征文活动:

用代码画一个足球? 哈哈很有意思!

想了想,画一个自定义View(足球),当然是使用Canvas了,但除了Canvas还有没有其它方法呢?那是必须的了,那就是使用SVG的Path去画!正好最近在开发harmonyOS应用,那就用鸿蒙的ArkTs去实现吧!

下面是使用ArkTs实现的世界杯海报效果图:

是不是有那么点意思了?哈哈…

关于鸿蒙项目开发流程及注意事项,可以参考本人的前两篇文章!

本项目结构:

实现逻辑:

首先自定义一个FootBall的组件:

@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')
  

使用Shape画出一个背景为白色的圆,然后内部以圆心为中心画一个五边形,再在五边形的角所对方向的圆边缘画5个小扇形:

 Path()
        .commands('M0 250 L0 250,500 250')
        .strokeWidth(1)
        .stroke("#000")

M0 250即将“画笔”定位到坐标(0,250)的位置,L0 250即“画笔”从坐标(0,250)开始画线,到坐标(500, 250)位置结束!下面同理!

strokeWidth:画笔线宽;stroke画笔颜色;fill填充颜色;这几个属性,可以决定你画的图形是空心/线条,还是实心!

最关键的点,就是角度和坐标的计算,上面的效果图其实可以看出,我画出来的五边形,并非是正五边形,是因为我为了计算方便,取了个巧,如果有充足的时间以及数学只是掌握的很牢固的画,画出来一个正五边形,那效果会更上一层楼!当然,如果再厉害一点,可以使用贝塞尔曲线,画出一个具有立体感的足球,也是很赞的!

接下来,再自定义一个阴影的组件,这个就很简单了:

@Entry
@Component
export struct FootBallShadow 
  build() 
    Shape() 
      Ellipse()
        .width('100%')
        .height('100%')
    
    .height('100px')
    .width('400px')
  

最后就是主页引入两个组件的布局:

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]]
      )

  

足球和阴影部分使用层叠布局Stack,这样,一个简单的世界杯海报就实现了!

以上是关于用ArkTs在鸿蒙系统上画一个世界杯海报的主要内容,如果未能解决你的问题,请参考以下文章

用ArkTs在鸿蒙系统上画一个世界杯海报

题解报告——扇形面积并

bzoj4418[Shoi2013]扇形面积并 扫描线+线段树

BZOJ4418[Shoi2013]扇形面积并 扫描线+线段树

在gis Map上画一个圆圈

鸿蒙能成为世界第三的操作系统吗?