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

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

HarmonyOS
2024-05-26 12:21:30
浏览
收藏 0
回答 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%') 
  } 
}

实现效果

适配的版本信息

 IDE:DevEco Studio 4.0.3.600

SDK:HarmoneyOS 4.0.10.11

分享
微博
QQ
微信
回复
2024-05-27 16:08:57
相关问题
请问鸿蒙eTS坐标系怎么确定?
5509浏览 • 1回复 待解决
百度地图坐标系影响距离计算吗?
1835浏览 • 1回复 待解决
Polyline组件绘制坐标不准确
701浏览 • 1回复 待解决
Path组件绘制线条粗细不一致
671浏览 • 1回复 待解决
如何手动重启 OceanBase 集群?
3597浏览 • 1回复 待解决
如何可以获取组件中心点坐标
372浏览 • 1回复 待解决
SurfaceProvider绘制延迟
6118浏览 • 4回复 已解决
etstext input手动控制获得和失去焦点
2937浏览 • 1回复 待解决
前端手动刷新显示Rdb数据
429浏览 • 1回复 待解决
独立指定帧率来运行UI绘制
383浏览 • 1回复 待解决
如何在鸿蒙移动端引入坐标图?
828浏览 • 1回复 待解决
条形码识别坐标信息为空
582浏览 • 1回复 待解决
鸿蒙如何实现位图绘制
8380浏览 • 1回复 待解决
如何操作canvas重新绘制
405浏览 • 1回复 待解决
PolarDB如何手动添加limit分页功能?
1323浏览 • 1回复 待解决
canvas怎么绘制资源目录下图片
244浏览 • 1回复 待解决
ArkTS 如何生成如下 uuid呢?
380浏览 • 1回复 待解决
如何生成UUID字符串
842浏览 • 1回复 待解决
Canvas绘制内容如何动态更新
442浏览 • 1回复 待解决