DrawLine2.vue 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. <template>
  2. <canvas id="drawLine2" width="800" height="100" />
  3. </template>
  4. <script lang="ts">
  5. import { SCanvasView, SColor, SPainter } from "@saga-web/draw/lib";
  6. class TestView extends SCanvasView {
  7. constructor() {
  8. super("drawLine2")
  9. }
  10. onDraw(canvas: SPainter): void {
  11. // 在此编写绘制操作相关命令
  12. canvas.drawLine(0,0, 100, 100);
  13. canvas.pen.lineWidth = 1;
  14. canvas.pen.color = SColor.Blue;
  15. for (let i = 0; i < 360; i += 10) {
  16. let q = i * Math.PI / 180;
  17. canvas.drawLine(
  18. 200,
  19. 50,
  20. 200 + 50 * Math.cos(q),
  21. 50 + 50 * Math.sin(q));
  22. }
  23. canvas.pen.color = SColor.Red;
  24. for (let i = 0; i < 360; i += 10) {
  25. let q1 = i * Math.PI / 180;
  26. let q2 = (i + 120) * Math.PI / 180;
  27. canvas.drawLine(
  28. 350 + 50 * Math.cos(q1),
  29. 50 + 50 * Math.sin(q1),
  30. 350 + 50 * Math.cos(q2),
  31. 50 + 50 * Math.sin(q2));
  32. }
  33. }
  34. }
  35. export default {
  36. mounted() {
  37. new TestView();
  38. }
  39. }
  40. </script>