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

<template>
    <div>
        <canvas :id="id" width="740" height="400" tabindex="0"/>
    </div>
</template>

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

/**
 * 选择容器
 *
 * @author 郝洁 <haojie@persagy.com>
 */
class ResizeRect extends SGraphRectItem {
    resize(oldSize: SRect, newSize: SRect): void {
        this.width = newSize.width;
        this.height = newSize.height;
    }
}

@Component
export default class SelectContainerCanvas extends Vue {
    id: string = uuid();
    view: SGraphView | undefined;
    rectData = {
        x: 0,
        y: 0,
        width: 500,
        height: 500,
        radius: 0,
        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(): void {
        this.init()
    };

    init(): void {
        this.view = new SGraphView(this.id);
        const scene = new SGraphScene();
        const item = new ResizeRect(null, this.rectData);
        scene.addItem(item);
        item.selectable = true;
        item.moveable = true;
        this.view.scene = scene;
        this.view.fitSceneToView();
        this.view.scalable = false;
    };
}
</script>

<style scoped>

</style>