persagy-web-doc/docs/.vuepress/components/scene/Align.vue

<template>
    <div>
        <el-button @click="addCircle">Circle</el-button>
        <el-button @click="addRect">Rect</el-button>
        <el-select placeholder="请选择" @change="changeAlign" v-model="value">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <canvas id="align" width="740" height="400" tabindex="0"></canvas>
    </div>
</template>

<script>
import { SGraphItem, SGraphLayoutType, SGraphScene, SGraphView } from "@persagy-web/graph/lib";
import { SColor, SRect } from "@persagy-web/draw/lib";

/**
 * 对其
 *
 * @author 郝洁 <haojie@persagy.com>
 */
class RectItem extends SGraphItem {
    width = 200;
    height = 100;
    text = '';

    constructor(parent) {
        super(parent);
        this.moveable = true;
        this.selectable = true;
        this.text = new Date().getMilliseconds().toString()
    }

    /**
     * 矩形数据类型绘制
     */
    boundingRect() {
        return new SRect(0, 0, this.width, this.height);
    }

    /**
     * Item 绘制操作
     * @param canvas    绘制对象
     */
    onDraw(canvas) {
        canvas.pen.color = SColor.Transparent;
        canvas.pen.lineWidth = canvas.toPx(1);
        canvas.brush.color = this.selected ? SColor.Red : new SColor("#00fcee");
        canvas.drawRect(0, 0, this.width, this.height);

        canvas.pen.lineDash = [10, 10];
        canvas.pen.color = SColor.Yellow;
        canvas.brush.color = SColor.Transparent;
        canvas.drawRect(this.boundingRect());

        canvas.brush.color = SColor.Black;
        canvas.drawText(`${this.x},${this.y}`, 0, 0);

    }
    }

class CircleItem extends SGraphItem {
    r = 75;
    text = '';

    constructor(parent) {
        super(parent);
        this.moveable = true;
        this.selectable = true;
        this.text = new Date().getMilliseconds().toString()
    }

    /**
     * 矩形数据类型绘制
     */
    boundingRect() {
        return new SRect(0, 0, this.r * 2, this.r * 2);
    }

    onDraw(canvas) {
        canvas.pen.color = SColor.Transparent;
        canvas.pen.lineWidth = canvas.toPx(1);
        canvas.brush.color = this.selected ? SColor.Red : new SColor("#00fcee");
        canvas.drawCircle(this.r, this.r, this.r);

            canvas.pen.color = SColor.Yellow;
            canvas.brush.color = SColor.Transparent;
            canvas.pen.lineDash = [10, 10];
            canvas.drawRect(this.boundingRect());

            canvas.brush.color = SColor.Black;
            canvas.drawText(`${this.x},${this.y}`, 0, 0);
        }
    }

class SScene extends SGraphScene {
    /** 定义命令 */
    cmd = 0;

    /**
     * 构造函数
     */
    constructor() {
        super();
    }


    onMouseUp(event) {
        switch (this.cmd) {
            case 1:
                this.addCircle(event.x, event.y);
                break;
            case 2:
                this.addRect(event.x, event.y);
                break;
            default:
                super.onMouseUp(event);
        }
        this.cmd = 0;
        return false
    }

    addCircle(x, y) {
        let item = new CircleItem(null);
        item.moveTo(x - 50, y - 50);
        this.addItem(item);
    }

    addRect(x, y) {
        let item = new RectItem(null);
        item.moveTo(x - 50, y - 50);
        this.addItem(item);
    }
}

class TestView extends SGraphView {
    /**
     * 构造函数
     */
    constructor() {
        super("align");
    }
}

    export default {
        data() {
            return {
                scene: new SScene(),
                value: -1,
                options: [
                    {
                        value: SGraphLayoutType.Left,
                        label: '左对齐'
                    },
                    {
                        value: SGraphLayoutType.Right,
                        label: '右对齐'
                    },
                    {
                        value: SGraphLayoutType.Top,
                        label: '顶对齐'
                    },
                    {
                        value: SGraphLayoutType.Bottom,
                        label: '底对齐'
                    },
                    {
                        value: SGraphLayoutType.Center,
                        label: '水平居中对齐'
                    },
                    {
                        value: SGraphLayoutType.Middle,
                        label: '垂直居中对齐'
                    },
                    {
                        value: SGraphLayoutType.Vertical,
                        label: '垂直分布'
                    },
                    {
                        value: SGraphLayoutType.Horizontal,
                        label: '水平分布'
                    }
                ]
            }
        },
        mounted() {
            let view = new TestView();
            view.scene = this.scene;//new SScene(); //this.data.scene;
        },
        methods: {
            addCircle() {
                this.scene.cmd = 1;
            },
            addRect() {
                this.scene.cmd = 2;
            },
            changeAlign(v) {
                this.scene.selectContainer.layout(v)
                // console.log(this.scene.selectContainer.layout(SGraphLayoutType.Left))
            }
        }
    }
</script>

<style scoped>

</style>