以下是一个更复杂的ArkTS示例，它展示了如何在画布上绘制多个形状（包括圆形、矩形和文本），并处理触摸事件来改变画布上的某些属性（如颜色）。

示例代码

import { Color, Point } from '@ohos.build.attr';
import canvas from '@ohos.canvas';// 自定义画布组件
@Component
struct InteractiveCanvasComponent {@Prop(Color) backgroundColor: Color = Color.White; // 画布背景颜色@Prop(Color) circleColor: Color = Color.Blue; // 圆形颜色@Prop(Color) rectColor: Color = Color.Green; // 矩形颜色@Prop(number) circleRadius: number = 50; // 圆形半径@Prop(number) rectWidth: number = 100; // 矩形宽度@Prop(number) rectHeight: number = 50; // 矩形高度@Prop(string) text: string = "Hello, ArkTS!"; // 文本内容@Prop(Color) textColor: Color = Color.Black; // 文本颜色@Prop(number) fontSize: number = 24; // 字体大小// 触摸事件处理@State private lastTouchPoint: Point | null = null;private handleTouch(event: TouchEvent) {if (event.type === 'touchstart') {this.lastTouchPoint = { x: event.touches[0].x, y: event.touches[0].y };// 这里可以添加逻辑来改变画布上的颜色或形状// 例如，随机改变圆形颜色this.circleColor = this.getRandomColor();}}// 随机生成颜色private getRandomColor(): Color {const letters = '0123456789ABCDEF';let color = '#';for (let i = 0; i < 6; i++) {color += letters[Math.floor(Math.random() * 16)];}// 由于ArkTS中的Color类型可能是特定的枚举或对象，这里需要转换或映射到实际的颜色值// 假设有一个函数可以将十六进制字符串转换为ArkTS的Color对象// 例如：Color.fromHex(color) （注意：这个函数是假设的，具体实现取决于ArkTS的API）// 但由于API可能不同，这里直接返回字符串作为示例// 在实际项目中，你需要根据ArkTS的Color类型进行转换return color as any as Color; // 这里使用类型断言来模拟转换，实际项目中应使用正确的转换方法}// 绘制逻辑private draw(canvasContext: canvas.CanvasRenderingContext2D, width: number, height: number) {// 绘制背景canvasContext.fillStyle = this.backgroundColor;canvasContext.fillRect(0, 0, width, height);// 绘制圆形canvasContext.beginPath();const centerX = width / 2;const centerY = height / 2;canvasContext.arc(centerX, centerY, this.circleRadius, 0, 2 * Math.PI);canvasContext.fillStyle = this.circleColor;canvasContext.fill();canvasContext.closePath();// 绘制矩形const rectX = centerX - this.rectWidth / 2;const rectY = centerY + this.circleRadius + 10; // 将矩形放置在圆形下方canvasContext.beginPath();canvasContext.rect(rectX, rectY, this.rectWidth, this.rectHeight);canvasContext.fillStyle = this.rectColor;canvasContext.fill();canvasContext.closePath();// 绘制文本const textX = centerX - (this.text.length * this.fontSize / 2); // 简单文本居中（未考虑字体宽度差异）const textY = rectY + this.rectHeight + 20; // 将文本放置在矩形下方canvasContext.font = `${this.fontSize}px sans-serif`;canvasContext.fillStyle = this.textColor;canvasContext.fillText(this.text, textX, textY);}build() {Canvas().width('100%').height('100%').onDraw((canvasContext: canvas.CanvasRenderingContext2D, width: number, height: number) => {this.draw(canvasContext, width, height);}).onTouch((event: TouchEvent) => {this.handleTouch(event);});}
}// 页面组件
@Entry
@Component
struct MyPage {build() {Column() {// 使用自定义画布组件InteractiveCanvasComponent().width('300vp').height('300vp');// 可以添加其他UI元素，如按钮、输入框等，用于进一步控制画布}.justifyContent(FlexAlign.Center).alignItems(FlexAlign.Center);}
}

说明

1. 自定义画布组件：InteractiveCanvasComponent是一个包含多个属性和绘制逻辑的自定义组件。它使用@Prop装饰器来接收外部传递的属性值，并使用@State装饰器来管理内部状态（如触摸点）。
2. 触摸事件处理：handleTouch方法用于处理触摸事件。在这个示例中，它仅在touchstart事件发生时被调用，并随机改变圆形的颜色。你可以根据需要添加更多的触摸事件处理逻辑（如touchmove和touchend）。
3. 绘制逻辑：draw方法包含绘制背景、圆形、矩形和文本的逻辑。它使用canvasContext对象来执行绘制操作。
4. 页面组件：MyPage是页面组件，它使用InteractiveCanvasComponent并设置其宽度和高度。你还可以在页面上添加其他UI元素来进一步控制画布。

注意事项

• 由于ArkTS的API可能会随着版本的更新而变化，因此在实际项目中，你需要根据最新的API文档来调整代码。
• 在这个示例中，getRandomColor方法返回了一个十六进制字符串作为颜色值。在实际项目中，你需要根据ArkTS的Color类型来转换或映射这个值。如果ArkTS提供了从十六进制字符串到Color对象的转换函数，你应该使用那个函数。
• 触摸事件处理中的this.lastTouchPoint在这个示例中没有被进一步使用，但你可以根据需要在绘制逻辑或其他地方使用它。
• 文本绘制时使用了简单的居中逻辑，但没有考虑字体宽度的差异。在实际项目中，你可能需要使用更精确的文本布局算法。