【中软国际】HarmonyOS 自定义控件之JS进度条 原创 精华

发布于 2021-8-26 15:23
浏览
9收藏

前言

在我们日常开发的里面,很多场景经常会用到进度条,而系统提供的进度条样式又无法满足我们的使用,这时候我们就需要自定义一个进度条,自定义JS进度条主要涉及以下知识点:

  • 如何自定义组件及引用
  • 如何自定义绘制图形(draw)
  • 如何创建并执行动画(animation)
  • 如何设置自定义组件的参数(setter)
  • 如何监听自定义组件的参数(getter)

效果演示

【中软国际】HarmonyOS 自定义控件之JS进度条-开源基础软件社区

代码实现

如何自定义组件及引用

  1. Js自定义组件,只需要新创建一个包,直接在里面编写界面,样式,逻辑代码即可。如果需要使用该组件,将其完整拷贝到自己的项目结构下进行引用即可。我们自定义一个Progress进度条控件,项目结构如下图:
    【中软国际】HarmonyOS 自定义控件之JS进度条-开源基础软件社区

  2. 使用的时候,我们需要给自定义组件进行标签声明,然后就可以使用该标签了:
    <index.hml>

// src表示我们引用的自定义组件的文件,name表示我们给该自定义组件声明一个标签名
<element src="../progress/progress.hml" name="progress-bar"></element>
<div class="container">
    // 声明之后,就可以使用这个自定义的标签了
    <progress-bar></progress-bar>

    ...
</div>

如何自定义绘制图形

说到自定义绘制,自然离不开canvas,首先我们给自定义组件增加一个<canvas>标签,并在JS文件中描述绘制:
<progress.hml>

<stack class="frame-layout">
    <canvas id="progress-bar" class="progress-bar" ontouchmove="onTouchEvent"></canvas>
    <text if="{{ display }}" class="progress-bar">{{ progressText }}</text>
</stack>

在JS中定义一个draw方法,并且传入一个CanvasRenderingContext2D参数,这个参数我们可以理解为canvas + paint,所有绘制都是通过它进行调用:
<progress.js>

    draw(ctx) {
        this.display = true
        ctx.lineWidth = this.circleWidth
        ctx.lineCap = 'round'
        // ctx可以理解为canvas + paint
        ctx.clearRect(0, 0, this.width, this.height) // 会闪屏,系统渲染问题
        ctx.save() // save1
        ctx.translate(this.width / 2, this.height / 2)
        // draw background
        ctx.beginPath()
        ctx.strokeStyle = this.backgroundColor
        ctx.arc(0, 0, 100, 0, 2 * Math.PI) // r = 100, 参数是弧度,角度 = 弧度 / PI * 180
        ctx.stroke() // 绘制
        ctx.closePath()
        // draw progress
        ctx.save()
        ctx.rotate(-90 / 180 * Math.PI)
        ctx.beginPath()
        ctx.strokeStyle = this.progressColor
        ctx.arc(0, 0, 100, 0, this.angle / 180 * Math.PI) // r = 100, 参数是弧度,角度 = 弧度 / PI * 180
        ctx.stroke() // 绘制
        ctx.closePath()
        ctx.restore()
        ctx.restore() // save1
        this.notifyChanged()
    }

这部分逻辑并不复杂,都有注释,就是绘制一个圆环背景,然后根据进度参数在圆环上绘制一个圆弧进度,相信做过自定义控件的同学都能够非常熟悉。

如何创建并执行动画

  1. 首先我们需要在init的时候创建一个动画对象,并且设置好初始的动画参数:
    <progress.js>
    onInit() {
        // 动画参数(具体参数类型和参数说明参考官方文档)
        var options = {
            duration: this.animDuration, // 动画时长
            direction: 'normal', // 播放模式
            easing: 'linear', // 差值器
            fill: 'forwards', // 动画结束后状态
            iterations: 1, // 执行次数
            begin: 0, // 起始值
            end: 360.0 // 终止值
        };
        var _this = this
        this.animator = Animator.createAnimator(options)
        this.animator.onframe = function (value) {
            // 动画每一帧回调,类似我们熟悉的onAnimateUpdate回调
            _this.angle = value
            // 刷新绘制
            _this.draw(_this.ctx)
        }
        ...
    }, 
  1. 接着我们需要在特定的时候开启动画,例如我们在接收到外部传进来的进度参数后,我们需要更新动画的起始值和终止值,并且开始执行动画:
    <progress.js>
    onProgressChanged(oldV, newV) { 
        console.log("onProgressChanged from:" + oldV + " to: " + newV)
        this.initWidget()
        // 进度值范围限定为[0, 1]
        if (oldV >= 1) {
            oldV = 1
        }
        if (newV >= 1) {
            newV = 1
        }
        // 更新动画的起始和终止参数
        var options = {
            duration: this.animDuration,
            direction: 'alternate-reverse',
            easing: 'linear',
            fill: 'forwards',
            iterations: 1,
            begin: oldV * 360,
            end: newV * 360
        };
        this.animator.update(options)
        // 开始执行动画
        this.animator.play()
    },

如何设置自定义组件的参数

  1. 我们自定义组件,并不能像之前一样简单的暴露个公开方法给外部调用。由于其数据驱动的设计,我们可以定义一些自定义属性参数,当外部修改参数时我们就可以接收到信息进行主动动作(setter):
    <progress.js>
    props: [
        'progress', // 进度
        'backgroundColor', // 圆环背景颜色
        'progressColor' // 进度前景颜色
    ],
    ...
  1. 监听这些对外暴露的属性值变化(listener):
    <progress.js>
    onInit() {
        ...
        // 监听自定义属性值变化
        this.$watch('progress', 'onProgressChanged')
        this.$watch('backgroundColor', 'onBackgroundChanged')
        this.$watch('progressColor', 'onForegroundChanged')
        ...
    },   
    // backgroundColor变化时会触发该回调
    onBackgroundChanged(oldV, newV) {
        this.backgroundColor = newV
    },
    // progressColor变化时会触发该回调
    onForegroundChanged(oldV, newV) {
        this.progressColor = newV
    },
    // progress变化时会触发该回调
    onProgressChanged(oldV, newV) {
        console.log("onProgressChanged from:" + oldV + " to: " + newV)
        this.initWidget()
        if (oldV >= 1) {
            oldV = 1
        }
        if (newV >= 1) {
            newV = 1
        }
        var options = {
            duration: this.animDuration,
            direction: 'alternate-reverse',
            easing: 'linear',
            fill: 'forwards',
            iterations: 1,
            begin: oldV * 360,
            end: newV * 360
        };
        this.animator.update(options)
        this.animator.play()
    }, 
  1. 外部设置参数,当外部改变这些参数时,我们自定义组件内部的回调方法就会触发,并执行刷新逻辑:
    <index.hml>
<element src="../progress/progress.hml" name="progress-bar"></element>
<div class="container">
    <progress-bar background-color="#c2f135"
                  progress-color="#6bfc33"
                  progress="{{ progress }}">
    </progress-bar>
    ...
</div>

如何监听自定义组件的参数

上面我们说到了外部如何改变自定义组件内部的属性,本质上就是一个典型观察者模式。同理,外部调用者需要监听我们自定义组件的参数变化,也是通过这种方式:

  1. 首先我们在自定义组件中需要定义一个被观察者对象(key),并且在该对象值变化时对外发送消息:
    <progress.js>
    notifyChanged() {
        // currentAngle, currentProgress就是被观察者对象,key-value结构,value就是我们对外发送的值
        // 注意:驼峰命名
        this.$emit("currentAngle", this.angle)
        this.$emit("currentProgress", Math.ceil(this.angle / 3.6) / 100)
        this.progressText = Math.ceil(this.angle / 3.6) + "%"
    },
  1. 外部使用者需要注册监听回调方法,对被观察者对象(key)进行监听:
    <index.hml>
<element src="../progress/progress.hml" name="progress-bar"></element>
<div class="container">
    // 通过@current-angle和@current-progress进行该参数的监听,注意参数前加"@",并且参数根据驼峰命名方式拆分单词,每个词语用"-"隔开
    <progress-bar background-color="#c2f135"
                  progress-color="#6bfc33"
                  progress="{{ progress }}"
                  @current-angle="onAngleChanged"
                  @current-progress="onProgressChanged">
    </progress-bar>
    ... 
</div>

<index.js>

    // 当自定义组件内部的 currentAngle, currentProgress变化时,会触发下面的回调方法通知外部使用者
    onAngleChanged(angle) {
        console.log("onAngleChanged: " + angle.detail)
    },
    onProgressChanged(progress) {
        console.log("onProgressChanged: " + progress.detail)
    }

其他关键点

  1. <canvas>标签的绘制内容默认是不显示的,我们可以在初始化的时候监听首帧回调,主动进行刷新一次:
    <progress.js>
    onInit() {
        ...
        // 监听首帧,触发首次绘制,类似attachToWindow的触发时机
        requestAnimationFrame(function () {
            _this.initWidget()
            _this.draw(_this.ctx)
        })
    },
  1. 自定义组件如何获取宽高信息,在API6+系统已经提供相关的方法可以进行获取,类似onSizeChanged中读取宽高信息:
    <progress.js>
    initWidget() {
        console.log("init widget")
        if (this.ctx === null) {
            // 获取标签元素
            let widget = this.$element('progress-bar');
            this.ctx = widget.getContext('2d', {
                antialias: true
            })
            // 获取宽高,并计算出绘制圆环的宽高,中心点,半径信息
            this.width = widget.getBoundingClientRect().width
            this.height = widget.getBoundingClientRect().height
            this.centerX = widget.getBoundingClientRect().left + this.width / 2
            this.centerY = widget.getBoundingClientRect().top + this.height / 2
            console.log("canvas size = " + this.width + ", " + this.height)
            console.log("canvas center = " + this.centerX + ", " + this.centerY)
        }
    },
  1. canvas画布和我们通常理解的是不同的,它是存在绘制缓存的,所以每一帧刷新时,我们需要在绘制前先清空之前的绘制内容。目前鸿蒙清空画布时会概率出现闪屏问题。

以上就是实现一个自定义JS进度条的核心代码了,源代码:JsProgress

  • 作者:卢日见

更多原创内容请关注:中软国际 HarmonyOS 技术学院

入门到精通、技巧到案例,系统化分享HarmonyOS开发技术,欢迎投稿和订阅,让我们一起携手前行共建鸿蒙生态。

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
13
收藏 9
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐