Circle1.vue 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  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 painter 绘制对象
  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. for (let i = 0; i < 360; i += 10) {
  43. let q1 = i * Math.PI / 180;
  44. let q2 = (i + 120) * Math.PI / 180;
  45. canvas.drawLine(
  46. 450 + 50 * Math.cos(q1),
  47. 100 + 50 * Math.sin(q1),
  48. 450 + 50 * Math.cos(q2),
  49. 100 + 50 * Math.sin(q2));
  50. }
  51. canvas.pen.color = SColor.Blue;
  52. for (let i = 0; i < 360; i += 10) {
  53. let q = i * Math.PI / 180;
  54. canvas.drawLine(
  55. 650,
  56. 100,
  57. 650 + 50 * Math.cos(q),
  58. 100 + 50 * Math.sin(q));
  59. }
  60. this.update();
  61. }
  62. }
  63. @Component
  64. export default class Circle1 extends Vue {
  65. /**
  66. * 页面挂载
  67. */
  68. mounted(): void {
  69. new TestView();
  70. }
  71. }
  72. </script>
  73. <style scoped>
  74. </style>