Circle1.vue 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  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. class TestView extends SCanvasView {
  7. constructor() {
  8. super("circle")
  9. }
  10. onDraw(canvas: SPainter): void {
  11. canvas.clearRect(new SRect(0,0,800,400));
  12. canvas.pen.color = SColor.Blue;
  13. canvas.brush.color = SColor.Red;
  14. canvas.drawCircle(100,100,50);
  15. canvas.pen.lineWidth = 10;
  16. canvas.pen.lineDash = [10,11];
  17. canvas.pen.lineCapStyle = SLineCapStyle.Butt;
  18. canvas.pen.color = new SColor("#585858");
  19. canvas.brush.color = new SColor("#585858");
  20. canvas.pen.dashOffset = new Date().getTime()/50%60;
  21. canvas.drawCircle(230,100,40);
  22. canvas.pen.dashOffset = -new Date().getTime()/50%60;
  23. canvas.drawCircle(315,100,40);
  24. canvas.pen.color = SColor.Transparent;
  25. canvas.brush.color = SColor.White;
  26. canvas.drawCircle(230,100,15);
  27. canvas.drawCircle(315,100,15);
  28. canvas.pen.color = SColor.Red;
  29. for (let i = 0; i < 360; i += 10) {
  30. let q1 = i * Math.PI / 180;
  31. let q2 = (i + 120) * Math.PI / 180;
  32. canvas.drawLine(
  33. 450 + 50 * Math.cos(q1),
  34. 100 + 50 * Math.sin(q1),
  35. 450 + 50 * Math.cos(q2),
  36. 100 + 50 * Math.sin(q2));
  37. }
  38. canvas.pen.color = SColor.Blue;
  39. for (let i = 0; i < 360; i += 10) {
  40. let q = i * Math.PI / 180;
  41. canvas.drawLine(
  42. 650,
  43. 100,
  44. 650 + 50 * Math.cos(q),
  45. 100 + 50 * Math.sin(q));
  46. }
  47. this.update();
  48. }
  49. }
  50. export default {
  51. name: "Circle1",
  52. mounted(): void {
  53. new TestView();
  54. }
  55. }
  56. </script>
  57. <style scoped>
  58. </style>