From 911bcb592af946e521c27e0e4818cfc95e7fcd34 Mon Sep 17 00:00:00 2001
From: wanganxp <wanganxp@gmail.com>
Date: Tue, 17 Oct 2023 05:18:17 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8A=8Adraw=E7=9A=84=E7=A4=BA=E4=BE=8B?=
 =?UTF-8?q?=E4=BB=8Eview=E6=8C=AA=E5=88=B0=E4=BA=86api=E7=9A=84=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2=E5=88=86=E7=B1=BB=E4=B8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                                    | 16 +++++----
 .../element-draw/element-draw.uvue}           | 34 +++++++++----------
 pages/component/view/view.uvue                |  8 -----
 pages/tabBar/API.uvue                         |  6 +++-
 4 files changed, 31 insertions(+), 33 deletions(-)
 rename pages/{component/view/view-draw.uvue => API/element-draw/element-draw.uvue} (84%)

diff --git a/pages.json b/pages.json
index 606fe3a7..a6b55ce9 100644
--- a/pages.json
+++ b/pages.json
@@ -14,12 +14,6 @@
         "navigationBarTitleText": "view"
       }
     },
-    {
-      "path": "pages/component/view/view-draw",
-      "style": {
-        "navigationBarTitleText": "DrawableContext"
-      }
-    },
     {
       "path": "pages/component/scroll-view/scroll-view",
       "style": {
@@ -970,7 +964,15 @@
       "path" : "pages/API/element-takesnapshot/element-takesnapshot",
       "style" :
       {
-        "navigationBarTitleText" : "",
+        "navigationBarTitleText" : "takeSnapshot",
+        "enablePullDownRefresh" : false
+      }
+    },
+    {
+      "path" : "pages/API/element-draw/element-draw",
+      "style" : 
+      {
+        "navigationBarTitleText" : "getDrawableContext",
         "enablePullDownRefresh" : false
       }
     }
diff --git a/pages/component/view/view-draw.uvue b/pages/API/element-draw/element-draw.uvue
similarity index 84%
rename from pages/component/view/view-draw.uvue
rename to pages/API/element-draw/element-draw.uvue
index d358b9dd..1b8be329 100644
--- a/pages/component/view/view-draw.uvue
+++ b/pages/API/element-draw/element-draw.uvue
@@ -3,14 +3,14 @@
   <scroll-view style="flex: 1">
   <!-- #endif -->
     <view>
-      <view ref="draw-text-view" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
-      <view ref="draw-line-view" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
-      <view ref="draw-circle-view" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
-      <view ref="draw-dash-line" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
-      <view ref="draw-house" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
-      <view ref="draw-style" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
-      <view ref="draw-odd" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
-      <view ref="draw-arcto" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
+      <view id="draw-text-view" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
+      <view id="draw-line-view" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
+      <view id="draw-circle-view" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
+      <view id="draw-dash-line" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
+      <view id="draw-house" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
+      <view id="draw-style" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
+      <view id="draw-odd" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
+      <view id="draw-arcto" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
     </view>
   <!-- #ifdef APP -->
   </scroll-view>
@@ -57,8 +57,8 @@
     },
     methods: {
       drawText() {
-        let element = (this.$refs['draw-text-view'] as Element)
-        let ctx = element.getDrawableContext()
+        let element = uni.getElementById('draw-text-view')
+        let ctx = element!.getDrawableContext()
         let width = element.getBoundingClientRect().width
         ctx!!.reset()
         ctx!!.font = "15px"
@@ -74,7 +74,7 @@
         ctx!!.update()
       },
       drawLines() {
-        let ctx = (this.$refs['draw-line-view'] as Element).getDrawableContext()
+        let ctx = uni.getElementById('draw-line-view')!.getDrawableContext()
         ctx!!.reset()
         ctx!!.lineWidth = 10;
 
@@ -129,7 +129,7 @@
         y += 15;
       },
       drawCircles() {
-        let ctx = (this.$refs['draw-circle-view'] as Element).getDrawableContext()
+        let ctx = uni.getElementById('draw-circle-view')!.getDrawableContext()
         ctx!!.reset()
         // Draw shapes
         for (var i = 0; i < 4; i++) {
@@ -155,7 +155,7 @@
       },
 
       drawStar() {
-        let ctx = (this.$refs['draw-dash-line'] as Element).getDrawableContext()
+        let ctx = uni.getElementById('draw-dash-line')!.getDrawableContext()
         ctx!!.reset()
         ctx!!.beginPath();
         var horn = 5; // 画5个角
@@ -226,7 +226,7 @@
         return result
       },
       drawhouse() {
-        let ctx = (this.$refs['draw-house'] as Element).getDrawableContext()
+        let ctx = uni.getElementById('draw-house')!.getDrawableContext()
         ctx!!.reset()
         ctx!!.lineWidth = 10;
 
@@ -246,7 +246,7 @@
         ctx!!.update()
       },
       drawPoint() {
-        let ctx = (this.$refs['draw-style'] as Element).getDrawableContext()
+        let ctx = uni.getElementById('draw-style')!.getDrawableContext()
         ctx!!.reset()
         for (let i = 0; i < 6; i++) {
           for (let j = 0; j < 6; j++) {
@@ -265,7 +265,7 @@
         ctx!!.update()
       },
       drawRect() {
-        let ctx = (this.$refs['draw-odd'] as Element).getDrawableContext()
+        let ctx = uni.getElementById('draw-odd')!.getDrawableContext()
         ctx!!.reset()
         // Create path
         ctx!!.moveTo(30, 90);
@@ -283,7 +283,7 @@
 
       },
       drawArcTo() {
-        let ctx = (this.$refs['draw-arcto'] as Element).getDrawableContext()
+        let ctx = uni.getElementById('draw-arcto')!.getDrawableContext()
         ctx!.reset()
         ctx!.beginPath();
         ctx!.moveTo(50, 20);
diff --git a/pages/component/view/view.uvue b/pages/component/view/view.uvue
index c2e5fdbb..54383fe6 100644
--- a/pages/component/view/view.uvue
+++ b/pages/component/view/view.uvue
@@ -12,9 +12,6 @@
       <boolean-data :defaultValue="false" title="是否阻止本节点的祖先节点出现点击态" @change="change_stop_propagation_boolean"></boolean-data>
       <enum-data :items="start_time_enum" title="按住后多久出现点击态" @change="radio_change_start_time_enum"></enum-data>
       <enum-data :items="stay_time_enum" title="手指松开后点击态保留时间" @change="radio_change_stay_time_enum"></enum-data>
-      <view class="uni-padding-wrap uni-common-mt uni-common-mb">
-        <button class="uni-common-mt" @click="goGeneralAttribute('/pages/component/view/view-draw')">DrawableContext</button>
-      </view>
     </view>
     <!-- #ifdef APP -->
   </scroll-view>
@@ -46,11 +43,6 @@ export default {
     radio_change_stay_time_enum(time : number) {
       this.stay_time = time
     },
-    goGeneralAttribute(path: string) {
-      uni.navigateTo({
-        url: path,
-      })
-    },
   },
 }
 </script>
diff --git a/pages/tabBar/API.uvue b/pages/tabBar/API.uvue
index 7e5adfca..61c0dc4f 100644
--- a/pages/tabBar/API.uvue
+++ b/pages/tabBar/API.uvue
@@ -148,9 +148,13 @@
                 api: ["getElementById"]
               },
               {
+                name: 'element draw',
+                url: 'element-draw',
+                api: ["Element.getDrawableContext"]
+              },{
                 name: 'element截图',
                 url: 'element-takesnapshot',
-                api: ["takeSnapshot"]
+                api: ["Element.takeSnapshot"]
               },
               {
                 name: 'node节点',
-- 
GitLab