Browse Source

增加画线与绘制矩形安全。

sybotan 4 years ago
parent
commit
9da030f305

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

@@ -1,19 +1,42 @@
 <template>
-    <canvas id="DrawLine1" width="800" height="200" />
+    <canvas id="drawLine1" width="800" height="100" />
 </template>
 
 <script lang="ts">
-    import { SCanvasView, SPainter } from "@saga-web/draw/lib";
+    import { SCanvasView, SColor, SPainter } from "@saga-web/draw/lib";
 
     class TestView extends SCanvasView {
 
         constructor() {
-            super("DrawLine1")
+            super("drawLine1")
         }
 
         onDraw(canvas: SPainter): void {
             // 在此编写绘制操作相关命令
-            canvas.drawLine(0,0, 200, 200);
+            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));
+            }
         }
     }
 

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

@@ -0,0 +1,48 @@
+<template>
+    <canvas id="drawRect1" width="800" height="180" />
+</template>
+
+<script lang="ts">
+    import { SCanvasView, SColor, SPainter, SPoint, SRect, SSize } from "@saga-web/draw/lib";
+
+    class TestView extends SCanvasView {
+
+        constructor() {
+            super("drawRect1")
+        }
+
+        onDraw(canvas: SPainter): void {
+            canvas.pen.color = SColor.Blue;
+            canvas.brush.color = SColor.Red;
+            canvas.drawRect(10, 10, 80, 80);
+
+            canvas.pen.color = SColor.Transparent;
+            canvas.brush.color = SColor.Red;
+            canvas.drawRect(new SPoint(110, 10), new SSize(80, 80));
+
+            canvas.pen.color = SColor.Blue;
+            canvas.brush.color = SColor.Transparent;
+            canvas.drawRect(new SRect(210, 10, 80, 80));
+
+            canvas.pen.lineWidth = 1;
+            canvas.pen.color = SColor.Blue;
+            canvas.brush.color = SColor.Transparent;
+            for (let i = 1; i < 100; i += 10) {
+                canvas.drawRect(310 + i, i, 80, 80);
+            }
+
+            canvas.pen.lineWidth = 2;
+            canvas.pen.color = SColor.Blue;
+            canvas.brush.color = SColor.Red;
+            for (let i = 1; i < 100; i += 10) {
+                canvas.drawRect(510 + i, i, 80, 80);
+            }
+        }
+    }
+
+    export default {
+        mounted() {
+            new TestView();
+        }
+    }
+</script>

+ 8 - 0
docs/dev/saga-graphy/graphy-engine/draw.md

@@ -17,6 +17,14 @@
 
 ## 矩形
 
+<example-web-graph-DrawRect1 /> 
+
+::: details 查看代码
+
+<<< @/docs/.vuepress/components/example/web/graph/DrawRect1.vue
+
+:::
+
 ## 圆
 
 ## 椭圆