Persimmon UI作业（三）——末日求生系统（2）

概述

介绍：

Persimmon 是一套运行在RT-Thread嵌入式实时操作系统上的图形用户组件界面，用于提供图形界面的用户交互。
它采用C++语言编写，基于C语言实现的底层图形像素引擎，为上层应用提供了控件、窗口、signal/slot，手势动画等机制。为了提高UI的开发灵活性、降低用户开发时间和成本，Persimmon 提供了所见即所得的UI设计器。用户可通过设计器轻松实现UI界面设计，并利用JavaScript脚本实现对界面逻辑的控制。

柿饼UI为我们提供了丰富的UI控件，例如Button,label,ProgressBar…等等，拖拽式设计UI布局可以让开发者更加快速的投入到设计中。它很类似Android的UI可以通过拖拽式进行布局，但又不同于Android，因为柿饼UI使用JS脚本语言进行编程，这对于有微信小程序，web前端经验的开发者而言，可以更加快速的上手柿饼UI。

代码已经放到了我的 Gitee上面了，需要的小伙伴可以自己去下载，欢迎交流。

作业题目

直接上图：

作业需求

可以看出周老师为我们布置的作业很有挑战性和创新性：幽灵检测仪，心率测量仪，安全营地等等，难度比较第一次提升了不少。

作业思路

说一下大体的思路吧：

1.幽灵检测仪：我最初的思路是用画布做仪表盘，最后发现有个控件叫做”clock”所以只需要做一个时钟利用秒针的旋转进行扫描。同时如果在扫描的过程中要显示扫描的节点信息，需要借助lable控件，使用其visible属性设置显示以及不显示即可。
2.心率检测仪：这个部分我是参考了叫fyywhy的这位大佬，心率测量借助Canvas画布控件，在Canvas控件中，因为draw()方法只能调用一次。所以我们只能一次把路径指定后，最后调用draw()方法一次性绘制。所以先初始化一个数组，存储每个点的x,y坐标。然后每次递增数组下标。进行遍历绘制来产生动画效果。
3.安全营地：显示安全营地的名称、距离、安全等级，这个我们使用自定义面板调用即可，在柿饼官方的基础教程中已经有所展示。

雷达扫描

雷达扫描的代码：

onLoad: function (event) {
        var that = this
        var sec = 0;
        var count = 0;
        var is_show = 1;
        var scan_count = 0;

        this.setData({
            Clock1: {
                second: { x: 0, y: 115 }
            },
            p1: { visible: false }
        })

        //默认不显示
        that.setData({ p1: { visible: false } });
        that.setData({ p2: { visible: false } });
        that.setData({ p3: { visible: false } });

        this.timer = setInterval(function () {
            that.setData({ Clock1: { value: sec++ } })

            count++;
            if (18 < count && 1 == is_show) {
                is_show = 0;
                that.setData({ p1: { visible: true } });
                that.setData({ p2: { visible: true } });
                that.setData({ p3: { visible: true } });
            }
            if (25 < count) {
                that.setData({ p1: { visible: false } });
                that.setData({ p2: { visible: false } });
                that.setData({ p3: { visible: false } });
            }
            if (60 <= count) {
                is_show = 1;
                count = 0;
            }

            if (0 == count % 60) {
                scan_count++;
                that.setData({ scan_count: { value: scan_count.toString() } });
            }

            if (that.progress > 105) {
                clearInterval(that.timer);
                pm.navigateBack('scaner_page/scaner_page')
            } else {
                that.setData({ CircleProgress1: { value: that.progress } });
            }

        }, 30)
    },

心率测量

心率测量仪Canvas的代码：

    btn_again: function (event) {
        var that = this;
        var base = 100;
        var point_arr = [];

        for (var i = 0; i < 90; i++) {
            var point = {};

            point.x = i * 5;
            point.y = get_range_num(base - this.sub_data, base + this.add_data);

            if (0 == i % 10) {
                point.y = get_range_num(base + this.sub_data, base + this.add_data);//30-40
            }
            if (0 == i % (10 + 1)) {
                point.y = get_range_num(base - this.add_data, base - this.sub_data);//10-20
            }
            point_arr.push(point);
        }

        function move(pro) {
            var ctx = pm.createCanvasContext('Canvas1', that);
            pro *= 100;
            ctx.setFillStyle(get_rand_color());
            ctx.moveTo(0, 100);
            for (var i = 0; i < pro; i++) {
                if (i < point_arr.length) {
                    ctx.lineTo(point_arr[i].x, point_arr[i].y);
                }
            }
            ctx.stroke();
            ctx.draw();
        }        

        var start = null;
        //动画渲染调用
        function renderCallback(timestamp) {
            if (!start)
                start = timestamp;
            var progress = (timestamp - start) / 4000;
            if (progress <= 0.999) {
                move(progress);
            }

            if (0.999 < progress) {
                start = timestamp;
                move(progress);
            }

            if (progress < 1) {
                requestAnimationFrame(renderCallback);
            }
        }
        requestAnimationFrame(renderCallback); // start first frame    
    },

    btn_add: function (event) {
        this.add_data += 20;
        this.sub_data -= 10;
    },

    btn_sub: function (event) {
        if (this.add_data <= 0) {
            console.log("slow！！");
            this.add_data = 0;
            this.sub_data = 0;
        } else {
            this.add_data -= 20;
            this.sub_data += 10;
        }
    },