|
@@ -0,0 +1,253 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-button @click="show">展示</el-button>
|
|
|
+ <el-button @click="create">创建</el-button>
|
|
|
+ <el-button @click="edit">编辑</el-button>
|
|
|
+ <canvas id="editLine" width="740" height="400" tabindex="0" />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script lang='ts'>
|
|
|
+ import {SGraphItem, SGraphScene, SGraphView} from "@saga-web/graph/";
|
|
|
+ import {SMouseEvent} from "@saga-web/base/";
|
|
|
+ import {SColor, SLine, SPainter, SPoint, SRect} from "@saga-web/draw";
|
|
|
+ import {SRelationState} from "@saga-web/big/lib/enums/SRelationState";
|
|
|
+ import {SMathUtil} from "@saga-web/big/lib/utils/SMathUtil";
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 直线item
|
|
|
+ *
|
|
|
+ * */
|
|
|
+
|
|
|
+ class SLineItem extends SGraphItem {
|
|
|
+ /** 线段 */
|
|
|
+ line: SPoint[] = [];
|
|
|
+ /** 是否完成绘制 */
|
|
|
+ _status: SRelationState = SRelationState.Create;
|
|
|
+ get status(): SRelationState {
|
|
|
+ return this._status;
|
|
|
+ }
|
|
|
+ set status(v: SRelationState) {
|
|
|
+ this._status = v;
|
|
|
+ this.update();
|
|
|
+ }
|
|
|
+ /** 线条颜色 */
|
|
|
+ _strokeColor: string = "#000000";
|
|
|
+ get strokeColor(): string {
|
|
|
+ return this._strokeColor;
|
|
|
+ }
|
|
|
+ set strokeColor(v: string) {
|
|
|
+ this._strokeColor = v;
|
|
|
+ this.update();
|
|
|
+ }
|
|
|
+ /** 填充色 */
|
|
|
+ _fillColor: string = "#2196f3";
|
|
|
+ get fillColor(): string {
|
|
|
+ return this._fillColor;
|
|
|
+ }
|
|
|
+ set fillColor(v: string) {
|
|
|
+ this._fillColor = v;
|
|
|
+ this.update();
|
|
|
+ }
|
|
|
+ /** 线条宽度 */
|
|
|
+ _lineWidth: number = 1;
|
|
|
+ get lineWidth(): number {
|
|
|
+ return this._lineWidth;
|
|
|
+ }
|
|
|
+ set lineWidth(v: number) {
|
|
|
+ this._lineWidth = v;
|
|
|
+ this.update();
|
|
|
+ }
|
|
|
+ /** 拖动灵敏度 */
|
|
|
+ dis: number = 10;
|
|
|
+ /** 拖动灵敏度 */
|
|
|
+ sceneDis: number = 10;
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 构造函数
|
|
|
+ *
|
|
|
+ * @param parent 父级
|
|
|
+ * @param line 坐标集合
|
|
|
+ * */
|
|
|
+ constructor(parent: SGraphItem | null, line: SPoint[]);
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 构造函数
|
|
|
+ *
|
|
|
+ * @param parent 父级
|
|
|
+ * @param point 第一个点坐标
|
|
|
+ * */
|
|
|
+ constructor(parent: SGraphItem | null, point: SPoint);
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 构造函数
|
|
|
+ *
|
|
|
+ * @param parent 父级
|
|
|
+ * @param l 坐标集合|第一个点坐标
|
|
|
+ * */
|
|
|
+ constructor(parent: SGraphItem | null, l: SPoint | SPoint[]) {
|
|
|
+ super(parent);
|
|
|
+ if (l instanceof SPoint) {
|
|
|
+ this.line.push(l);
|
|
|
+ } else {
|
|
|
+ this.line = l;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 鼠标按下事件
|
|
|
+ *
|
|
|
+ * @param event 鼠标事件
|
|
|
+ * @return 是否处理事件
|
|
|
+ * */
|
|
|
+ onMouseDown(event: SMouseEvent): boolean {
|
|
|
+ console.log(this);
|
|
|
+ if (this.status == SRelationState.Normal) {
|
|
|
+ return super.onMouseDown(event);
|
|
|
+ } else if (this.status == SRelationState.Edit) {
|
|
|
+ } else if (this.status == SRelationState.Create) {
|
|
|
+
|
|
|
+ }
|
|
|
+ this.$emit("mousedown");
|
|
|
+ return true;
|
|
|
+ } // Function onMouseDown()
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 鼠标移动事件
|
|
|
+ *
|
|
|
+ * @param event 鼠标事件
|
|
|
+ * @return 是否处理事件
|
|
|
+ * */
|
|
|
+ onMouseMove(event: SMouseEvent): boolean {
|
|
|
+ if (this.status == SRelationState.Create) {
|
|
|
+
|
|
|
+ return true;
|
|
|
+ } else {
|
|
|
+ return super.onMouseMove(event);
|
|
|
+ }
|
|
|
+ } // Function onMouseMove()
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 鼠标移动事件
|
|
|
+ *
|
|
|
+ * @param event 鼠标事件
|
|
|
+ * @return 是否处理事件
|
|
|
+ * */
|
|
|
+ onMouseUp(event: SMouseEvent): boolean {
|
|
|
+ // if (this.status == SRelationState.Create) {
|
|
|
+ // this.status = SRelationState.Edit;
|
|
|
+ // return true;
|
|
|
+ // } else {
|
|
|
+ return super.onMouseUp(event);
|
|
|
+ // }
|
|
|
+ } // Function onMouseUp()
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 判断点是否在区域内
|
|
|
+ *
|
|
|
+ * @param x
|
|
|
+ * @param y
|
|
|
+ * @return true-是
|
|
|
+ */
|
|
|
+ contains(x: number, y: number): boolean {
|
|
|
+ if (this.line.length == 2) {
|
|
|
+ let p = new SPoint(x, y);
|
|
|
+ if (
|
|
|
+ SMathUtil.pointToLine(p, new SLine(this.line[0], this.line[1])).MinDis <
|
|
|
+ this.dis
|
|
|
+ ) {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return false;
|
|
|
+ } // Function contains()
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Item对象边界区域
|
|
|
+ *
|
|
|
+ * @return SRect
|
|
|
+ */
|
|
|
+ boundingRect(): SRect {
|
|
|
+ if (this.line.length == 2) {
|
|
|
+ let x: number = this.line[0].x > this.line[1].x ? this.line[1].x : this.line[0].x;
|
|
|
+ let y: number = this.line[0].x > this.line[1].x ? this.line[1].y : this.line[0].y;
|
|
|
+ let width: number = Math.abs(this.line[0].x - this.line[1].x);
|
|
|
+ let height: number = Math.abs(this.line[0].y - this.line[1].y);
|
|
|
+ return new SRect(
|
|
|
+ x,
|
|
|
+ y,
|
|
|
+ width,
|
|
|
+ height
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ return new SRect();
|
|
|
+ }
|
|
|
+ } // Function boundingRect()
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Item绘制操作
|
|
|
+ *
|
|
|
+ * @param painter painter对象
|
|
|
+ */
|
|
|
+ onDraw(painter: SPainter): void {
|
|
|
+ this.sceneDis = painter.toPx(this.dis);
|
|
|
+ painter.pen.lineWidth = painter.toPx(this.lineWidth);
|
|
|
+ painter.pen.color = new SColor(this.strokeColor);
|
|
|
+ if (this.p1 instanceof SPoint && this.p2 instanceof SPoint) {
|
|
|
+ // 绘制外轮廓
|
|
|
+ painter.brush.color = SColor.Transparent;
|
|
|
+ painter.pen.color = new SColor("#128eee");
|
|
|
+ painter.drawRect(this.boundingRect());
|
|
|
+
|
|
|
+ // 绘制基本图形
|
|
|
+ painter.pen.color = new SColor(this.strokeColor);// 需注释
|
|
|
+ painter.drawLine(this.p1, this.p2);
|
|
|
+
|
|
|
+ // 编辑态
|
|
|
+ if (this.status == SRelationState.Edit) {
|
|
|
+ painter.brush.color = SColor.White;
|
|
|
+
|
|
|
+ // painter.brush.color = new SColor(this.fillColor);
|
|
|
+
|
|
|
+ painter.drawCircle(this.p1.x, this.p1.y, painter.toPx(5));
|
|
|
+
|
|
|
+ painter.drawCircle(this.p2.x, this.p2.y, painter.toPx(5));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } // Function onDraw()
|
|
|
+ } // Class SLineItem
|
|
|
+
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ scene: null,
|
|
|
+ view: null
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted(): void {
|
|
|
+ this.view = new SGraphView("editLine");
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ show() {
|
|
|
+ const scene = new SGraphScene();
|
|
|
+ this.view.scene = scene;
|
|
|
+ const line: SPoint[] = [new SPoint(100, 100), new SPoint(300, 300)];
|
|
|
+ const lineItem = new SLineItem(null, line);
|
|
|
+ lineItem.status = SRelationState.Normal;
|
|
|
+ scene.addItem(lineItem);
|
|
|
+ this.view.fitSceneToView();
|
|
|
+ },
|
|
|
+ create() {
|
|
|
+ const scene = new SGraphScene();
|
|
|
+ this.view.scene = scene;
|
|
|
+ const lineItem = new SLineItem(null, [] );
|
|
|
+ lineItem.status = SRelationState.Create;
|
|
|
+ scene.addItem(lineItem);
|
|
|
+ scene.grabItem = lineItem;
|
|
|
+ this.view.fitSceneToView();
|
|
|
+ },
|
|
|
+ edit() {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|