1.1K Star 6K Fork 4.8K

OpenHarmony / docs

 / 详情

Canvas组件,在setInterval内绘制不起作用

已完成
缺陷
创建于  
2022-04-26 12:10

【任务描述】
使用Canvas组件,在onReady的回调里边,我想使用setInterval方法定时绘制,但是实际测试不起作用呀,测试代码如下:

@Entry
@Component
struct Index {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.context.fillStyle = '#0000ff'
          this.context.fillRect(20, 160, 150, 100)

          var progress = 10;
          this.context.lineWidth = 4;

          var id = setInterval(() => {
            // 绘制进度
            this.context.arc(130, 330, 45, 0, progress / 100 * Math.PI * 2);
            this.context.stroke()
            progress += 10;
            if(progress > 100) {
              clearInterval(id)
            }
          },1000);
        })
    }
    .width('100%')
    .height('100%')
  }
}

运行结果如下:
输入图片说明

请问:是我使用的方式不对吗?还是说目前Canvas不可以这样使用喃?希望专家们指点一下,多谢啦

我用的环境如下:
IDE: DevEco Studio 3.0 Beta3 for OpenHarmony(Build Version: 3.0.0.900, built on March 30, 2022)
SDK: API 8 (3.1.5.5)

【解决方案】

【任务来源】

评论 (5)

llew2011 创建了缺陷
孙悦 负责人设置为LiAn
LiAn 添加了
 
question
标签
LiAn 任务状态待办的 修改为修复中
LiAn 添加协作者LiAn
LiAn 负责人LiAn 修改为kukixi
LiAn 取消协作者LiAn
展开全部操作日志

开发者好,该问题我们会尽快确认,还请谅解。

LiAn 成员
回复 LiAn 成员

目前Canvas组件支持的通用事件不存在定时器的绘制调用,若您想进一步探究代码的写法,还请在功能仓arkui_ace_engine提问:https://gitee.com/openharmony/arkui_ace_engine

你们把这个问题迁移到ace仓下吧

另外我想利用canvas实现绘制进度条的功能,每隔1秒更新下进度,就像样例给的使用arc()方法绘制,请问如何实现喃?

LiAn 添加协作者LiAn
LiAn 任务状态修复中 修改为验收中
LiAn 任务状态验收中 修改为已完成

登录 后才可以发表评论

状态
负责人
项目
里程碑
Pull Requests
关联的 Pull Requests 被合并后可能会关闭此 issue
分支
开始日期   -   截止日期
-
置顶选项
优先级
预计工期 (小时)
参与者(2)
4965114 llew2011 1578977801
其他
1
https://gitee.com/openharmony/docs.git
git@gitee.com:openharmony/docs.git
openharmony
docs
docs

搜索帮助

14c37bed 8189591 565d56ea 8189591