Browse Source

绘制圆item

haojianlong 5 years ago
parent
commit
204eb0e49c

+ 29 - 2
docs/.vuepress/components/example/web/graph/Circle1.vue

@@ -22,14 +22,41 @@ import {SLineCapStyle} from "@saga-web/draw/lib";
             canvas.pen.lineWidth = 10;
             canvas.pen.lineDash = [10,11];
             canvas.pen.lineCapStyle = SLineCapStyle.Butt;
-            canvas.pen.color = SColor.Blue;
-            canvas.brush.color = SColor.Red;
+            canvas.pen.color = new SColor("#585858");
+            canvas.brush.color = new SColor("#585858");
+
             canvas.pen.dashOffset = new Date().getTime()/50%60;
             canvas.drawCircle(230,100,40);
 
             canvas.pen.dashOffset = -new Date().getTime()/50%60;
             canvas.drawCircle(315,100,40);
 
+            canvas.pen.color = SColor.Transparent;
+            canvas.brush.color = SColor.White;
+            canvas.drawCircle(230,100,15);
+            canvas.drawCircle(315,100,15);
+
+            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(
+                    450 + 50 * Math.cos(q1),
+                    100 + 50 * Math.sin(q1),
+                    450 + 50 * Math.cos(q2),
+                    100 + 50 * Math.sin(q2));
+            }
+
+            canvas.pen.color = SColor.Blue;
+            for (let i = 0; i < 360; i += 10) {
+                let q = i * Math.PI / 180;
+                canvas.drawLine(
+                    650,
+                    100,
+                    650 + 50 * Math.cos(q),
+                    100 + 50 * Math.sin(q));
+            }
+
             this.update();
         }
     }

+ 6 - 2
docs/.vuepress/components/example/web/graph/DrawLine1.vue

@@ -41,9 +41,13 @@
                     50 + 50 * Math.sin(q2));
             }
 
-            canvas.pen.lineWidth = 1;
+            canvas.pen.color = new SColor('#03a9f4');
+            canvas.pen.lineWidth = 5;
+            canvas.drawLine(400, 50, 700, 50);
+            canvas.pen.lineWidth = 3;
             canvas.pen.dashOffset = new Date().getTime()/50%60;
-            canvas.pen.lineDash = [10,50];
+            canvas.pen.lineDash = [30,50];
+            canvas.pen.color = SColor.White;
             canvas.drawLine(400, 50, 700, 50);
             this.update();
         }