persagy-web-doc/docs/.vuepress/components/scene/items/polygon.vue

<template>
    <div style="margin-top: 10px;">
        <el-button size="small" @click="changeEnable">切换item1禁用状态</el-button>
        <canvas :id="id" width="740" height="400"/>
    </div>
</template>

<script lang="ts">

import { SGraphPolyGroupItem, SGraphScene, SGraphView } from "@persagy-web/graph/lib";
import { SSize } from "@persagy-web/draw/lib";
import { Component, Vue } from "vue-property-decorator";
import { v1 as uuid } from "uuid";

/**
 * 多边形组
 *
 * @author 郝洁 <haojie@persagy.com>
 */
class Expolygon extends SGraphPolyGroupItem {
        resize(old: SSize, newS: SSize): void {
            const xs = newS.width / old.width;
            const ys = newS.height / old.height;
            // @ts-ignore
            this.pointList = this.pointList.map(t => {
                // @ts-ignore
                return t.map(item => {
                    item.x = item.x * xs;
                    item.y = item.y * ys;
                    return item
                })
            });
            // console.log(this.pointList)
        }
    }


    @Component
    export default class ZoneCanvas extends Vue {
        /** 实例化 view */
        view: SGraphView | undefined;
        item: Expolygon | undefined;
        /** 图 id */
        id: string = uuid();
        rectData = {
            outline: [
                [{x: 0, y: 0}, {x: 0, y: 1000}, {x: 700, y: 1500}, {x: 500, y: 1000}, {x: 200, y: 0}],
                [{x: 1000, y: 1000}, {x: 1200, y: 1000}, {x: 1200, y: 1200}, {x: 1000, y: 1200}]
            ],
            style: {
                "default": {
                    "stroke": "#cccccc",
                    "fill": "SLinearGradient{0,0;0,1000;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
                    "lineWidth": 2,
                    "effect": {}
                },
                "selected": {
                    "stroke": "#66ff66",
                    "fill": "SRadialGradient{500,500,50;500,500,500;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
                    "lineWidth": 3,
                    "effect": {}
                },
                "disabled": {
                    "stroke": "#333333",
                    "fill": "#afafaf",
                    "lineWidth": 1,
                    "effect": {}
                },
            }
        };

        /**
         * 页面挂载
         */
        mounted() {
            this.init();
        };

        /**
         * 初始化加载
         */
        init() {
            this.view = new SGraphView(this.id);
            const scene = new SGraphScene();

            this.item = new Expolygon(null, this.rectData);
            this.item.selectable = true;
            scene.addItem(this.item);

            this.view.scene = scene;
            this.view.fitSceneToView();
            this.view.scalable = false;
        };

        changeEnable() {
            if (this.item) {
                this.item.enabled = !this.item.enabled;
            }
        }
    }
</script>

<style scoped>
</style>