绘制手动生成线条的坐标系

绘制组件的应用，制作一个可以手动绘制生成线条的坐标系。

HarmonyOS

薯条包装盒

2024-05-26 12:21:30

浏览

回答 1

待解决

回答 1

按赞同

按时间

QW_MA

关键就是通过点击事件获取到坐标位置来绘制线条，同时清空线条需要设置[[0, 0], [0, 0]]，只是设置为空被当成无效数据过滤了，界面会没有更新，另一种方式就是把绘制的Polyline通过组件整体重新替换，整体觉得还是设置来的简单。

@Entry 
@Component 
struct Index { 
  @State message: string = 'Hello World' 
  @State x_array: number[] = [1, 2, 3, 4, 5] //设置横坐标数组 
  @State pl: number[][] = [] //画线 
  @State plNum: number = 0; 
 
  //清除画线点 
  clearPl() { 
    // for (let i = this.pl.length;i > 0; i--) { 
    //   this.pl.pop(); 
    // } 
    this.pl = [[0, 0], [0, 0]] //不设置，清不掉？？？ 
    setTimeout(() => { 
      this.pl = [] 
    }, 20) 
 
    console.info(JSON.stringify(this.pl)); 
    this.plNum = 0; 
  } 
 
  build() { 
    Row() { 
      Column() { 
        Shape() { 
          Text("0") 
            .position({ x: 10, y: 10 }) 
          //绘制纵坐标 
          Polyline() 
            .width(200) 
            .height(150) 
            .points([[10, 10], [10, 300]]) 
            .stroke(Color.Black) 
          Text("100") 
            .position({ x: 10, y: 100 }) 
          Text("200") 
            .position({ x: 10, y: 200 }) 
          Text("300") 
            .position({ x: 10, y: 300 }) 
 
          Polyline() 
            .width(200) 
            .height(150) 
            .points([[10, 10], [300, 10]]) 
            .stroke(Color.Black) 
            .strokeOpacity(0.5) 
          //绘制横坐标 
          ForEach(this.x_array, (item: number, index: number) => { 
            Text(item.toString()) 
              .position({ x: item * 50, y: 10 }) 
            Polyline() 
              .width(1) 
              .height(1) 
              .points([[item * 50, 30], [item * 50 + 10, 30]]) 
              .stroke(Color.Brown) 
          }, (item: string) => item.toString()) 
 
          //坐标内画线 
          Polyline({ 
            width: 200, 
            height: 150 
          }) 
            .points(this.pl) 
            .stroke(Color.Black) 
            .strokeOpacity(0.5) 
            .fill(Color.Transparent) 
        } 
        .viewPort({ x: 0, y: 0, width: 300, height: 400 }) 
        .position({ x: 20, y: 100 }) 
        .onClick((event: ClickEvent) => { 
          this.pl[this.plNum] = [event.x, event.y] 
          console.info(JSON.stringify(this.pl)) 
          this.plNum++ 
        }) 
      } 
      .position({ x: 0, y: 0 }) 
      .width('100%') 
 
      Button("Clear") 
        .position({ x: 150, y: 500 }) 
        .onClick(() => this.clearPl()) 
    } 
    .height('100%') 
  } 
}

实现效果