Circle1.vue 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. import {SLineCapStyle} from "@saga-web/draw/lib";
  2. <template>
  3. <canvas id="circle" width="740" height="250" />
  4. </template>
  5. <script lang="ts">
  6. import {SCanvasView, SColor, SPainter, SRect, SLineCapStyle} from "@saga-web/draw/lib";
  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 = SColor.Blue;
  20. canvas.brush.color = SColor.Red;
  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. this.update();
  26. }
  27. }
  28. export default {
  29. name: "Circle1",
  30. mounted(): void {
  31. new TestView();
  32. }
  33. }
  34. </script>
  35. <style scoped>
  36. </style>