persagy-web-doc/docs/.vuepress/components/engine/arrow.vue

<template>
    <div>
        <el-table :data="tableData" style="width: 100%" class="elementTable">
            <el-table-column prop="val" label="值" width="180"></el-table-column>
            <el-table-column prop="desc" label="描述"></el-table-column>
        </el-table>
        <div style="margin: 14px 0;">
            <span style="font-size: 14px;">选择起始点样式</span>
            <el-select placeholder="请选择" @change="changeStart" size="small" v-model="begin">
                <el-option v-for="item in options" :key="item.value" :label="item.label"
                           :value="item.value"></el-option>
            </el-select>
            <span style="font-size: 14px;">选择结束点样式</span>
            <el-select placeholder="请选择" @change="changeEnd" size="small" v-model="end">
                <el-option v-for="item in options" :key="item.value" :label="item.label"
                           :value="item.value"></el-option>
            </el-select>
        </div>
        <canvas :id="id" width="740" height="400" tabindex="0"/>
    </div>
</template>

<script lang="ts">
    import { SGraphItem, SGraphScene, SGraphView } from "@persagy-web/graph/lib";
    import { SArrowStyleType, SPainter, SPoint, SRect } from "@persagy-web/draw/lib"
    import { Component, Vue } from "vue-property-decorator";
    import { v1 as uuid } from "uuid";

    class Polyline extends SGraphItem {
        /** 起始点样式 */
        _begin = SArrowStyleType.Basic;
        get begin(): SArrowStyleType {
            return this._begin;
        }

        set begin(v: SArrowStyleType) {
            this._begin = v;
            this.update();
        }

        /** 结束点样式 */
        _end = SArrowStyleType.Basic;
        get end(): SArrowStyleType {
            return this._end;
        }

        set end(v: SArrowStyleType) {
            this._end = v;
            this.update();
        }

        pointList: SPoint[] = [
            new SPoint(0, 0),
            new SPoint(1000, 1000),
            new SPoint(1200, 1800),
            new SPoint(1800, 1800),
            new SPoint(2000, 100),
            // new SPoint(0, 0)
        ];

        boundingRect(): SRect {
            return new SRect(0, 0, 2000, 1800);
        }

        /**
         * Item 绘制操作
         * @param painter   绘制对象
         */
        onDraw(painter: SPainter) {
            //线宽
            painter.pen.lineWidth = painter.toPx(1);
            //箭头起点，终点样式
            const style = {
                begin: this.begin,
                end: this.end
            };
            for (let i = 0; i < this.pointList.length - 1; i++) {
                //绘制带箭头的线段
                painter.drawArrowLine(this.pointList[i], this.pointList[i + 1], style)
            }
        }
    }

    @Component
    export default class ShadowCanvas extends Vue {
        id: string = uuid();
        options = [
            {
                value: SArrowStyleType.None,
                label: 'None'
            }, {
                value: SArrowStyleType.Basic,
                label: 'Basic'
            }, {
                value: SArrowStyleType.Triangle,
                label: 'Triangle'
            }, {
                value: SArrowStyleType.Diamond,
                label: 'Diamond'
            }, {
                value: SArrowStyleType.Square,
                label: 'Square'
            }, {
                value: SArrowStyleType.Circle,
                label: 'Circle'
            }
        ];
        view: SGraphView | undefined;
        item: Polyline | undefined;
        tableData = [
            {
                val: 'None',
                desc: '无样式'
            }, {
                val: 'Basic',
                desc: '基本箭头'
            },
            {
                val: 'Triangle',
                desc: '三角形箭头'
            },
            {
                val: 'Diamond',
                desc: '菱形箭头'
            },
            {
                val: 'Square',
                desc: '方形箭头'
            },
            {
                val: 'Circle',
                desc: '圆形箭头'
            },
        ];
        begin: SArrowStyleType = SArrowStyleType.Basic;
        end: SArrowStyleType = SArrowStyleType.Basic;

        mounted(): void {
            this.init()
        };

        init() {
            this.view = new SGraphView(this.id);
            const scene = new SGraphScene();
            this.item = new Polyline(null);
            scene.addItem(this.item);
            this.view.scene = scene;
            this.view.fitSceneToView();
            this.view.scalable = false;
        };

        changeStart(val: SArrowStyleType): void {
            this.item!!.begin = val
        };

        changeEnd(val: SArrowStyleType): void {
            this.item!!.end = val
        }
    }
</script>