From c0c091c82029e26459dd91728343860282afe743 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E7=A3=8A?= <1633537611@qq.com>
Date: Fri, 15 Sep 2023 20:42:28 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=AF=E6=8C=81=E8=B4=9D=E5=A1=9E=E5=B0=94?=
 =?UTF-8?q?=E6=9B=B2=E7=BA=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/component/view/view-draw.uvue | 561 +++++++++++++++-------------
 1 file changed, 292 insertions(+), 269 deletions(-)

diff --git a/pages/component/view/view-draw.uvue b/pages/component/view/view-draw.uvue
index efa349e0..5d76f772 100644
--- a/pages/component/view/view-draw.uvue
+++ b/pages/component/view/view-draw.uvue
@@ -1,287 +1,310 @@
 <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 -->
+  <!-- #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 ref="draw-arcto" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
+    </view>
+  <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
 </template>
 
 <script>
-	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() {
-		},
+  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 Element)
-				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 Element).getDrawableContext()
-				ctx!!.reset()
-				ctx!!.lineWidth = 10;
+    onReady() {
+      this.drawText()
+      this.drawLines()
+      this.drawCircles()
+      this.drawStar()
+      this.drawhouse()
+      this.drawPoint()
+      this.drawRect()
+      this.drawArcTo()
+    },
+    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;
-				this.drawDashedLine([], ctx);
-				this.drawDashedLine([2, 2], ctx);
-				this.drawDashedLine([10, 10], ctx);
-				this.drawDashedLine([20, 5], ctx);
-				this.drawDashedLine([15, 3, 3, 3], ctx);
-				this.drawDashedLine([20, 3, 3, 3, 3, 3, 3, 3], ctx);
-				ctx!.lineDashOffset = 18;
-				this.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 Element).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
+        ["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;
+        this.drawDashedLine([], ctx!);
+        this.drawDashedLine([2, 2], ctx!);
+        this.drawDashedLine([10, 10], ctx!);
+        this.drawDashedLine([20, 5], ctx!);
+        this.drawDashedLine([15, 3, 3, 3], ctx!);
+        this.drawDashedLine([20, 3, 3, 3, 3, 3, 3, 3], ctx!);
+        ctx!.lineDashOffset = 18;
+        this.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);
+            ctx!.arc(x, y, radius, startAngle, endAngle, clockwise);
 
-						if (i > 1) {
-							ctx!.fill();
-						} else {
-							ctx!.stroke();
-						}
-					}
-				}
-				ctx!!.update()
-			},
+            if (i > 1) {
+              ctx!.fill();
+            } else {
+              ctx!.stroke();
+            }
+          }
+        }
+        ctx!!.update()
+      },
 
-			drawStar() {
-				let ctx = (this.$refs['draw-dash-line'] as Element).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();
+      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 Element).getDrawableContext()
-				ctx!!.reset()
-				ctx!!.lineWidth = 10;
+        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);
+        // Wall
+        ctx!.strokeRect(75, 140, 150, 110);
 
-				// Door
-				ctx!.fillRect(130, 190, 40, 60);
+        // 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 Element).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 Element).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();
+        // 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()
+        // Fill path
+        ctx!.fillStyle = "green";
+        ctx!.fill("evenodd");
+        ctx!!.update()
 
-			}
-		}
-	}
+      },
+      drawArcTo() {
+        let ctx = (this.$refs['draw-arcto'] as INode).getDrawableContext()
+        ctx!.reset()
+        ctx!.beginPath();
+        ctx!.moveTo(50, 20);
+        ctx!.bezierCurveTo(230, 30, 150, 60, 50, 100);
+        ctx!.stroke();
+
+        ctx!.fillStyle = "blue";
+        // start point
+        ctx!.fillRect(50, 20, 10, 10);
+        // end point
+        ctx!.fillRect(50, 100, 10, 10);
+
+        ctx!.fillStyle = "red";
+        // control point one
+        ctx!.fillRect(230, 30, 10, 10);
+        // control point two
+        ctx!.fillRect(150, 70, 10, 10);
+        ctx!.update()
+      }
+    }
+  }
 </script>
 
 <style>
-- 
GitLab