<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, SGraphScene, SGraphView, SGraphLayoutType} from "@persagy-web/graph/lib"; import { SColor, SPainter, SRect } from "@persagy-web/draw/lib"; 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); } 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>