• Lv0
    粉丝0

积分9 / 贡献0

提问3答案被采纳0文章0

利用arkui中的canvas组件做手写板出现书写中断的现象,api9和api10表现不同

jack0288 显示全部楼层 发表于 2024-3-22 15:32:38

使用arkui的Canvas组件,写了一个简单的画板程序,就是利用触摸Touch事件,获取TouchObject的x,y进行笔画的书写,笔画就是利用context2d进行点和点之间的画线。

问题:发现在api10中,previewer和真机调试运行,书写经常会断,查了半天没发现程序逻辑问题,后来偶然发现在同样代码api9中previewer不会出现该现象,目前没有api9真机调试环境。

现在问题就卡在这了,看了坛子里一些其他的画板代码,都是一次touch down里面,只调用一次beginPath,后续的touchmove然后反复stroke,但这样的调用其实是反复重头绘制的,而不是只绘制当前touch移动的增量,但这样调用确实不会出现书写断笔画的现象。

个人怀疑是api9和10中关于context2d的beginPath和stroke的逻辑有些许不同,有Canvas方面的专家给瞧瞧,是什么问题。

现象截图:

statement.jpg

以下是我精简过的最小运行的页面:

class Point {
  x: number;
  y: number;
  constructor(x: number = 0, y: number = 0) {
    this.x = x; this.y = y;
  }
}
@Entry
@Component
struct Index {
  settings: RenderingContextSettings = new RenderingContextSettings(true);
  context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
  lastPoint: Point | null | undefined;
  strokePath: Point[] = [];
  build() {
    Canvas(this.context)
      .onReady(() => {
        this.context.lineWidth = 3;
        this.context.strokeStyle = "#ffffff"
      })
      .onTouch((event: TouchEvent) => {
        let touch: TouchObject = event.changedTouches[0];
        let currPoint = new Point(touch.x, touch.y);
        this.strokePath.push(currPoint);
        switch (event.type) {
          case TouchType.Down:
            this.lastPoint = currPoint;
            break;
          case TouchType.Move:
            //绘制增量线条
            this.drawLine(this.lastPoint, currPoint);
            break;
          case TouchType.Up:
          case TouchType.Cancel:
            this.drawLine(this.lastPoint, currPoint);
            this.strokePath = [];
            break;
        }
        this.lastPoint = currPoint;
      })
      .width("100%")
      .height("100%")
      .backgroundColor("#006650")
  }

  /**
   * 利用context2d进行点线绘制
   * @param from
   * @param to
   */
  drawLine(from: Point, to: Point) {
    this.context.beginPath();
    this.context.moveTo(from.x, from.y);
    this.context.lineTo(to.x, to.y);
    this.context.stroke();
  }
}
您尚未登录,无法参与评论,登录后可以:
参与开源共建问题交流
认同或收藏高质量问答
获取积分成为开源共建先驱

精彩评论3

jack0288

沙发 发表于 2024-3-25 09:46:41
发现harmoy相关技术问题的讨论不是特别多啊,搜百度也是,竟是一些没营养的模板文章。
我这个问题我自己已经搞了三天了,还是没解决,没办法才到论坛注册了账号这里提问,但看论坛问题的参与热度况,是得到不到答案了;当然我承认我这个问题也很隐蔽,但问题就这么撩着没人管,也是很失望。
harmony系统要想加速推广还得重视基层相关技术问题的辅助解决啊,harmony的自身的开发人员应该不会只在后方闭门堆代码吧?能不能安排一些有应用经验的技术人员每天在论坛帮助三方的开发人员解决一些问题吗?这是帮助我们也是帮助harmony自己。

s_hao

板凳 发表于 2024-3-27 11:30:40
有具体日志可以发过来吗,我们这边复现不了你说的这个问题

云端筑梦

地板 发表于 2024-3-28 11:25:32
修改一下配置文件"compileSdkVersion": 10,
        "compatibleSdkVersion": 9,这样可以兼容api9,看一下这样可以解决你的问题吗
屏幕截图 2024-03-28 112324.png

Copyright   ©2023  OpenHarmony开发者论坛  京ICP备2020036654号-3 |技术支持 Discuz!

返回顶部