Browse Source

5.30周六 测试

haojianlong 4 years ago
parent
commit
6b6a04cebd

+ 4 - 20
docs/.vuepress/components/example/web/graph/DrawLine1.vue

@@ -16,27 +16,11 @@
             canvas.drawLine(0,0, 100, 100);
 
             canvas.pen.lineWidth = 1;
+            canvas.pen.dashOffset += 10;
+            canvas.pen.lineDash = [25, 5, 10, 30];
+            canvas.drawLine(200, 50, 400, 50);
 
-            canvas.pen.color = SColor.Blue;
-            for (let i = 0; i < 360; i += 10) {
-                let q = i * Math.PI / 180;
-                canvas.drawLine(
-                    200,
-                    50,
-                    200 + 50 * Math.cos(q),
-                    50 + 50 * Math.sin(q));
-            }
-
-            canvas.pen.color = SColor.Red;
-            for (let i = 0; i < 360; i += 10) {
-                let q1 = i * Math.PI / 180;
-                let q2 = (i + 120) * Math.PI / 180;
-                canvas.drawLine(
-                    350 + 50 * Math.cos(q1),
-                    50 + 50 * Math.sin(q1),
-                    350 + 50 * Math.cos(q2),
-                    50 + 50 * Math.sin(q2));
-            }
+            this.update();
         }
     }
 

+ 48 - 0
docs/.vuepress/components/example/web/graph/DrawLine2.vue

@@ -0,0 +1,48 @@
+<template>
+    <canvas id="drawLine2" width="800" height="100" />
+</template>
+
+<script lang="ts">
+    import { SCanvasView, SColor, SPainter } from "@saga-web/draw/lib";
+
+    class TestView extends SCanvasView {
+
+        constructor() {
+            super("drawLine2")
+        }
+
+        onDraw(canvas: SPainter): void {
+            // 在此编写绘制操作相关命令
+            canvas.drawLine(0,0, 100, 100);
+
+            canvas.pen.lineWidth = 1;
+
+            canvas.pen.color = SColor.Blue;
+            for (let i = 0; i < 360; i += 10) {
+                let q = i * Math.PI / 180;
+                canvas.drawLine(
+                    200,
+                    50,
+                    200 + 50 * Math.cos(q),
+                    50 + 50 * Math.sin(q));
+            }
+
+            canvas.pen.color = SColor.Red;
+            for (let i = 0; i < 360; i += 10) {
+                let q1 = i * Math.PI / 180;
+                let q2 = (i + 120) * Math.PI / 180;
+                canvas.drawLine(
+                    350 + 50 * Math.cos(q1),
+                    50 + 50 * Math.sin(q1),
+                    350 + 50 * Math.cos(q2),
+                    50 + 50 * Math.sin(q2));
+            }
+        }
+    }
+
+    export default {
+        mounted() {
+            new TestView();
+        }
+    }
+</script>

+ 3 - 3
docs/.vuepress/components/example/web/graph/DrawPolyline1.vue

@@ -3,16 +3,16 @@
 </template>
 
 <script lang="ts">
-    import { SCanvasView, SColor, SPainter } from "@saga-web/draw/lib";
+    import {SCanvasView, SColor, SPainter, SPoint} from "@saga-web/draw/lib";
 
     class TestView extends SCanvasView {
-
+        arr:SPoint[]=[new SPoint(10,10),new SPoint(10,40),new SPoint(30,30)]
         constructor() {
             super("drawPolyline1")
         }
 
         onDraw(canvas: SPainter): void {
-            canvas.drawLine(0,0, 100, 100);
+            canvas.drawPolyline(this.arr);
         }
     }