123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567 |
- <template>
- <div>
- <el-button @click="show">展示</el-button>
- <el-button @click="create">创建</el-button>
- <el-button @click="edit">编辑</el-button>
- <canvas id="editPolygon" width="800" height="400" tabindex="0" />
- </div>
- </template>
- <script lang='ts'>
- import { SGraphItem, SGraphView, SGraphScene } from "@persagy-web/graph/";
- import {
- SColor,
- SLineCapStyle,
- SPainter,
- SPath2D,
- SPoint,
- SPolygonUtil,
- SRect,
- SLine
- } from "@persagy-web/draw";
- import { SRelationState } from "@persagy-web/big/lib/enums/SRelationState";
- import { SMathUtil } from "@persagy-web/big/lib/utils/SMathUtil";
- export default {
- data() {
- return {
- scene: null,
- view: null
- };
- },
- mounted(): void {
- this.view = new SGraphView("editPolygon");
- },
- methods: {
- show() {
- const scene = new SGraphScene();
- this.view.scene = scene;
- const spolygonItem = new SPolygonItem(null);
- spolygonItem.setStatus = SRelationState.Normal;
- const PointList: SPoint[] = [
- new SPoint(0, 0),
- new SPoint(50, 0),
- new SPoint(50, 50),
- new SPoint(0, 50)
- ];
- spolygonItem.setPointList = PointList;
- scene.addItem(spolygonItem);
- this.view.fitSceneToView();
- },
- create() {
- const scene = new SGraphScene();
- this.view.scene = scene;
- const spolygonItem = new SPolygonItem(null);
- spolygonItem.setStatus = SRelationState.Create;
- scene.addItem(spolygonItem);
- scene.grabItem = spolygonItem;
- this.view.fitSceneToView();
- },
- edit() {
- const scene = new SGraphScene();
- this.view.scene = scene;
- const spolygonItem = new SPolygonItem(null);
- spolygonItem.setStatus = SRelationState.Edit;
- const PointList: SPoint[] = [
- new SPoint(0, 0),
- new SPoint(50, 0),
- new SPoint(50, 60),
- new SPoint(0, 50)
- ];
- spolygonItem.setPointList = PointList;
- scene.addItem(spolygonItem);
- scene.grabItem = spolygonItem;
- this.view.fitSceneToView();
- }
- }
- };
- class SPolygonItem extends SGraphItem {
-
- private minX = Number.MAX_SAFE_INTEGER;
-
- private maxX = Number.MIN_SAFE_INTEGER;
-
- private minY = Number.MAX_SAFE_INTEGER;
-
- private maxY = Number.MIN_SAFE_INTEGER;
-
- private pointList: SPoint[] = [];
-
- get getPointList(): SPoint[] {
- return this.pointList;
- }
-
- set setPointList(arr: SPoint[]) {
- this.pointList = arr;
- if (arr) {
- this._xyzListToSPointList(arr);
- }
- this.update();
- }
-
- closeFlag: boolean = false;
-
- _status: number = SRelationState.Normal;
-
- get getStatus(): number {
- return this._status;
- }
-
- set setStatus(value: number) {
- this._status = value;
- this.update();
- }
-
- borderColor: SColor = new SColor("#0091FF");
-
- brushColor: SColor = new SColor("#1EE887");
-
- borderLine: number = 4;
-
- private lastPoint = new SPoint();
-
- private curIndex: number = -1;
-
- private len: number = 15;
-
- private scenceLen: number = 15;
-
- private isAlt: boolean = false;
-
- constructor(parent: SGraphItem | null) {
- super(parent);
- }
-
-
- insertPoint(x: number, y: number, i: number | null = null): SPoint {
- const point = new SPoint(x, y);
- if (i == null) {
- this.pointList.push(point);
- } else {
- this.pointList.splice(i, 0, point);
- }
- this.update();
- return point;
- }
-
- deletePoint(i: number | null = null): SPoint | null | undefined {
- let point = null;
- if (i != null) {
- if (this.pointList.length - 1 >= i) {
- point = this.pointList[i];
- this.pointList.splice(i, 1);
- } else {
- point = null;
- }
- } else {
- point = this.pointList.pop();
- }
- this.update();
- return point;
- }
-
- movePoint(x: number, y: number, i: number): SPoint | null | undefined {
- let point = null;
- if (this.pointList.length) {
- this.pointList[i].x = x;
- this.pointList[i].y = y;
- }
- point = this.pointList[i];
- return point;
- }
-
- PrintPointList(): SPoint[] {
- return this.pointList;
- }
-
-
- protected _xyzListToSPointList(arr: SPoint[]): void {
- if (arr.length) {
- this.pointList = arr.map(it => {
- let x = it.x,
- y = it.y;
- if (x < this.minX) {
- this.minX = x;
- }
- if (y < this.minY) {
- this.minY = y;
- }
- if (x > this.maxX) {
- this.maxX = x;
- }
- if (y > this.maxY) {
- this.maxY = y;
- }
- return new SPoint(x, y);
- });
- } else {
- this.pointList = [];
- }
- }
-
-
- protected drawShowPolygon(painter: SPainter, pointList: SPoint[]): void {
- painter.pen.lineCapStyle = SLineCapStyle.Square;
- painter.pen.color = this.borderColor;
- painter.pen.lineWidth = painter.toPx(this.borderLine);
- painter.brush.color = this.brushColor;
- painter.drawPolygon([...pointList]);
- }
-
- protected drawCreatePolygon(painter: SPainter, pointList: SPoint[]): void {
- painter.pen.lineCapStyle = SLineCapStyle.Square;
- painter.pen.color = this.borderColor;
- painter.pen.lineWidth = painter.toPx(4);
- painter.drawPolyline(pointList);
- if (this.lastPoint) {
- painter.drawLine(pointList[pointList.length - 1], this.lastPoint);
- }
- painter.pen.color = SColor.Transparent;
- painter.brush.color = this.brushColor;
- painter.pen.lineWidth = painter.toPx(4);
- painter.drawPolygon([...pointList, this.lastPoint]);
- }
-
- protected drawEditPolygon(painter: SPainter, pointList: SPoint[]): void {
-
- this.drawShowPolygon(painter, pointList);
-
- pointList.forEach((item, index) => {
- painter.drawCircle(item.x, item.y, painter.toPx(8));
- });
- }
-
-
- protected editPolygonPoint(event: SMouseEvent): void {
-
- if (this.isAlt) {
-
- let lenIndex = -1;
- let curenLen = this.scenceLen;
- this.pointList.forEach((item, index) => {
- let dis = SMathUtil.pointDistance(event.x, event.y, item.x, item.y);
- if (dis < curenLen) {
- curenLen = dis;
- lenIndex = index;
- }
- });
-
- if (lenIndex != -1) {
- if (this.pointList.length <= 3) {
- return;
- }
- this.deletePoint(lenIndex);
- }
- } else {
-
- this.curIndex = -1;
- let lenIndex = -1;
- let curenLen = this.scenceLen;
- this.pointList.forEach((item, index) => {
- let dis = SMathUtil.pointDistance(event.x, event.y, item.x, item.y);
- if (dis < curenLen) {
- curenLen = dis;
- lenIndex = index;
- }
- });
- this.curIndex = lenIndex;
-
- if (-1 == lenIndex) {
- let len = SMathUtil.pointToLine(
- new SPoint(event.x, event.y),
- new SLine(this.pointList[0], this.pointList[1])
- ),
- index = 0;
- if (this.pointList.length > 2) {
- for (let i = 1; i < this.pointList.length; i++) {
- let dis = SMathUtil.pointToLine(
- new SPoint(event.x, event.y),
- new SLine(this.pointList[i], this.pointList[i + 1])
- );
- if (i + 1 == this.pointList.length) {
- dis = SMathUtil.pointToLine(
- new SPoint(event.x, event.y),
- new SLine(this.pointList[i], this.pointList[0])
- );
- }
- if (dis.MinDis < len.MinDis) {
- len = dis;
- index = i;
- }
- }
- }
-
- if (len.Point) {
- if (len.MinDis <= this.scenceLen) {
- this.pointList.splice(index + 1, 0, len.Point);
- }
- }
- }
-
- this.update();
- }
- }
-
-
- onDoubleClick(event: SMouseEvent): boolean {
-
- if (SRelationState.Normal == this._status) {
- this._status = SRelationState.Edit;
- } else if (SRelationState.Edit == this._status) {
- this._status = SRelationState.Normal;
- }
- this.update();
- return true;
- }
-
- onKeyDown(event: KeyboardEvent): boolean {
- console.log(event);
- if (this._status == SRelationState.Normal) {
- return false;
- } else if (this._status == SRelationState.Create) {
- if (event.code == "Enter") {
- this._status = SRelationState.Normal;
- }
- } else if (this._status == SRelationState.Edit) {
- if (event.key == "Alt") {
- this.isAlt = true;
- }
- } else {
- }
- this.update();
- return true;
- }
-
- onKeyUp(event: KeyboardEvent): boolean {
- if (this._status == SRelationState.Edit) {
- if (event.key == "Alt") {
- this.isAlt = false;
- }
- }
- this.update();
- return true;
- }
-
- onMouseDown(event: SMouseEvent): boolean {
- console.log("aaaaaa");
-
- if (this._status == SRelationState.Create) {
-
- this.insertPoint(event.x, event.y);
- } else if (this._status == SRelationState.Edit) {
-
- this.editPolygonPoint(event);
- }
- return true;
- }
-
- onMouseEnter(event: SMouseEvent): boolean {
- return true;
- }
-
- onMouseLeave(event: SMouseEvent): boolean {
- return true;
- }
-
- onMouseMove(event: SMouseEvent): boolean {
- if (this._status == SRelationState.Create) {
- this.lastPoint.x = event.x;
- this.lastPoint.y = event.y;
- } else if (this._status == SRelationState.Edit) {
- if (-1 != this.curIndex) {
- this.pointList[this.curIndex].x = event.x;
- this.pointList[this.curIndex].y = event.y;
- }
- }
- this.update();
- return true;
- }
-
- onMouseUp(event: SMouseEvent): boolean {
- if (this._status == SRelationState.Edit) {
- this.curIndex = -1;
- }
- return true;
- }
-
- onResize(event: SMouseEvent): boolean {
- return true;
- }
-
- boundingRect(): SRect {
- return new SRect(
- this.minX,
- this.minY,
- this.maxX - this.minX,
- this.maxY - this.minY
- );
- }
-
- onDraw(painter: SPainter): void {
- this.scenceLen = painter.toPx(this.len);
-
- if (this._status == SRelationState.Normal) {
-
- this.drawShowPolygon(painter, this.pointList);
- } else if (this._status == SRelationState.Create) {
-
- this.drawCreatePolygon(painter, this.pointList);
- } else {
-
- this.drawEditPolygon(painter, this.pointList);
- }
- }
- }
- </script>
|