选择容器

目录

1.选择

2.对齐

3.置顶

4.单个对象调整大小,多个不可以

5.不支持旋转

6.移动多个选中的对象

7.支持8个点的调整

8.鼠标移动到8个点的时候变化,点也跟随变换

9.始终处于最顶层

10.根据背景调整自身颜色

11.点击选择器以外取消选择

查看实例代码

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

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

    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>