123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469 |
- <template>
- <div>
- <el-button @click="changemaodian">切换锚点显示状态</el-button>
- <el-button @click="changetext">切换文本显示状态</el-button>
- <canvas id="editPolygon" width="740" height="400" tabindex="0"></canvas>
- </div>
- </template>
- <script lang="ts">
- import {
- SAnchorItem,
- SGraphItem,
- SGraphScene,
- SGraphView,
- SImageItem,
- SObjectItem,
- STextItem
- } from "@persagy-web/graph/lib";
- import { SItemStatus } from "@persagy-web/big/lib";
- import { SColor, SPainter, SRect, SSize, SPoint, SFont } from "@persagy-web/draw/lib";
- import { SMouseEvent } from "@persagy-web/base/lib";
- import { Anchor } from "@persagy-web/big/lib/types/topology/Anchor";
- class SImgTextItem extends SObjectItem {
-
- _status: SItemStatus = SItemStatus.Normal;
- get status(): SItemStatus {
- return this._status;
- }
- set status(v: SItemStatus) {
- this._status = v;
-
- if (v == SItemStatus.Normal) {
- this.moveable = true;
- this.textItem.moveable = false;
- this.img.moveable = false;
- } else if (v == SItemStatus.Edit) {
-
- this.moveable = false;
- this.textItem.moveable = true;
- this.img.moveable = true;
- } else if (v == SItemStatus.Create) {
-
- this.moveable = true;
- this.textItem.moveable = false;
- this.img.moveable = false;
- }
- this.update();
- }
-
- _showText: boolean = true;
- get showText(): boolean {
- return this._showText;
- }
- set showText(v: boolean) {
-
- if (v === this._showText) {
- return;
- }
- this._showText = v;
-
- if (v) {
- this.textItem.show();
- } else {
- this.textItem.hide();
- }
- }
-
- get selected(): boolean {
- return this._selected && this.selectable && this.enabled;
- }
- set selected(value: boolean) {
-
- if (this.selected == value) {
- return;
- }
- this._selected = value;
-
- if (value) {
- this.img.scale = 1.25;
- } else {
- this.img.scale = 1;
- }
- this.update();
- }
-
- _isActive: boolean = false;
- get isActive(): boolean {
- return this._isActive;
- }
- set isActive(v: boolean) {
- this._isActive = v;
-
- if (v) {
- this.cursor = "pointer";
- this.textItem.cursor = "pointer";
- this.img.cursor = "pointer";
- } else {
- this.cursor = "auto";
- this.textItem.cursor = "auto";
- this.img.cursor = "auto";
- }
- this.update();
- }
-
- _activeColor: SColor = new SColor("#00000033");
- get activeColor(): SColor {
- return this._activeColor;
- }
- set activeColor(v: SColor) {
- this._activeColor = v;
- this.update();
- }
-
- get x(): number {
- return this.pos.x;
- }
- set x(v: number) {
- this.pos.x = v;
- this.$emit("changePos");
- this.update();
- }
-
- get y(): number {
- return this.pos.y;
- }
- set y(v: number) {
- this.pos.y = v;
- this.$emit("changePos");
- this.update();
- }
-
- get sWidth(): number {
- return this.img.width;
- }
- set sWidth(v: number) {
- this.img.width = v;
- this.img.origin = new SPoint(
- this.img.width * 0.5,
- this.img.height * 0.5
- );
- this.changeAnchorPoint();
- this.update();
- }
-
- get sHeight(): number {
- return this.img.height;
- }
- set sHeight(v: number) {
- this.img.height = v;
- this.img.origin = new SPoint(
- this.img.width * 0.5,
- this.img.height * 0.5
- );
- this.changeAnchorPoint();
- this.update();
- }
-
- private _showAnchor: boolean = false;
- get showAnchor(): boolean {
- return this._showAnchor;
- }
- set showAnchor(v: boolean) {
- this._showAnchor = v;
- this.anchorList.forEach(t => {
- t.visible = v;
- });
- }
-
- get text(): string {
- return this.textItem.text;
- }
- set text(v: string) {
- this.textItem.text = v;
- this.update();
- }
-
- get color(): SColor {
- return this.textItem.color;
- }
- set color(v: SColor) {
- this.textItem.color = v;
- this.update();
- }
-
- get font(): SFont {
- return this.textItem.font;
- }
- set font(v: SFont) {
- this.textItem.font = v;
- this.update();
- }
-
- img: SImageItem = new SImageItem(this, 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2134829550,3120755721&fm=26&gp=0.jpg');
-
- textItem: STextItem = new STextItem(this);
-
- constructor(parent: SGraphItem | null, data?: Anchor[]) {
- super(parent);
- this.img.width = 32;
- this.img.height = 32;
- this.img.origin = new SPoint(
- this.img.width * 0.5,
- this.img.height * 0.5
- );
- this.img.connect("onMove", this, this.changeAnchorPoint.bind(this));
- let anchorPoint;
-
- if (data && data.length) {
- anchorPoint = data.map(t => {
- return {
- x: t.pos.x,
- y: t.pos.y,
- id: t.id
- };
- });
- } else {
- anchorPoint = [
- { x: this.img.x, y: this.img.y, id: "" },
- { x: this.img.x, y: this.img.y, id: "" },
- { x: this.img.x, y: this.img.y, id: "" },
- { x: this.img.x, y: this.img.y, id: "" }
-
-
-
-
- ];
- }
- this.anchorList = anchorPoint.map(t => {
- let item = new SAnchorItem(this);
- if (t.id) {
- item.id = t.id;
- }
- item.moveTo(t.x, t.y);
- return item;
- });
- this.showAnchor = false;
- this.textItem.text = "测试文本";
- this.textItem.font.size = 12;
-
- this.textItem.moveTo(
- this.img.width * 0.5,
- -(this.font.size * 1.25 * 0.5)
- );
- this.showSelect = false;
- this.moveable = true;
- this.selectable = true;
- }
-
- private changeAnchorPoint(): void {
-
- if (this.anchorList.length) {
- let anchorPoint = [
- { x: this.img.x, y: this.img.y },
- { x: this.img.x, y: this.img.y },
- { x: this.img.x, y: this.img.y },
- { x: this.img.x, y: this.img.y }
-
-
-
-
- ];
- this.anchorList.forEach((item, index) => {
- item.moveTo(anchorPoint[index].x, anchorPoint[index].y);
- });
- }
- }
-
- onMouseDown(event: SMouseEvent): boolean {
- console.log(123123123)
-
-
- if (this.status == SItemStatus.Normal) {
- return super.onMouseDown(event);
- } else if (this.status == SItemStatus.Edit) {
-
- return super.onMouseDown(event);
- }
- console.log('----------------')
- return true;
- }
-
- onResize(oldSize: SSize, newSize: SSize): void {
- console.log(arguments);
- }
-
- onDoubleClick(event: SMouseEvent): boolean {
-
- if (SItemStatus.Normal == this.status) {
- this.status = SItemStatus.Edit;
- this.grabItem(this);
- } else if (SItemStatus.Edit == this.status) {
-
- this.status = SItemStatus.Normal;
- this.releaseItem();
- }
- this.update();
- return true;
- }
-
- boundingRect(): SRect {
- let rect = this.img
- .boundingRect()
- .adjusted(this.img.pos.x, this.img.pos.y, 0, 0);
-
- if (this.showText) {
- rect = rect.unioned(
- this.textItem
- .boundingRect()
- .adjusted(this.textItem.pos.x, this.textItem.pos.y, 0, 0)
- );
- }
- return rect.adjusted(-5, -5, 10, 10);
- }
-
- onDraw(painter: SPainter): void {
-
- if (this.status == SItemStatus.Edit) {
- painter.pen.lineWidth = painter.toPx(1);
- painter.pen.lineDash = [painter.toPx(3), painter.toPx(7)];
- painter.pen.color = SColor.Black;
- painter.brush.color = SColor.Transparent;
- painter.drawRect(this.boundingRect());
- }
-
- if (this.isActive) {
- painter.pen.color = SColor.Transparent;
- painter.brush.color = this.activeColor;
-
- if (this.selected) {
- painter.shadow.shadowBlur = 10;
- painter.shadow.shadowColor = this.activeColor;
- painter.shadow.shadowOffsetX = 5;
- painter.shadow.shadowOffsetY = 5;
- painter.drawCircle(
- this.img.x,
- this.img.y,
- (this.sWidth / 2.0 + 3) * 1.25
- );
- } else {
- painter.drawCircle(
- this.img.x,
- this.img.y,
- this.sWidth / 2.0 + 3
- );
- }
- } else {
-
- if (this.selected) {
- painter.pen.color = SColor.Transparent;
- painter.brush.color = SColor.Transparent;
- painter.shadow.shadowBlur = 10;
- painter.shadow.shadowColor = new SColor(`#00000033`);
- painter.shadow.shadowOffsetX = 5;
- painter.shadow.shadowOffsetY = 5;
- painter.drawCircle(this.img.x, this.img.y, this.sWidth / 2.0);
- }
- }
- }
- }
- export default {
- name: "ImgTextItem",
- data() {
- return {
-
- scene: null,
-
- view: null,
- input: '',
- };
- },
-
- mounted() {
-
- this.view = new SGraphView("editPolygon");
-
- this.scene = new SGraphScene();
-
- this.view.scene = this.scene;
-
- this.init()
- },
- methods: {
-
- init() {
-
- this.item = new SImgTextItem(null);
-
- this.item.moveable = true;
-
- this.scene.addItem(this.item);
-
- },
- changemaodian() {
-
- this.item.showAnchor = !this.item.showAnchor;
- },
- changetext() {
-
- this.item.showText = !this.item.showText;
- }
- }
- }
- </script>
|