From 491f6f7a25e3a0ebfeb3d5dcb62cf919d1767078 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E7=A3=8A?= <1633537611@qq.com>
Date: Fri, 25 Aug 2023 19:40:22 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=A5=E5=85=85=E4=BF=9D=E5=AD=98=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E5=88=B0=E7=9B=B8=E5=86=8C=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                                    |  12 +
 .../save-image-to-album.uvue                  |  43 +++
 pages/component/picker-view/picker-view.uvue  |   3 +
 pages/component/view/view-draw.uvue           | 290 ++++++++++++++++++
 pages/component/view/view.uvue                |  16 +-
 pages/tabBar/API.uvue                         |   7 +-
 6 files changed, 359 insertions(+), 12 deletions(-)
 create mode 100644 pages/API/save-image-to-album/save-image-to-album.uvue
 create mode 100644 pages/component/view/view-draw.uvue

diff --git a/pages.json b/pages.json
index b288610d..53bd822d 100644
--- a/pages.json
+++ b/pages.json
@@ -26,6 +26,12 @@
         "navigationBarTitleText": "general-event"
       }
     },
+	{
+	  "path": "pages/component/view/view-draw",
+	  "style": {
+	    "navigationBarTitleText": "DrawableContext"
+	  }
+	},
     {
       "path": "pages/component/scroll-view/scroll-view",
       "style": {
@@ -654,6 +660,12 @@
         "navigationBarTitleText": "图片预览"
       }
     },
+	{
+	  "path": "pages/API/save-image-to-album/save-image-to-album",
+	  "style": {
+	    "navigationBarTitleText": "保存图片到相册"
+	  }
+	},
     {
       "path": "pages/component/scroll-view/scroll-view-refresher",
       "style": {
diff --git a/pages/API/save-image-to-album/save-image-to-album.uvue b/pages/API/save-image-to-album/save-image-to-album.uvue
new file mode 100644
index 00000000..170780ad
--- /dev/null
+++ b/pages/API/save-image-to-album/save-image-to-album.uvue
@@ -0,0 +1,43 @@
+<template>
+	<!-- #ifdef APP -->
+	<scroll-view style="flex:1">
+	<!-- #endif -->
+		<image src="/static/uni.png" style="margin: 30rpx 200rpx;height:350rpx;width: 350rpx;"></image>
+		<button style="margin: 30rpx;" @click="saveImage">将图片保存到相册</button>
+	<!-- #ifdef APP -->
+	</scroll-view>
+	<!-- #endif -->
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			saveImage() {
+				uni.saveImageToPhotosAlbum({
+					filePath:"/static/uni.png",
+					success() {
+						uni.showToast({
+							icon:"none",
+							title:"图片保存成功，请到相册查看"
+						})
+					},
+					fail(e) {
+						uni.showToast({
+							icon:"none",
+							title:"图片保存失败，"+JSON.stringify(e)
+						})
+					}
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+
+</style>
diff --git a/pages/component/picker-view/picker-view.uvue b/pages/component/picker-view/picker-view.uvue
index 5730b34e..ac30977e 100644
--- a/pages/component/picker-view/picker-view.uvue
+++ b/pages/component/picker-view/picker-view.uvue
@@ -57,6 +57,9 @@
             }
         },
         methods: {
+			clickView() {
+				
+			},
             bindChange(e : PickerViewChangeEvent) {
                 const val = e.detail.value
                 this.result = val
diff --git a/pages/component/view/view-draw.uvue b/pages/component/view/view-draw.uvue
new file mode 100644
index 00000000..32aeeacd
--- /dev/null
+++ b/pages/component/view/view-draw.uvue
@@ -0,0 +1,290 @@
+<template>
+	<!-- #ifdef APP -->
+	<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>
+		<!-- #ifdef APP -->
+	</scroll-view>
+	<!-- #endif -->
+</template>
+
+<script>
+	import DrawableContext from 'io.dcloud.uniapp.runtime.DrawableContext';
+	var y = 160
+	export default {
+		data() {
+			return {
+				texts: [
+					'HBuilderX，轻巧、极速，极客编辑器',
+					'uni-app x，终极跨平台方案',
+					'uniCloud，js serverless云服务',
+					'uts，大一统语言',
+					'uniMPSdk，让你的App具备小程序能力',
+					'uni-admin，开源、现成的全端管理后台',
+					'uni-id，开源、全端的账户中心',
+					'uni-pay，开源、云端一体、全平台的支付',
+					'uni-ai，聚合ai能力',
+					'uni-cms，开源、云端一体、全平台的内容管理平台',
+					'uni-im，开源、云端一体、全平台的im即时消息',
+					'uni统计，开源、完善、全平台的统计报表',
+					'......'
+				] as string[]
+			}
+		},
+		onShow() {
+		},
+
+		onReady() {
+			this.drawText()
+			this.drawLines()
+			this.drawCircles()
+			this.drawStar()
+			this.drawhouse()
+			this.drawPoint()
+			this.drawRect()
+		},
+		onUnload() {
+			y = 160
+		},
+		methods: {
+			drawText() {
+				let node = (this.$refs['draw-text-view'] as INode)
+				let ctx = node.getDrawableContext()
+				let width = node.getBoundingClientRect().width
+				ctx!!.reset()
+				ctx!!.font = "15px"
+				ctx.textAlign = "center"
+				for (var i = 0; i < this.texts.length; i++) {
+					let value = this.texts[i]
+					if (i % 2 == 0) {
+						ctx!!.fillText(value, width / 2, (20 * (i + 1)))
+					} else {
+						ctx!!.strokeText(value, width / 2, (20 * (i + 1)))
+					}
+				}
+				ctx!!.update()
+			},
+			drawLines() {
+				let ctx = (this.$refs['draw-line-view'] as INode).getDrawableContext()
+				ctx!!.reset()
+				ctx!!.lineWidth = 10;
+
+				["round", "bevel", "miter"].forEach((join, i) => {
+					ctx.lineJoin = join;
+					ctx.beginPath();
+					ctx.moveTo(5, 10 + i * 40);
+					ctx.lineTo(50, 50 + i * 40);
+					ctx.lineTo(90, 10 + i * 40);
+					ctx.lineTo(130, 50 + i * 40);
+					ctx.lineTo(170, 10 + i * 40);
+					ctx.stroke();
+				});
+				ctx!!.lineWidth = 1
+				var space = 170
+				ctx.strokeStyle = '#09f';
+				ctx.beginPath();
+				ctx.moveTo(10 + space, 10);
+				ctx.lineTo(140 + space, 10);
+				ctx.moveTo(10 + space, 140);
+				ctx.lineTo(140 + space, 140);
+				ctx.stroke();
+				// Draw lines
+				ctx.strokeStyle = 'black';
+				['butt', 'round', 'square'].forEach((lineCap, i) => {
+					ctx.lineWidth = 15;
+					ctx.lineCap = lineCap;
+					ctx.beginPath();
+					ctx.moveTo(25 + space + i * 50, 10);
+					ctx.lineTo(25 + space + i * 50, 140);
+					ctx.stroke();
+				});
+				ctx.lineWidth = 1;
+				drawDashedLine([], ctx);
+				drawDashedLine([2, 2], ctx);
+				drawDashedLine([10, 10], ctx);
+				drawDashedLine([20, 5], ctx);
+				drawDashedLine([15, 3, 3, 3], ctx);
+				drawDashedLine([20, 3, 3, 3, 3, 3, 3, 3], ctx);
+				ctx.lineDashOffset = 18;
+				drawDashedLine([12, 3, 3], ctx);
+				ctx.lineDashOffset = 0
+				ctx.setLineDash([0])
+				ctx!!.update()
+			},
+			drawDashedLine(pattern : Array<number>, ctx : DrawableContext) {
+				ctx.beginPath();
+				ctx.setLineDash(pattern);
+				ctx.moveTo(0, y);
+				ctx.lineTo(300, y);
+				ctx.stroke();
+				y += 15;
+			},
+			drawCircles() {
+				let ctx = (this.$refs['draw-circle-view'] as INode).getDrawableContext()
+				ctx!!.reset()
+				// Draw shapes
+				for (var i = 0; i < 4; i++) {
+					for (var j = 0; j < 3; j++) {
+						ctx!!.beginPath();
+						var x = 25 + j * 50;               // x coordinate
+						var y = 25 + i * 50;               // y coordinate
+						var radius = 20;                    // Arc radius
+						var startAngle = 0;                     // Starting point on circle
+						var endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle
+						var clockwise = i % 2 == 0 ? false : true; // clockwise or anticlockwise
+
+						ctx.arc(x, y, radius, startAngle, endAngle, clockwise);
+
+						if (i > 1) {
+							ctx.fill();
+						} else {
+							ctx.stroke();
+						}
+					}
+				}
+				ctx!!.update()
+			},
+
+			drawStar() {
+				let ctx = (this.$refs['draw-dash-line'] as INode).getDrawableContext()
+				ctx!!.reset()
+				ctx!!.beginPath();
+				var horn = 5; // 画5个角
+				var angle = 360 / horn; // 五个角的度数
+				// 两个圆的半径
+				var R = 50;
+				var r = 20;
+				// 坐标
+				var x = 100;
+				var y = 100;
+				for (var i = 0; i < horn; i++) {
+					// 角度转弧度：角度/180*Math.PI
+					// 外圆顶点坐标
+					ctx.lineTo(Math.cos((18 + i * angle) / 180.0 * Math.PI) * R + x, -Math.sin((18 + i * angle) / 180.0 * Math.PI) * R + y);
+					// 內圆顶点坐标
+					ctx.lineTo(Math.cos((54 + i * angle) / 180.0 * Math.PI) * r + x, -Math.sin((54 + i * angle) / 180.0 * Math.PI) * r + y);
+				}
+				// closePath：关闭路径，将路径的终点与起点相连
+				ctx.closePath();
+				ctx.lineWidth = 3;
+				ctx.fillStyle = '#E4EF00';
+				ctx.strokeStyle = "red";
+				ctx.fill();
+				ctx.stroke();
+
+				ctx.lineWidth = 10;
+				ctx.beginPath()
+				ctx.moveTo(170, 100)
+				ctx.lineTo(255, 15)
+				ctx.lineTo(340, 100)
+				ctx.closePath()
+				ctx.fill()
+				ctx.strokeStyle = "blue"
+				ctx.stroke()
+				ctx.beginPath()
+				ctx.moveTo(170, 145)
+				ctx.lineTo(255, 45)
+				ctx.lineTo(340, 145)
+				ctx.closePath()
+				ctx.fill()
+				ctx.strokeStyle = "gray"
+				ctx.stroke()
+				// 未设置beginPath，导致上下表现一致，与前端一致
+				ctx.moveTo(170, 190)
+				ctx.lineTo(255, 90)
+				ctx.lineTo(340, 190)
+				ctx.closePath()
+				ctx.fillStyle = "orange"
+				ctx.fill()
+				ctx.strokeStyle = "khaki"
+				ctx.stroke()
+				ctx!!.update()
+			},
+			hex(num : number) : string {
+				if (num == 0) {
+					return "00"
+				}
+				let hexChars = "0123456789ABCDEF";
+				let result = "";
+				while (num > 0) {
+					let remainder : Int = num.toInt() % 16;
+					result = hexChars[remainder] + result;
+					num = Math.floor(num.toInt() / 16);
+				}
+				if (result.length == 1) {
+					return "0" + result
+				}
+				return result
+			},
+			drawhouse() {
+				let ctx = (this.$refs['draw-house'] as INode).getDrawableContext()
+				ctx!!.reset()
+				ctx!!.lineWidth = 10;
+
+				// Wall
+				ctx.strokeRect(75, 140, 150, 110);
+
+				// Door
+				ctx.fillRect(130, 190, 40, 60);
+
+				// Roof
+				ctx.beginPath();
+				ctx.moveTo(50, 140);
+				ctx.lineTo(150, 60);
+				ctx.lineTo(250, 140);
+				ctx.closePath();
+				ctx.stroke();
+				ctx!!.update()
+			},
+			drawPoint() {
+				let ctx = (this.$refs['draw-style'] as INode).getDrawableContext()
+				ctx!!.reset()
+				for (let i = 0; i < 6; i++) {
+					for (let j = 0; j < 6; j++) {
+						ctx!!.strokeStyle = `rgb(0,${Math.floor(255 - 42.5 * i)},${Math.floor(255 - 42.5 * j)})`;
+						ctx.beginPath();
+						ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
+						ctx.stroke();
+					}
+				}
+				for (let i = 0; i < 6; i++) {
+					for (let j = 0; j < 6; j++) {
+						ctx!!.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)},${Math.floor(255 - 42.5 * j)},0)`;
+						ctx.fillRect(180 + j * 25, i * 25, 25, 25);
+					}
+				}
+				ctx!!.update()
+			},
+			drawRect() {
+				let ctx = (this.$refs['draw-odd'] as INode).getDrawableContext()
+				ctx!!.reset()
+				// Create path
+				ctx!!.moveTo(30, 90);
+				ctx.lineTo(110, 20);
+				ctx.lineTo(240, 130);
+				ctx.lineTo(60, 130);
+				ctx.lineTo(190, 20);
+				ctx.lineTo(270, 90);
+				ctx.closePath();
+
+				// Fill path
+				ctx.fillStyle = "green";
+				ctx.fill("evenodd");
+				ctx!!.update()
+
+			}
+		}
+	}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/pages/component/view/view.uvue b/pages/component/view/view.uvue
index cb9b98fa..3a7811d5 100644
--- a/pages/component/view/view.uvue
+++ b/pages/component/view/view.uvue
@@ -232,8 +232,9 @@
             </view>
           </view>
         </view>
-        <button class="uni-common-mt" @click="goGeneralAttribute">更多属性测试</button>
-        <button class="uni-common-mt" @click="goGeneralEvent">更多事件测试</button>
+        <button class="uni-common-mt" @click="goGeneralAttribute('/pages/component/view/general-attribute')">更多属性测试</button>
+        <button class="uni-common-mt" @click="goGeneralAttribute('/pages/component/view/general-event')">更多事件测试</button>
+		<button class="uni-common-mt" @click="goGeneralAttribute('/pages/component/view/view-draw')">DrawableContext</button>
       </view>
     </view>
     <!-- #ifdef APP -->
@@ -243,16 +244,11 @@
 <script>
 export default {
   methods: {
-    goGeneralAttribute(){
+    goGeneralAttribute(path:string){
       uni.navigateTo({
-        url: '/pages/component/view/general-attribute'
+        url: path
       })
-    },
-    goGeneralEvent(){
-      uni.navigateTo({
-        url: '/pages/component/view/general-event'
-      })
-    },
+    }
   }
 }
 </script>
diff --git a/pages/tabBar/API.uvue b/pages/tabBar/API.uvue
index f140e7c4..8b34ef97 100644
--- a/pages/tabBar/API.uvue
+++ b/pages/tabBar/API.uvue
@@ -306,6 +306,10 @@
 								name: '图片选择和预览',
 								url: 'preview-image',
 							},
+							{
+								name: "保存图片到相册",
+								url: 'save-image-to-album'
+							}
 							/* {
 								name: "图片选择和拍照",
 								url: "image",
@@ -510,6 +514,5 @@
 
 	.item {
 		margin-bottom: 12px;
-	}
-	
+	}
 </style>
\ No newline at end of file
-- 
GitLab