# 选择容器

目录

    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>
    
    Vue
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    Last Updated: 9/14/2020, 2:54:52 PM