<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>