HarmonyOS鸿蒙Next中Canvas问题
HarmonyOS鸿蒙Next中Canvas问题 在Tabs的tabBar中使用Canvas，APP打开 => 在设置页面中设备深色模式全开开启 => 任务栏唤起APP，tabBar中的内容不展示，有大佬知道这是什么问题吗？
代码片段：
Tabs({ barPosition: BarPosition.End }) {
ForEach(this.tabs, (item: ITabs, index: number) => {
TabContent() {
if (this.tabContentArr[index] || this.currentIndex === index) {
this.tabChild()
}
}
.tabBar(this.TabBuilderLottie(index, this.tabs[index].name))
})
}
@Builder
TabBuilderLottie(index: number, name: string) {
Canvas(this.tabs[index].canvasRenderingContext)
.onReady(() => {
this.tabs[index].canvasRenderingContext.restore()
let path = new Path2D();
path.moveTo(150, 50);
path.lineTo(50, 150);
path.lineTo(100, 250);
path.lineTo(200, 250);
path.lineTo(250, 150);
path.closePath();
// 设定填充色为蓝色
this.tabs[index].canvasRenderingContext.fillStyle = '#0097D4';
// 使用填充的方式，将Path2D描述的五边形绘制在canvas组件内部
this.tabs[index].canvasRenderingContext.fill(path);
this.tabs[index].canvasRenderingContext.fillStyle = '#0097D4';
// 以(50, 50)为左上顶点，画一个宽高200的矩形
this.tabs[index].canvasRenderingContext.fillRect(50, 50, 200, 200);
// 以(70, 70)为左上顶点，清除宽150高100的区域
this.tabs[index].canvasRenderingContext.clearRect(70, 70, 150, 100);
})
}更多关于HarmonyOS鸿蒙Next中Canvas问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
3 回复
因为切换深浅色模式时会销毁Canvas组件，创建新的Canvas组件，在tabbar里使用Canvas组件时，有短暂的重新上树的情况，导致CanvasRenderingContext2D被旧的Canvas组件绑定，新的Canvas组件上绘制不出内容。建议把CanvasRenderingContext2D 和 Canvas组件封装成一个自定义组件使用，试下这段代码：
import { common } from '@kit.AbilityKit'
interface ITabs {
name: string
currentName?: string
previousName?: string
canvasRenderingContext: CanvasRenderingContext2D
}
const TABS: ITabs[] = [
{ name: 'home', canvasRenderingContext: new CanvasRenderingContext2D() },
{
name: 'category',
canvasRenderingContext: new CanvasRenderingContext2D()
},
{ name: 'cart', canvasRenderingContext: new CanvasRenderingContext2D() },
{ name: 'my', canvasRenderingContext: new CanvasRenderingContext2D() },
]
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
@State tabs: ITabs[] = TABS;
private controller: TabsController = new TabsController()
build() {
Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
ForEach(this.tabs, (item: ITabs, index: number) => {
TabContent() {
Column() {
Canvas(this.tabs[index].canvasRenderingContext)
.width(200)
.height(200)
.backgroundColor(Color.Red)
.onReady(() => {
this.tabs[index].canvasRenderingContext.fillRect(0, 30, 100, 100)
})
Text(index.toString())
.width(200)
.height(200)
.backgroundColor(Color.Red)
}
}
.tabBar(this.TabBuilderLottie(index, this.tabs[index].name))
})
}
.width('100%')
.height('100%')
.barMode(BarMode.Fixed)
.barHeight(60)
.fadingEdge(false)
.scrollable(false)
}
@Builder
TabBuilderLottie(index: number, name: string) {
Column() {
Text(index.toString())
.width(50)
.height(10)
.backgroundColor(Color.Green)
.zIndex(100)
CanvasComponent()
.width(200)
.height(200)
.backgroundColor(Color.Red)
}
}
}
@Component
export default struct CanvasComponent {
private mainRenderingSettings: RenderingContextSettings = new RenderingContextSettings(true);
private canvasRenderingContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.mainRenderingSettings);
build() {
Canvas(this.canvasRenderingContext)
.width(100)
.height(100)
.onReady(() => {
console.log("=======> Canvas onReady")
this.canvasRenderingContext.clearRect(0, 0, 200, 200);
this.canvasRenderingContext.fillRect(0, 30, 100, 100)
})
}
}更多关于HarmonyOS鸿蒙Next中Canvas问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next中，Canvas组件用于绘制2D图形和图像。Canvas支持基本的绘图操作，如绘制矩形、圆形、路径、文本等。开发者可以通过Canvas API进行自定义绘图，实现复杂的UI效果。Canvas的渲染性能较高，适合处理动态图形和动画。在鸿蒙Next中，Canvas的使用与其他平台类似，但需要注意鸿蒙系统的API差异和优化点。Canvas的绘制操作通常在主线程中进行，因此需要避免阻塞UI线程，确保流畅的用户体验。
