Circle1.vue 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <template>
  2. <canvas height="250" id="circle" width="740"/>
  3. </template>
  4. <script lang="ts">
  5. import { SCanvasView, SColor, SLineCapStyle, SPainter, SRect } 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("circle")
  18. }
  19. /**
  20. * Item 绘制操作
  21. * @param canvas 绘制对象
  22. */
  23. onDraw(canvas: SPainter): void {
  24. canvas.clearRect(new SRect(0, 0, 800, 400));
  25. canvas.pen.color = SColor.Blue;
  26. canvas.brush.color = SColor.Red;
  27. canvas.drawCircle(100, 100, 50);
  28. canvas.pen.lineWidth = 10;
  29. canvas.pen.lineDash = [10, 11];
  30. canvas.pen.lineCapStyle = SLineCapStyle.Butt;
  31. canvas.pen.color = new SColor("#585858");
  32. canvas.brush.color = new SColor("#585858");
  33. canvas.pen.dashOffset = new Date().getTime() / 50 % 60;
  34. canvas.drawCircle(230, 100, 40);
  35. canvas.pen.dashOffset = -new Date().getTime() / 50 % 60;
  36. canvas.drawCircle(315, 100, 40);
  37. canvas.pen.color = SColor.Transparent;
  38. canvas.brush.color = SColor.White;
  39. canvas.drawCircle(230, 100, 15);
  40. canvas.drawCircle(315, 100, 15);
  41. canvas.pen.color = SColor.Red;
  42. // 长度为 360 ,以10递增绘制一条线段
  43. for (let i = 0; i < 360; i += 10) {
  44. let q1 = i * Math.PI / 180;
  45. let q2 = (i + 120) * Math.PI / 180;
  46. canvas.drawLine(
  47. 450 + 50 * Math.cos(q1),
  48. 100 + 50 * Math.sin(q1),
  49. 450 + 50 * Math.cos(q2),
  50. 100 + 50 * Math.sin(q2));
  51. }
  52. canvas.pen.color = SColor.Blue;
  53. // 长度为 360 ,以10递增绘制直线
  54. for (let i = 0; i < 360; i += 10) {
  55. let q = i * Math.PI / 180;
  56. canvas.drawLine(
  57. 650,
  58. 100,
  59. 650 + 50 * Math.cos(q),
  60. 100 + 50 * Math.sin(q));
  61. }
  62. this.update();
  63. }
  64. }
  65. @Component
  66. export default class Circle1 extends Vue {
  67. /**
  68. * 页面挂载
  69. */
  70. mounted(): void {
  71. new TestView();
  72. }
  73. }
  74. </script>
  75. <style scoped>
  76. </style>