DrawLine1.vue 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  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, Vue } from "vue-property-decorator";
  7. /**
  8. * 绘制直线
  9. *
  10. * @author 郝洁 <haojie@persagy.com>
  11. */
  12. class TestView extends SCanvasView {
  13. /**
  14. * 构造函数
  15. */
  16. constructor() {
  17. super("drawLine1")
  18. }
  19. /**
  20. * Item 绘制操作
  21. * @param canvas 绘制对象
  22. */
  23. onDraw(canvas: SPainter): void {
  24. // 清除画布
  25. canvas.clearRect(0, 0, 800, 100);
  26. // 在此编写绘制操作相关命令
  27. canvas.drawLine(0, 0, 100, 100);
  28. canvas.pen.lineWidth = 1;
  29. canvas.pen.color = SColor.Blue;
  30. for (let i = 0; i < 360; i += 10) {
  31. let q = i * Math.PI / 180;
  32. // 绘制一条线段
  33. canvas.drawLine(
  34. 200,
  35. 50,
  36. 200 + 50 * Math.cos(q),
  37. 50 + 50 * Math.sin(q));
  38. }
  39. canvas.pen.color = SColor.Red;
  40. for (let i = 0; i < 360; i += 10) {
  41. let q1 = i * Math.PI / 180;
  42. let q2 = (i + 120) * Math.PI / 180;
  43. canvas.drawLine(
  44. 350 + 50 * Math.cos(q1),
  45. 50 + 50 * Math.sin(q1),
  46. 350 + 50 * Math.cos(q2),
  47. 50 + 50 * Math.sin(q2));
  48. }
  49. canvas.pen.color = new SColor('#03a9f4');
  50. canvas.pen.lineWidth = 5;
  51. canvas.drawLine(450, 50, 700, 50);
  52. canvas.pen.lineWidth = 3;
  53. canvas.pen.dashOffset = new Date().getTime() / 50 % 80;
  54. canvas.pen.lineDash = [30, 50];
  55. canvas.pen.color = SColor.White;
  56. canvas.drawLine(450, 50, 700, 50);
  57. this.update();
  58. }
  59. }
  60. @Component
  61. export default class DrawLine1 extends Vue {
  62. /**
  63. * 页面挂载
  64. */
  65. mounted(): void {
  66. new TestView();
  67. }
  68. }
  69. </script>