本节笔者带领读者实现一个饼状图 PieChart 组件，该组件是依托笔者之前封装的 MiniCanvas 实现的， PieChart 的最终演示效果如下图所示：
饼状图实现的拆分
根据上图的样式效果，实现一个饼状图，实质就是绘制一个个的实心圆弧加上圆弧对应颜色就搞定了，圆弧的大小是根据饼状的数据分布计算出来的，对应的颜色自己指定就可以了，其次手指点击到饼状图，需要找到对应的饼状块并突出显示，找到饼状块先计算手指点击坐标和圆弧中心的夹角，根据夹角和每个圆弧的大小找到对应的圆弧，找到圆弧后计算圆弧的突出偏移量并重置所有饼状块的圆弧起始值就可以了。
计算夹角
计算夹角就是计算手指点击饼状图上的坐标 (x, y) 和饼状图的圆心坐标 (centerX, centerY) 之间的顺时针角度，计算方法如下所示：
private getTouchedAngle(centerX: number, centerY, x: number, y: number) {
var deltaX = x - centerX;
var deltaY = centerY - y;
var t = deltaY / Math.sqrt(deltaX * deltaX + deltaY * deltaY);
var angle = 0;
if (deltaX > 0) {
if (deltaY > 0) {
angle = Math.asin(t);
} else {
angle = Math.PI * 2 + Math.asin(t);
}
} else if (deltaY > 0) {
angle = Math.PI - Math.asin(t);
} else {
angle = Math.PI - Math.asin(t);
}
return 360 - (angle * 180 / Math.PI) % 360;
}
找圆弧块
计算出手指点击位置和圆心的夹角后，遍历每一个饼状块做比较就可以了，代码如下所示：
private getTouchedPieItem(angle: number): PieItem {
for(var i = 0; i < this.pieItems.length; i++) {
var item = this.pieItems[i];
if(item.getStopAngle() < 360) {
if(angle >= item.getStartAngle() && angle < item.getStopAngle()) {
return item;
}
} else {
if(angle >= item.getStartAngle() && angle < 360 || (angle >= 0 && angle < item.getStopAngle() - 360)) {
return item;
}
}
}
return null;
}
计算偏移量
找到圆弧块后，根据圆弧块的圆弧大小，计算出该圆弧突出后的偏移量，代码如下所示：
private calculateRoteAngle(item: PieItem): number {
var result = item.getStartAngle() + item.getAngle() / 2 + this.getDirectionAngle();
if (result >= 360) {
result -= 360;
}
if (result <= 180) {
result = -result;
} else {
result = 360 - result;
}
return result;
}
重置偏移量
有了目标圆弧块的偏移角度后，重置每一个圆弧块的起始偏移量就可以了，代码如下所示：
private resetStartAngle(angle: number) {
this.pieItems.forEach((item) => {
item.setSelected(false);
item.setStartAngle(item.getStartAngle() + angle);
});
}
重新绘制圆弧
绘制圆弧使用 MiniCanvas 提供的 drawArc() 方法即可，代码如下所示：
drawPieItem() {
this.pieItems.forEach((item) => {
this.paint.setColor(item.color);
var x = this.calculateCenterX(item.isSelected());
var y = this.calculateCenterY(item.isSelected());
this.canvas.drawArc(x, y, this.radius, item.getStartAngle(), item.getStopAngle(), this.paint);
})
}
饼状图的实现
拆分完饼状图的步骤后，实现起来就方便多了， PieChart 的完整代码如下所示：
import { MiniCanvas, Paint, ICanvas } from './icanvas'
@Entry @Component struct PieChart {
private delegate: PieChartDelegate;
build() {
Column() {
MiniCanvas({
attribute: {
width: this.delegate.calculateWidth(),
height: this.delegate.calculateHeight(),
clickListener: (event) => {
// 根据点击绘制突出的饼状块
this.delegate.onClicked(event.x, event.y);
}
},
onDraw: (canvas) => {
// 开始绘制
this.delegate.setCanvas(canvas);
this.delegate.drawPieItem();
}
})
}
.padding(10)
.size({width: "100%", height: "100%"})
}
aboutToAppear() {
// mock测试数据
var pieItems = PieItem.mock();
// 初始化delegate
this.delegate = new PieChartDelegate(pieItems, RotateDirection.BOTTOM);
}
}
// 定义饼状块的属性，包括角度，起始角度，占比，颜色，是否选中突出
export class PieItem {
private startAngle: number = 0;
private rate: number = 0;
private angle: number = 0;
private selected: boolean = false;
constructor(public count: number, public color: string) {
}
setSelected(selected: boolean) {
this.selected = selected;
return this;
}
isSelected() {
return this.selected;
}
setStartAngle(startAngle: number) {
this.startAngle = startAngle > 360 ? startAngle - 360 : startAngle < 0 ? 360 + startAngle : startAngle;
return this;
}
getStartAngle() {
return this.startAngle;
}
getStopAngle() {
return this.startAngle + this.angle;
}
setRate(rate: number) {
this.rate = rate;
return this;
}
getRate() {
return this.rate;
}
setAngle(angle: number) {
this.angle = angle;
return this;
}
getAngle() {
return this.angle;
}
// mock一份测试数据
static mock(): Array<PieItem> {
var pieItems = new Array<PieItem>();
pieItems.push(new PieItem(21, "#6A5ACD"))
pieItems.push(new PieItem(18, "#20B2AA"))
pieItems.push(new PieItem(29, "#FFFF00"))
pieItems.push(new PieItem(12, "#00BBFF"))
pieItems.push(new PieItem(20, "#DD5C5C"))
pieItems.push(new PieItem(13, "#8B668B"))
return pieItems;
}
}
// 饼状块的突出方向
export enum RotateDirection {
LEFT,
TOP,
RIGHT,
BOTTOM
}
// 饼状图绘制的具体实现类
class PieChartDelegate {
private paint: Paint;
private canvas: ICanvas;
constructor(private pieItems: Array<PieItem>, private direction: RotateDirection = RotateDirection.BOTTOM, private offset: number = 10, private radius: number = 80) {
this.calculateItemAngle();
}
setPitItems(pieItems: Array<PieItem>) {
this.pieItems = pieItems;
}
setCanvas(canvas: ICanvas) {
this.canvas = canvas;
this.paint = new Paint();
}
onClicked(x: number, y: number) {
if(this.canvas) {
var touchedAngle = this.getTouchedAngle(this.radius, this.radius, x, y);
var touchedItem = this.getTouchedPieItem(touchedAngle);
if(touchedItem) {
var rotateAngle = this.calculateRoteAngle(touchedItem);
this.resetStartAngle(rotateAngle);
touchedItem.setSelected(true)
this.clearCanvas();
this.drawPieItem();
}
} else {
console.warn("canvas invalid!!!")
}
}
clearCanvas() {
this.canvas.clear();
}
drawPieItem() {
this.pieItems.forEach((item) => {
this.paint.setColor(item.color);
var x = this.calculateCenterX(item.isSelected());
var y = this.calculateCenterY(item.isSelected());
this.canvas.drawArc(x, y, this.radius, item.getStartAngle(), item.getStopAngle(), this.paint);
})
}
calculateWidth(): number {
if (this.direction == RotateDirection.LEFT || this.direction == RotateDirection.RIGHT) {
return this.radius * 2 + this.offset;
} else {
return this.radius * 2;
}
}
calculateHeight(): number {
if (this.direction == RotateDirection.TOP || this.direction == RotateDirection.BOTTOM) {
return this.radius * 2 + this.offset;
} else {
return this.radius * 2;
}
}
private calculateCenterX(hint: boolean): number {
if(this.direction == RotateDirection.LEFT) {
return hint ? this.radius : this.radius + this.offset;
} else if(this.direction == RotateDirection.TOP) {
return this.radius;
} else if(this.direction == RotateDirection.RIGHT) {
return hint ? this.radius + this.offset : this.radius;
} else {
return this.radius;
}
}
private calculateCenterY(hint: boolean): number {
if(this.direction == RotateDirection.LEFT) {
return this.radius;
} else if(this.direction == RotateDirection.TOP) {
return hint ? this.radius : this.radius + this.offset;
} else if(this.direction == RotateDirection.RIGHT) {
return this.radius;
} else {
return hint ? this.radius + this.offset : this.radius;
}
}
private resetStartAngle(angle: number) {
this.pieItems.forEach((item) => {
item.setSelected(false);
item.setStartAngle(item.getStartAngle() + angle);
});
}
private calculateRoteAngle(item: PieItem): number {
var result = item.getStartAngle() + item.getAngle() / 2 + this.getDirectionAngle();
if (result >= 360) {
result -= 360;
}
if (result <= 180) {
result = -result;
} else {
result = 360 - result;
}
return result;
}
private calculateItemAngle() {
var total = 0;
this.pieItems.forEach((item) => {
total += item.count;
})
for(var i = 0; i < this.pieItems.length; i++) {
var data = this.pieItems[i];
data.setRate(data.count / total);
data.setAngle(data.getRate() * 360);
if (i == 0) {
data.setStartAngle(0);
} else {
var preData = this.pieItems[i - 1];
data.setStartAngle(preData.getStopAngle());
}
}
}
private getDirectionAngle(): number {
var result = 270;
if (this.direction == RotateDirection.RIGHT) {
result = 0;
}
if (this.direction == RotateDirection.BOTTOM) {
result = 270;
}
if (this.direction == RotateDirection.LEFT) {
result = 180;
}
if (this.direction == RotateDirection.TOP) {
result = 90;
}
return result;
}
private getTouchedAngle(centerX: number, centerY, x: number, y: number) {
var deltaX = x - centerX;
var deltaY = centerY - y;
var t = deltaY / Math.sqrt(deltaX * deltaX + deltaY * deltaY);
var angle = 0;
if (deltaX > 0) {
if (deltaY > 0) {
angle = Math.asin(t);
} else {
angle = Math.PI * 2 + Math.asin(t);
}
} else if (deltaY > 0) {
angle = Math.PI - Math.asin(t);
} else {
angle = Math.PI - Math.asin(t);
}
return 360 - (angle * 180 / Math.PI) % 360;
}
private getTouchedPieItem(angle: number): PieItem {
for(var i = 0; i < this.pieItems.length; i++) {
var item = this.pieItems[i];
if(item.getStopAngle() < 360) {
if(angle >= item.getStartAngle() && angle < item.getStopAngle()) {
return item;
}
} else {
if(angle >= item.getStartAngle() && angle < 360 || (angle >= 0 && angle < item.getStopAngle() - 360)) {
return item;
}
}
}
return null;
}
}
以上就是笔者介绍的实现一个饼状图的思路和实现，具体实现读者可以阅读源码，目前 PieChart 在选中饼状块并突出时没有动画特效而是直接旋转过来了，后续笔者会把旋转的动效加上。
写在最后
有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）文档用来跟着学习是非常有必要的。
这份鸿蒙（HarmonyOS NEXT）文档包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。
希望这一份鸿蒙学习文档能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！
获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习文档
鸿蒙（HarmonyOS NEXT）5.0最新学习路线
有了路线图，怎么能没有学习文档呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。
获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习文档
《鸿蒙 (OpenHarmony)开发入门教学视频》
《鸿蒙生态应用开发V3.0白皮书》
《鸿蒙 (OpenHarmony)开发基础到实战手册》
OpenHarmony北向、南向开发环境搭建
《鸿蒙开发基础》
●ArkTS语言
●安装DevEco Studio
●运用你的第一个ArkTS应用
●ArkUI声明式UI开发
.……
《鸿蒙开发进阶》
●Stage模型入门
●网络管理
●数据管理
●电话服务
●分布式应用开发
●通知与窗口管理
●多媒体技术
●安全技能
●任务管理
●WebGL
●国际化开发
●应用测试
●DFX面向未来设计
●鸿蒙系统移植和裁剪定制
……
《鸿蒙进阶实战》
●ArkTS实践
●UIAbility应用
●网络案例
……
761
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
