DrawLine2.vue 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  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, Prop, Vue } from "vue-property-decorator";
  7. class TestView extends SCanvasView {
  8. constructor() {
  9. super("drawLine2")
  10. }
  11. onDraw(canvas: SPainter): void {
  12. // 在此编写绘制操作相关命令
  13. canvas.drawLine(0,0, 100, 100);
  14. canvas.pen.lineWidth = 1;
  15. canvas.pen.color = SColor.Blue;
  16. for (let i = 0; i < 360; i += 10) {
  17. let q = i * Math.PI / 180;
  18. canvas.drawLine(
  19. 200,
  20. 50,
  21. 200 + 50 * Math.cos(q),
  22. 50 + 50 * Math.sin(q));
  23. }
  24. canvas.pen.color = SColor.Red;
  25. for (let i = 0; i < 360; i += 10) {
  26. let q1 = i * Math.PI / 180;
  27. let q2 = (i + 120) * Math.PI / 180;
  28. canvas.drawLine(
  29. 350 + 50 * Math.cos(q1),
  30. 50 + 50 * Math.sin(q1),
  31. 350 + 50 * Math.cos(q2),
  32. 50 + 50 * Math.sin(q2));
  33. }
  34. }
  35. }
  36. @Component
  37. export default class DrawLine2 extends Vue {
  38. mounted(): void {
  39. new TestView();
  40. }
  41. }
  42. </script>