DrawLine1.vue 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. <template>
  2. <canvas id="drawLine1" 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("drawLine1")
  10. }
  11. onDraw(canvas: SPainter): void {
  12. // 清除画布
  13. canvas.clearRect(0,0,800,100);
  14. // 在此编写绘制操作相关命令
  15. canvas.drawLine(0,0, 100, 100);
  16. canvas.pen.lineWidth = 1;
  17. canvas.pen.color = SColor.Blue;
  18. for (let i = 0; i < 360; i += 10) {
  19. let q = i * Math.PI / 180;
  20. canvas.drawLine(
  21. 200,
  22. 50,
  23. 200 + 50 * Math.cos(q),
  24. 50 + 50 * Math.sin(q));
  25. }
  26. canvas.pen.color = SColor.Red;
  27. for (let i = 0; i < 360; i += 10) {
  28. let q1 = i * Math.PI / 180;
  29. let q2 = (i + 120) * Math.PI / 180;
  30. canvas.drawLine(
  31. 350 + 50 * Math.cos(q1),
  32. 50 + 50 * Math.sin(q1),
  33. 350 + 50 * Math.cos(q2),
  34. 50 + 50 * Math.sin(q2));
  35. }
  36. canvas.pen.color = new SColor('#03a9f4');
  37. canvas.pen.lineWidth = 5;
  38. canvas.drawLine(450, 50, 700, 50);
  39. canvas.pen.lineWidth = 3;
  40. canvas.pen.dashOffset = new Date().getTime()/50%80;
  41. canvas.pen.lineDash = [30,50];
  42. canvas.pen.color = SColor.White;
  43. canvas.drawLine(450, 50, 700, 50);
  44. this.update();
  45. }
  46. }
  47. @Component
  48. export default class DrawLine1 extends Vue {
  49. mounted(): void {
  50. new TestView();
  51. }
  52. }
  53. </script>