支持贝塞尔曲线

pages/component/view/view-draw.uvue

@@ -10,6 +10,7 @@
       <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>
@@ -49,13 +50,14 @@
       this.drawhouse()
       this.drawPoint()
       this.drawRect()
+      this.drawArcTo()
     },
     onUnload() {
       y = 160
     },
     methods: {
       drawText() {
-				let node = (this.$refs['draw-text-view'] as Element)
+        let node = (this.$refs['draw-text-view'] as INode)
         let ctx = node.getDrawableContext()
         let width = node.getBoundingClientRect().width
         ctx!!.reset()
@@ -72,7 +74,7 @@
         ctx!!.update()
       },
       drawLines() {
-				let ctx = (this.$refs['draw-line-view'] as Element).getDrawableContext()
+        let ctx = (this.$refs['draw-line-view'] as INode).getDrawableContext()
         ctx!!.reset()
         ctx!!.lineWidth = 10;
 
@@ -106,14 +108,14 @@
           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);
+        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);
+        this.drawDashedLine([12, 3, 3], ctx!);
         ctx!.lineDashOffset = 0
         ctx!.setLineDash([0])
         ctx!!.update()
@@ -127,7 +129,7 @@
         y += 15;
       },
       drawCircles() {
-				let ctx = (this.$refs['draw-circle-view'] as Element).getDrawableContext()
+        let ctx = (this.$refs['draw-circle-view'] as INode).getDrawableContext()
         ctx!!.reset()
         // Draw shapes
         for (var i = 0; i < 4; i++) {
@@ -153,7 +155,7 @@
       },
 
       drawStar() {
-				let ctx = (this.$refs['draw-dash-line'] as Element).getDrawableContext()
+        let ctx = (this.$refs['draw-dash-line'] as INode).getDrawableContext()
         ctx!!.reset()
         ctx!!.beginPath();
         var horn = 5; // 画5个角
@@ -224,7 +226,7 @@
         return result
       },
       drawhouse() {
-				let ctx = (this.$refs['draw-house'] as Element).getDrawableContext()
+        let ctx = (this.$refs['draw-house'] as INode).getDrawableContext()
         ctx!!.reset()
         ctx!!.lineWidth = 10;
 
@@ -244,7 +246,7 @@
         ctx!!.update()
       },
       drawPoint() {
-				let ctx = (this.$refs['draw-style'] as Element).getDrawableContext()
+        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++) {
@@ -263,7 +265,7 @@
         ctx!!.update()
       },
       drawRect() {
-				let ctx = (this.$refs['draw-odd'] as Element).getDrawableContext()
+        let ctx = (this.$refs['draw-odd'] as INode).getDrawableContext()
         ctx!!.reset()
         // Create path
         ctx!!.moveTo(30, 90);
@@ -279,6 +281,27 @@
         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()
       }
     }
   }