|
@@ -0,0 +1,184 @@
|
|
|
|
+<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 "@saga-web/graph/lib";
|
|
|
|
+ import { SColor, SPainter, SRect } from "@saga-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>
|