1234567891011121314151617181920212223242526272829303132333435363738394041424344454647 |
- import {SLineCapStyle} from "@saga-web/draw/lib";
- <template>
- <canvas id="circle" width="740" height="250" />
- </template>
- <script lang="ts">
- import {SCanvasView, SColor, SPainter, SRect, SLineCapStyle} from "@saga-web/draw/lib";
- class TestView extends SCanvasView {
- constructor() {
- super("circle")
- }
- onDraw(canvas: SPainter): void {
- canvas.clearRect(new SRect(0,0,800,400));
- canvas.pen.color = SColor.Blue;
- canvas.brush.color = SColor.Red;
- canvas.drawCircle(100,100,50);
- canvas.pen.lineWidth = 10;
- canvas.pen.lineDash = [10,11];
- canvas.pen.lineCapStyle = SLineCapStyle.Butt;
- canvas.pen.color = SColor.Blue;
- canvas.brush.color = SColor.Red;
- canvas.pen.dashOffset = new Date().getTime()/50%60;
- canvas.drawCircle(230,100,40);
- canvas.pen.dashOffset = -new Date().getTime()/50%60;
- canvas.drawCircle(315,100,40);
- this.update();
- }
- }
- export default {
- name: "Circle1",
- mounted(): void {
- new TestView();
- }
- }
- </script>
- <style scoped>
- </style>
|