DrawLine2.vue 1.5 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 canvas 绘制对象
  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. // 长度为 360 ,以10递增绘制一条线段
  24. for (let i = 0; i < 360; i += 10) {
  25. let q = i * Math.PI / 180;
  26. // 绘制一条线段
  27. canvas.drawLine(
  28. 200,
  29. 50,
  30. 200 + 50 * Math.cos(q),
  31. 50 + 50 * Math.sin(q));
  32. }
  33. canvas.pen.color = SColor.Red;
  34. // 长度为 360 ,以10递增绘制一条线段
  35. for (let i = 0; i < 360; i += 10) {
  36. let q1 = i * Math.PI / 180;
  37. let q2 = (i + 120) * Math.PI / 180;
  38. canvas.drawLine(
  39. 350 + 50 * Math.cos(q1),
  40. 50 + 50 * Math.sin(q1),
  41. 350 + 50 * Math.cos(q2),
  42. 50 + 50 * Math.sin(q2));
  43. }
  44. }
  45. }
  46. @Component
  47. export default class DrawLine2 extends Vue {
  48. /**
  49. * 页面挂载
  50. */
  51. mounted(): void {
  52. new TestView();
  53. }
  54. }
  55. </script>