DrawLine2.vue 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. <template>
  2. <canvas id="drawLine2" width="800" height="100"/>
  3. </template>
  4. <script lang="ts">
  5. import { SCanvasView, SColor, SPainter } from "@persagy-web/draw/lib";
  6. import { Component, Vue } from "vue-property-decorator";
  7. class TestView extends SCanvasView {
  8. /**
  9. * 构造函数
  10. */
  11. constructor() {
  12. super("drawLine2")
  13. }
  14. /**
  15. * Item 绘制操作
  16. * @param painter 绘制对象
  17. */
  18. onDraw(canvas: SPainter): void {
  19. // 在此编写绘制操作相关命令
  20. canvas.drawLine(0, 0, 100, 100);
  21. canvas.pen.lineWidth = 1;
  22. canvas.pen.color = SColor.Blue;
  23. for (let i = 0; i < 360; i += 10) {
  24. let q = i * Math.PI / 180;
  25. // 绘制一条线段
  26. canvas.drawLine(
  27. 200,
  28. 50,
  29. 200 + 50 * Math.cos(q),
  30. 50 + 50 * Math.sin(q));
  31. }
  32. canvas.pen.color = SColor.Red;
  33. for (let i = 0; i < 360; i += 10) {
  34. let q1 = i * Math.PI / 180;
  35. let q2 = (i + 120) * Math.PI / 180;
  36. canvas.drawLine(
  37. 350 + 50 * Math.cos(q1),
  38. 50 + 50 * Math.sin(q1),
  39. 350 + 50 * Math.cos(q2),
  40. 50 + 50 * Math.sin(q2));
  41. }
  42. }
  43. }
  44. @Component
  45. export default class DrawLine2 extends Vue {
  46. /**
  47. * 页面挂载
  48. */
  49. mounted(): void {
  50. new TestView();
  51. }
  52. }
  53. </script>