柿餅UI學習心得分享（2）

概述

介紹：

Persimmon 是一套運行在RT-Thread嵌入式實時操作系統上的圖形用戶組件界面，用于提供圖形界面的用戶交互。
它采用C++語言編寫，基于C語言實現的底層圖形像素引擎，為上層應用提供了控件、窗口、signal/slot，手勢動畫等機制。 為了提高UI的開發靈活性、降低用戶開發時間和成本，Persimmon 提供了所見即所得的UI設計器。用戶可通過設計器輕松實現UI界面設計，并利用JavaScript腳本實現對界面邏輯的控制。

---

代碼已經放到了我的 Gitee上面了，需要的小伙伴可以自己去下載，歡迎交流。

---

作業題目

直接上圖：

---

??可以看出周老師為我們布置的作業很有挑戰性和創新性：幽靈檢測儀，心率測量儀，安全營地等等，難度比較第一次提升了不少。

說一下大體的思路吧：

• 1.幽靈檢測儀：我最初的思路是用畫布做儀表盤，最后發現有個控件叫做"clock"所以只需要做一個時鐘利用秒針的旋轉進行掃描。同時如果在掃描的過程中要顯示掃描的節點信息，需要借助lable控件，使用其visible屬性設置顯示以及不顯示即可。
• 2.心率檢測儀：這個部分我是參考了叫fyywhy的這位大佬，心率測量借助Canvas畫布控件，在Canvas控件中，因為draw()方法只能調用一次。所以我們只能一次把路徑指定后，最后調用draw()方法一次性繪制。所以先初始化一個數組，存儲每個點的x,y坐標。然后每次遞增數組下標。進行遍歷繪制來產生動畫效果。
• 3.安全營地：顯示安全營地的名稱、距離、安全等級，這個我們使用自定義面板調用即可，在柿餅官方的基礎教程中已經有所展示。

雷達掃描的代碼：

onLoad: function (event) {var that = thisvar 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;}},

---

????大體上的需求就是這么些，這次作業真的極大程度上鍛煉了我的js水平以及如何展示更加美觀的UI視覺效果，很感謝RTT的柿餅UI平臺以JS代碼的方式去讓我們更加方便的設計嵌入式設備UI界面。題目和源碼都放在git上面了，需要的可以自行下載。如果有錯誤的地方歡迎指正，共同進步！謝謝。

總結

以上是生活随笔為你收集整理的【12月原创】RT-thread - 柿饼UI学习心得分享的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。