Circle1.vue 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. <template>
  2. <canvas id="circle" width="740" height="250" />
  3. </template>
  4. <script lang="ts">
  5. import {SCanvasView, SColor, SPainter, SRect, SLineCapStyle} from "@persagy-web/draw/lib";
  6. import { Component, Prop, Vue } from "vue-property-decorator";
  7. class TestView extends SCanvasView {
  8. constructor() {
  9. super("circle")
  10. }
  11. onDraw(canvas: SPainter): void {
  12. canvas.clearRect(new SRect(0,0,800,400));
  13. canvas.pen.color = SColor.Blue;
  14. canvas.brush.color = SColor.Red;
  15. canvas.drawCircle(100,100,50);
  16. canvas.pen.lineWidth = 10;
  17. canvas.pen.lineDash = [10,11];
  18. canvas.pen.lineCapStyle = SLineCapStyle.Butt;
  19. canvas.pen.color = new SColor("#585858");
  20. canvas.brush.color = new SColor("#585858");
  21. canvas.pen.dashOffset = new Date().getTime()/50%60;
  22. canvas.drawCircle(230,100,40);
  23. canvas.pen.dashOffset = -new Date().getTime()/50%60;
  24. canvas.drawCircle(315,100,40);
  25. canvas.pen.color = SColor.Transparent;
  26. canvas.brush.color = SColor.White;
  27. canvas.drawCircle(230,100,15);
  28. canvas.drawCircle(315,100,15);
  29. canvas.pen.color = SColor.Red;
  30. for (let i = 0; i < 360; i += 10) {
  31. let q1 = i * Math.PI / 180;
  32. let q2 = (i + 120) * Math.PI / 180;
  33. canvas.drawLine(
  34. 450 + 50 * Math.cos(q1),
  35. 100 + 50 * Math.sin(q1),
  36. 450 + 50 * Math.cos(q2),
  37. 100 + 50 * Math.sin(q2));
  38. }
  39. canvas.pen.color = SColor.Blue;
  40. for (let i = 0; i < 360; i += 10) {
  41. let q = i * Math.PI / 180;
  42. canvas.drawLine(
  43. 650,
  44. 100,
  45. 650 + 50 * Math.cos(q),
  46. 100 + 50 * Math.sin(q));
  47. }
  48. this.update();
  49. }
  50. }
  51. @Component
  52. export default class Circle1 extends Vue {
  53. mounted(): void {
  54. new TestView();
  55. }
  56. }
  57. </script>
  58. <style scoped>
  59. </style>