shaojiahao
/
ShangHaiYuan-AnXin
2
0
Fork 0
Code Issues 11 Pull Requests Projects Releases Wiki Activity
Browse Source

绘制左上角调整大小

zhuzhou
徐振升 4 years ago
parent
80892fe9c7
commit
9d2539ec47
2 changed files with 70 additions and 105 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 109
      src/app/working-area/model/axImageShape.ts
  2. 66
      src/app/working-area/model/axShape.ts

109
src/app/working-area/model/axImageShape.ts
Unescape View File

@ -5,7 +5,7 @@ import { PaintMode } from './paintModel';
import * as PIXI from 'pixi.js'; import * as PIXI from 'pixi.js';
import { PropertyInfo } from './PropertyInfo'; import { PropertyInfo } from './PropertyInfo';
import { AxShape } from './axShape'; import { AxShape } from './axShape';
import { Sprite, Point } from 'pixi.js'; import { Sprite, Point, Rectangle } from 'pixi.js';
import { AxArrowConnector } from './axArrowConnector'; import { AxArrowConnector } from './axArrowConnector';
/** /**
@ -31,6 +31,7 @@ export class AxImageShape extends AxShape {
wordWrapWidth: 100, wordWrapWidth: 100,
}); });
text = new PIXI.Text(this.assetData.Name text = new PIXI.Text(this.assetData.Name
+ '\r\n' + '\r\n'
+ this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style); + this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style);
@ -79,41 +80,67 @@ export class AxImageShape extends AxShape {
var rightDownPos = new Point(0, 0); var rightDownPos = new Point(0, 0);
// up-left // up-left
this.upLeft = new PIXI.Sprite(this.pointTexture); this.upLeft = new PIXI.Sprite(this.pointTexture);
this.upLeft.cursor = 'nwse-resize';
this.upLeft.anchor.set(0.5); this.upLeft.anchor.set(0.5);
this.addChild(this.upLeft); this.addChild(this.upLeft);
this.upLeft.interactive = true; this.upLeft.interactive = true;
this.upLeft.on('pointerdown', event => { this.upLeft.on('pointerdown', event => {
event.stopPropagation();
upLeftDrag = true; upLeftDrag = true;
// this.pivot.set(1); var imageRect = new Rectangle(this.image.x, this.image.y, this.image.width, this.image.height);
var imageRect = this.image.getLocalBounds(); console.log('图片的边界大小', imageRect);
rightDownPos = new Point(imageRect.right, imageRect.bottom); rightDownPos = new Point(imageRect.right, imageRect.bottom);
this.image.anchor.set(1);
this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y + (this.image.height / 2));
event.stopPropagation();
}); });
this.upLeft.on('pointermove', event => { this.upLeft.on('pointermove', event => {
// 移动时调整形状大小，然后重绘边框 // 移动时调整形状大小，然后重绘边框
// 检查右下角距离鼠标的位置， // 检查右下角距离鼠标的位置，
event.stopPropagation(); if (upLeftDrag) {
leftUpPos = this.toLocal(event.data.global); leftUpPos = event.data.getLocalPosition(this.upLeft.parent);
this.image.width = Math.abs(leftUpPos.x - rightDownPos.x); console.log('鼠标点击位置的坐标', leftUpPos);
this.image.height = Math.abs(leftUpPos.y - rightDownPos.y);
this.assetData.Width = Math.abs(leftUpPos.x);
this.assetData.Height = Math.abs(leftUpPos.x);
this.refresh();
}
});
this.upLeft.on('pointerup', event => {
if (upLeftDrag) {
upLeftDrag = false;
this.image.anchor.set(0.5);
this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y - (this.image.height / 2));
}
});
this.upLeft.on('pointerupoutside', event => {
if (upLeftDrag) {
upLeftDrag = false;
this.image.anchor.set(0.5);
this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y - (this.image.height / 2));
}
}); });
this.upLeft.visible = false; this.upLeft.visible = false;
// up-right // up-right
this.upRight = new PIXI.Sprite(this.pointTexture); this.upRight = new PIXI.Sprite(this.pointTexture);
this.upRight.cursor = 'nesw-resize';
this.upRight.anchor.set(0.5); this.upRight.anchor.set(0.5);
this.addChild(this.upRight); this.addChild(this.upRight);
this.upRight.interactive = true; this.upRight.interactive = true;
this.upRight.visible = false; this.upRight.visible = false;
// down-left // down-left
this.downLeft = new PIXI.Sprite(this.pointTexture); this.downLeft = new PIXI.Sprite(this.pointTexture);
this.downLeft.cursor = 'nesw-resize';
this.downLeft.anchor.set(0.5); this.downLeft.anchor.set(0.5);
this.addChild(this.downLeft); this.addChild(this.downLeft);
this.downLeft.interactive = true; this.downLeft.interactive = true;
this.downLeft.visible = false; this.downLeft.visible = false;
// down-right // down-right
this.downRight = new PIXI.Sprite(this.pointTexture); this.downRight = new PIXI.Sprite(this.pointTexture);
this.downRight.cursor = 'nwse-resize';
this.downRight.anchor.set(0.5); this.downRight.anchor.set(0.5);
this.addChild(this.downRight); this.addChild(this.downRight);
this.downRight.interactive = true; this.downRight.interactive = true;
@ -215,71 +242,8 @@ export class AxImageShape extends AxShape {
this.downRight.scale.set(scale); this.downRight.scale.set(scale);
} }
} }
// paintingPipeline(x: number, y: number) {
// if (this.assetData.CanConnect) {
// if (this.workingArea.getPaintMode() === PaintMode.Pipeline) {
// if (this.workingArea.paintingShape === null) {
// this.workingArea.previewLineSegment.visible = true;
// this.workingArea.currentClickPoint.position =
// new PIXI.Point(this.workingArea.circleShadow.x, this.workingArea.circleShadow.y);
// this.workingArea.paintPoints.push(new PIXI.Point(x, y));
// const json = JSON.parse(JSON.stringify(this.workingArea.canvasData.selectTemplateData.propertyInfos));
// const list = [];
// json.forEach(element => {
// const property = new PropertyInfo(element);
// list.push(property);
// });
// const tempData = {
// TemplateId: this.workingArea.canvasData.selectTemplateData.id,
// CanConnect: this.workingArea.canvasData.selectTemplateData.canConnect,
// Pipelines: new Array(),
// FloorId: this.workingArea.canvasData.selectStorey.id,
// Angle: this.workingArea.canvasData.selectTemplateData.angle,
// Color: this.workingArea.canvasData.selectTemplateData.color,
// Enabled: this.workingArea.canvasData.selectTemplateData.enabled,
// FillMode: this.workingArea.canvasData.selectTemplateData.fillMode,
// FireElementId: this.workingArea.canvasData.selectTemplateData.fireElementId,
// FixedSize: this.workingArea.canvasData.selectTemplateData.fixedSize,
// Height : 32,
// Width : 32,
// Id: ObjectID.default.generate(),
// ImageUrl: this.workingArea.canvasData.selectTemplateData.imageUrl,
// InteractiveMode: this.workingArea.canvasData.selectTemplateData.interactiveMode,
// MultiPoint : JSON.parse(JSON.stringify(this.workingArea.paintPoints)),
// Point: new PIXI.Point(0, 0),
// Name : this.workingArea.canvasData.selectTemplateData.name,
// PropertyInfos: list,
// Border : this.workingArea.canvasData.selectTemplateData.border,
// DrawMode : this.workingArea.canvasData.selectTemplateData.drawMode,
// Thickness : this.workingArea.canvasData.selectTemplateData.thickness,
// IsFromBuilding : this.workingArea.canvasData.selectTemplateData.isFromBuilding,
// GameMode: this.workingArea.canvasData.gameMode,
// LinkedObjects: new Array(this.assetData.Id),
// Tag: this.workingArea.canvasData.selectTemplateData.tag
// };
// this.workingArea.paintingShape = new AxArrowConnector(tempData, this.workingArea, false, true);
// this.assetData.Pipelines.push(this.workingArea.paintingShape.assetData.Id);
// this.workingArea.emit('createIcon', this.workingArea.paintingShape);
// } else {
// this.workingArea.previewLineSegment.visible = false;
// this.workingArea.currentClickPoint.position =
// new PIXI.Point(this.workingArea.circleShadow.x, this.workingArea.circleShadow.y);
// this.workingArea.paintPoints.push(new PIXI.Point(x, y));
// this.workingArea.paintingShape.assetData.MultiPoint =
// JSON.parse(JSON.stringify(this.workingArea.paintPoints));
// this.workingArea.paintingShape.assetData.LinkedObjects.push(this.assetData.Id);
// this.assetData.Pipelines.push(this.workingArea.paintingShape.assetData.Id);
// this.workingArea.paintingShape.redraw();
// this.workingArea.initPipelineData();
// }
// }
// }
// }
// 刷新 // 刷新
public refresh() { public refresh() {
if (this.assetData.CanConnect) {
}
this.image.width = this.assetData.Width; this.image.width = this.assetData.Width;
this.image.height = this.assetData.Height; this.image.height = this.assetData.Height;
this.image.angle = this.assetData.Angle; this.image.angle = this.assetData.Angle;
@ -289,5 +253,6 @@ export class AxImageShape extends AxShape {
this.text.x = this.image.x; this.text.x = this.image.x;
this.text.y = this.image.y - this.image.height / 2; this.text.y = this.image.y - this.image.height / 2;
this.angle = -this.workingArea.backgroundImage.angle; this.angle = -this.workingArea.backgroundImage.angle;
this.drawBorder(1 / this.workingArea.backgroundImage.scale.x);
} }
} }

66
src/app/working-area/model/axShape.ts
Unescape View File

@ -32,7 +32,7 @@ export class AxShape extends Graphics {
this.workingArea.backgroundImage.addChild(this); this.workingArea.backgroundImage.addChild(this);
this.zIndex = 200; this.zIndex = 200;
this.interactive = true; this.interactive = true;
this.buttonMode = true; // this.buttonMode = true;
this this
.on('pointerdown', event => { .on('pointerdown', event => {
event.stopPropagation(); event.stopPropagation();
@ -88,10 +88,10 @@ export class AxShape extends Graphics {
public hideBorder() { public hideBorder() {
this.border.visible = false; this.border.visible = false;
} }
/** /**
* 设置点显示状态 * 设置点显示状态
* @param value 显示状态 * @param value 显示状态
*/ */
public setPointVisiable(value: boolean) { public setPointVisiable(value: boolean) {
} }
@ -112,7 +112,7 @@ export class AxShape extends Graphics {
const spaceLength = scale * 1; const spaceLength = scale * 1;
const lineLenght = rect.width + 0.5 + 0.5; const lineLenght = rect.width + 0.5 + 0.5;
const dashLength = scale * ( lineLenght + spaceLength - Math.floor((rect.width + rect.height) / 2 / 4.1)) / Math.floor((rect.width + rect.height) / 2 / 4.1); const dashLength = scale * (lineLenght + spaceLength - Math.floor((rect.width + rect.height) / 2 / 4.1)) / Math.floor((rect.width + rect.height) / 2 / 4.1);
this.drawDash(this.border, p1.x - 0.5 * scale, p1.y, p2.x + 0.5 * scale, p2.y, dashLength, spaceLength); this.drawDash(this.border, p1.x - 0.5 * scale, p1.y, p2.x + 0.5 * scale, p2.y, dashLength, spaceLength);
this.drawDash(this.border, p2.x, p2.y - 0.5 * scale, p3.x, p3.y + 0.5 * scale, dashLength, spaceLength); this.drawDash(this.border, p2.x, p2.y - 0.5 * scale, p3.x, p3.y + 0.5 * scale, dashLength, spaceLength);
this.drawDash(this.border, p3.x + 0.5 * scale, p3.y, p4.x - 0.5 * scale, p4.y, dashLength, spaceLength); this.drawDash(this.border, p3.x + 0.5 * scale, p3.y, p4.x - 0.5 * scale, p4.y, dashLength, spaceLength);
@ -126,36 +126,36 @@ export class AxShape extends Graphics {
this.border.lineTo(p4.x, p4.y); this.border.lineTo(p4.x, p4.y);
this.border.closePath(); this.border.closePath();
// this.border.endFill(); // this.border.endFill();
} }
// 画虚线 // 画虚线
drawDash(target, x1, y1, x2, y2, dashLength = 5, spaceLength = 1) { drawDash(target, x1, y1, x2, y2, dashLength = 5, spaceLength = 1) {
const x = x2 - x1; const x = x2 - x1;
const y = y2 - y1; const y = y2 - y1;
let hyp = Math.sqrt((x) * (x) + (y) * (y)); let hyp = Math.sqrt((x) * (x) + (y) * (y));
const units = hyp / (dashLength + spaceLength); const units = hyp / (dashLength + spaceLength);
const dashSpaceRatio = dashLength / (dashLength + spaceLength); const dashSpaceRatio = dashLength / (dashLength + spaceLength);
const dashX = (x / units) * dashSpaceRatio; const dashX = (x / units) * dashSpaceRatio;
const spaceX = (x / units) - dashX; const spaceX = (x / units) - dashX;
const dashY = (y / units) * dashSpaceRatio; const dashY = (y / units) * dashSpaceRatio;
const spaceY = (y / units) - dashY; const spaceY = (y / units) - dashY;
target.moveTo(x1, y1); target.moveTo(x1, y1);
while (hyp > 0) { while (hyp > 0) {
x1 += dashX; x1 += dashX;
y1 += dashY; y1 += dashY;
hyp -= dashLength; hyp -= dashLength;
if (hyp < 0) { if (hyp < 0) {
x1 = x2; x1 = x2;
y1 = y2; y1 = y2;
}
target.lineTo(x1, y1);
x1 += spaceX;
y1 += spaceY;
target.moveTo(x1, y1);
hyp -= spaceLength;
} }
target.lineTo(x1, y1); target.moveTo(x2, y2);
x1 += spaceX;
y1 += spaceY;
target.moveTo(x1, y1);
hyp -= spaceLength;
}
target.moveTo(x2, y2);
} }
// 计算多边形重心 // 计算多边形重心
public calculatePolygonGravityCenter(points: PIXI.Point[]) { public calculatePolygonGravityCenter(points: PIXI.Point[]) {

Write Preview
Loading…
Cancel
Save