526互联

ArkUI 绘制半圆进度条

发布时间 2024-01-11 16:56:29作者: MegaSu

Circle 组件的用法类似于 SVG

Circle({ width: 80, height: 80 })
                .fill(Color.Transparent) // 设置填充区域颜色
                .stroke($r('app.color.brand')) // 设置边框颜色
                .strokeWidth(3) // 设置边框宽度
                .strokeDashArray([Math.PI * 80 * 0.1, Math.PI * 80]) // 设置边框间隙，根据进度调整第一个值
                .rotate({ angle: -90 }) // 初始角度为顶部，所以需要逆时针旋转90度

image