# 绘制形状111

直线
折线
矩形
圆
椭圆
多边形
路径

# 直线

查看代码

<template>
    <canvas id="drawLine1" width="800" height="100" />
</template>

<script lang="ts">
    import { SCanvasView, SColor, SPainter } from "@persagy-web/draw/lib";
    import { Component, Prop, Vue } from "vue-property-decorator";

    class TestView extends SCanvasView {

        constructor() {
            super("drawLine1")
        }

        onDraw(canvas: SPainter): void {
            // 清除画布
            canvas.clearRect(0,0,800,100);

            // 在此编写绘制操作相关命令
            canvas.drawLine(0,0, 100, 100);

            canvas.pen.lineWidth = 1;

            canvas.pen.color = SColor.Blue;
            for (let i = 0; i < 360; i += 10) {
                let q = i * Math.PI / 180;
                canvas.drawLine(
                    200,
                    50,
                    200 + 50 * Math.cos(q),
                    50 + 50 * Math.sin(q));
            }

            canvas.pen.color = SColor.Red;
            for (let i = 0; i < 360; i += 10) {
                let q1 = i * Math.PI / 180;
                let q2 = (i + 120) * Math.PI / 180;
                canvas.drawLine(
                    350 + 50 * Math.cos(q1),
                    50 + 50 * Math.sin(q1),
                    350 + 50 * Math.cos(q2),
                    50 + 50 * Math.sin(q2));
            }

            canvas.pen.color = new SColor('#03a9f4');
            canvas.pen.lineWidth = 5;
            canvas.drawLine(450, 50, 700, 50);
            canvas.pen.lineWidth = 3;
            canvas.pen.dashOffset = new Date().getTime()/50%80;
            canvas.pen.lineDash = [30,50];
            canvas.pen.color = SColor.White;
            canvas.drawLine(450, 50, 700, 50);
            this.update();
        }
    }


    @Component
    export default class DrawLine1 extends Vue {
        mounted(): void {
            new TestView();
        }
    }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

# 折线

查看代码

<template>
    <canvas id="drawPolyline1" width="800" height="100" />
</template>

<script lang="ts">
    import {SCanvasView, SColor, SPainter, SPoint} from "@persagy-web/draw/lib";
    import { Component, Prop, Vue } from "vue-property-decorator";

    class TestView extends SCanvasView {
        arr:SPoint[]=[new SPoint(10,10),new SPoint(10,40),new SPoint(30,30)];
        constructor() {
            super("drawPolyline1")
        }

        onDraw(canvas: SPainter): void {
            canvas.drawPolyline(this.arr);
        }
    }

    @Component
    export default class DrawPolyline1 extends Vue {
        mounted(): void {
            new TestView();
        }
    }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 矩形

查看代码

<template>
    <canvas id="drawRect1" width="800" height="180" />
</template>

<script lang="ts">
    import { SCanvasView, SColor, SPainter, SPoint, SRect, SSize } from "@persagy-web/draw/lib";
    import { Component, Prop, Vue } from "vue-property-decorator";

    class TestView extends SCanvasView {

        constructor() {
            super("drawRect1")
        }

        onDraw(canvas: SPainter): void {
            canvas.clearRect(0,0,800,200);

            canvas.pen.color = SColor.Blue;
            canvas.brush.color = SColor.Red;
            canvas.drawRect(10, 10, 80, 80);

            canvas.pen.color = SColor.Transparent;
            canvas.brush.color = SColor.Red;
            canvas.drawRect(new SPoint(110, 10), new SSize(80, 80));

            canvas.pen.color = SColor.Blue;
            canvas.brush.color = SColor.Transparent;
            canvas.drawRect(new SRect(210, 10, 80, 80));

            canvas.pen.lineWidth = 1;
            canvas.pen.color = SColor.Blue;
            canvas.brush.color = SColor.Transparent;
            for (let i = 1; i < 100; i += 10) {
                canvas.drawRect(310 + i, i, 80, 80);
            }

            canvas.pen.lineWidth = 2;
            canvas.pen.color = SColor.Blue;
            canvas.brush.color = SColor.Red;
            let k = new Date().getTime()/100%10;
            for (let i = 1; i < k*10; i += 10) {
                canvas.drawRect(510 + i, i, 80, 80);
            }

            this.update();
        }
    }

    @Component
    export default class DrawRect1 extends Vue {
        mounted(): void {
            new TestView();
        }
    }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

# 圆

查看代码

<template>
    <canvas id="circle" width="740" height="250" />
</template>

<script lang="ts">
    import {SCanvasView, SColor, SPainter, SRect, SLineCapStyle} from "@persagy-web/draw/lib";
    import { Component, Prop, Vue } from "vue-property-decorator";

    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 = new SColor("#585858");
            canvas.brush.color = new SColor("#585858");

            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);

            canvas.pen.color = SColor.Transparent;
            canvas.brush.color = SColor.White;
            canvas.drawCircle(230,100,15);
            canvas.drawCircle(315,100,15);

            canvas.pen.color = SColor.Red;
            for (let i = 0; i < 360; i += 10) {
                let q1 = i * Math.PI / 180;
                let q2 = (i + 120) * Math.PI / 180;
                canvas.drawLine(
                    450 + 50 * Math.cos(q1),
                    100 + 50 * Math.sin(q1),
                    450 + 50 * Math.cos(q2),
                    100 + 50 * Math.sin(q2));
            }

            canvas.pen.color = SColor.Blue;
            for (let i = 0; i < 360; i += 10) {
                let q = i * Math.PI / 180;
                canvas.drawLine(
                    650,
                    100,
                    650 + 50 * Math.cos(q),
                    100 + 50 * Math.sin(q));
            }

            this.update();
        }
    }

    @Component
    export default class Circle1 extends Vue {
        mounted(): void {
            new TestView();
        }
    }
</script>

<style scoped>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

# 椭圆

# 多边形

# 路径

查看代码

<template>
    <canvas id="pathCanvas" width="740" height="250" />
</template>

<script lang="ts">
    import {SCanvasView, SPainter, SPath} from "@persagy-web/draw/lib";
    import { Component, Prop, Vue } from "vue-property-decorator";

    class TestView222 extends SCanvasView {
        path:SPath;
        constructor() {
            super('pathCanvas');
            this.path = new SPath();
            // @ts-ignore
            this.path.polygon([{x:700,y:150},{x:0,y:150},{x:0,y:0}]);
            // @ts-ignore
            this.path.polygon([{x:100,y:100},{x:100,y:200},{x:200,y:200}]);
            // this.path.polygon([{x:0,y:0},{x:0,y:150},{x:700,y:150}]);
            // this.path.polygon([{x:200,y:200},{x:100,y:200},{x:100,y:100}]);
        }

        onDraw(painter: SPainter) {
            painter.drawPath(this.path)
        }
    }
    @Component
    export default class PathCanvas extends Vue {
        mounted(): void {
            new TestView222();
        }
    }
</script>

<style scoped>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

← 底图风格颜色与样式 →