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

/**
 * 绘制带有末端样式的线段
 *
 * @author 郝洁 <haojie@persagy.com>
 */
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>