shaojiahao
/
ShangHaiAcquisitionPlatform
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

修正 调整图标大小，位置会发生偏移

master
徐振升 3 years ago
parent
c09587266e
commit
63f585c120
1 changed files with 127 additions and 77 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 204
      src/app/working-area/model/axImageShape.ts

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

@ -93,7 +93,9 @@ export class AxImageShape extends AxShape {
this.up.on('pointerdown', event => {
this.upDrag = true;
this.image.anchor.set(0.5, 1);
this.image.position.set(this.image.position.x, this.image.position.y + (this.image.height / 2));
this.position.set(this.x, this.y + this.image.height * 0.5);
this.assetData.Point = new PIXI.Point(this.x, this.y);
this.drawBorder();
event.stopPropagation();
});
this.up.on('pointermove', event => {
@ -104,6 +106,7 @@ export class AxImageShape extends AxShape {
var dY = Math.abs(pos.y - this.image.y);
this.assetData.Height = Math.abs(dY);
this.refresh();
this.text.y = this.image.y - this.image.height / 2;
AxMessageSystem.send(EVENT_IMAGE_RESIZE, this.assetData);
}
@ -112,14 +115,18 @@ export class AxImageShape extends AxShape {
if (this.upDrag) {
this.upDrag = false;
this.image.anchor.set(0.5);
this.image.position.set(this.image.position.x, this.image.position.y - (this.image.height / 2));
this.position.set(this.position.x, this.position.y - (this.image.height / 2));
this.assetData.Point = new PIXI.Point(this.x, this.y);
this.drawBorder();
}
});
this.up.on('pointerupoutside', event => {
if (this.upDrag) {
this.upDrag = false;
this.image.anchor.set(0.5);
this.image.position.set(this.image.position.x, this.image.position.y - (this.image.height / 2));
this.position.set(this.position.x, this.position.y - (this.image.height / 2));
this.assetData.Point = new PIXI.Point(this.x, this.y);
this.drawBorder();
}
});
this.up.visible = false;
@ -132,7 +139,9 @@ export class AxImageShape extends AxShape {
this.down.on('pointerdown', event => {
this.downDrag = true;
this.image.anchor.set(0.5, 0);
this.image.position.set(this.image.position.x, this.image.position.y - (this.image.height / 2));
this.position.set(this.x, this.y - (this.image.height / 2));
this.assetData.Point = new PIXI.Point(this.x, this.y);
this.drawBorder();
event.stopPropagation();
});
this.down.on('pointermove', event => {
@ -151,14 +160,18 @@ export class AxImageShape extends AxShape {
if (this.downDrag) {
this.downDrag = false;
this.image.anchor.set(0.5);
this.image.position.set(this.image.position.x, this.image.position.y + (this.image.height / 2));
this.position.set(this.x, this.y + (this.image.height / 2));
this.assetData.Point = new PIXI.Point(this.x, this.y);
this.drawBorder();
}
});
this.down.on('pointerupoutside', event => {
if (this.downDrag) {
this.downDrag = false;
this.image.anchor.set(0.5);
this.image.position.set(this.image.position.x, this.image.position.y + (this.image.height / 2));
this.position.set(this.x, this.y + (this.image.height / 2));
this.assetData.Point = new PIXI.Point(this.x, this.y);
this.drawBorder();
}
});
this.down.visible = false;
@ -171,7 +184,9 @@ export class AxImageShape extends AxShape {
this.left.on('pointerdown', event => {
this.leftDrag = true;
this.image.anchor.set(1, 0.5);
this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y);
this.position.set(this.position.x + (this.image.width / 2), this.position.y);
this.assetData.Point = new PIXI.Point(this.x, this.y);
this.drawBorder();
event.stopPropagation();
});
this.left.on('pointermove', event => {
@ -190,14 +205,18 @@ export class AxImageShape extends AxShape {
if (this.leftDrag) {
this.leftDrag = false;
this.image.anchor.set(0.5);
this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y);
this.position.set(this.position.x - (this.image.width / 2), this.position.y);
this.assetData.Point = new PIXI.Point(this.x, this.y);
this.drawBorder();
}
});
this.left.on('pointerupoutside', event => {
if (this.leftDrag) {
this.leftDrag = false;
this.image.anchor.set(0.5);
this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y);
this.position.set(this.position.x - (this.image.width / 2), this.position.y);
this.assetData.Point = new PIXI.Point(this.x, this.y);
this.drawBorder();
}
});
this.left.visible = false;
@ -210,7 +229,9 @@ export class AxImageShape extends AxShape {
this.right.on('pointerdown', event => {
this.rightDrag = true;
this.image.anchor.set(0, 0.5);
this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y);
this.position.set(this.position.x - (this.image.width / 2), this.position.y);
this.assetData.Point = new PIXI.Point(this.x, this.y);
this.drawBorder();
event.stopPropagation();
});
this.right.on('pointermove', event => {
@ -229,14 +250,18 @@ export class AxImageShape extends AxShape {
if (this.rightDrag) {
this.rightDrag = false;
this.image.anchor.set(0.5);
this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y);
this.position.set(this.position.x + (this.image.width / 2), this.position.y);
this.assetData.Point = new PIXI.Point(this.x, this.y);
this.drawBorder();
}
});
this.right.on('pointerupoutside', event => {
if (this.rightDrag) {
this.rightDrag = false;
this.image.anchor.set(0.5);
this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y);
this.position.set(this.position.x + (this.image.width / 2), this.position.y);
this.assetData.Point = new PIXI.Point(this.x, this.y);
this.drawBorder();
}
});
this.right.visible = false;
@ -249,7 +274,9 @@ export class AxImageShape extends AxShape {
this.upLeft.on('pointerdown', event => {
this.upLeftDrag = true;
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));
this.position.set(this.position.x + (this.image.width / 2), this.position.y + (this.image.height / 2));
this.assetData.Point = new PIXI.Point(this.x, this.y);
this.drawBorder();
event.stopPropagation();
});
this.upLeft.on('pointermove', event => {
@ -271,14 +298,18 @@ export class AxImageShape extends AxShape {
if (this.upLeftDrag) {
this.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.position.set(this.position.x - (this.image.width / 2), this.position.y - (this.image.height / 2));
this.assetData.Point = new PIXI.Point(this.x, this.y);
this.drawBorder();
}
});
this.upLeft.on('pointerupoutside', event => {
if (this.upLeftDrag) {
this.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.position.set(this.position.x - (this.image.width / 2), this.position.y - (this.image.height / 2));
this.assetData.Point = new PIXI.Point(this.x, this.y);
this.drawBorder();
}
});
this.upLeft.visible = false;
@ -291,7 +322,9 @@ export class AxImageShape extends AxShape {
this.upRight.on('pointerdown', event => {
this.upRightDrag = true;
this.image.anchor.set(0, 1);
this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y + (this.image.height / 2));
this.position.set(this.position.x - (this.image.width / 2), this.position.y + (this.image.height / 2));
this.assetData.Point = new PIXI.Point(this.x, this.y);
this.drawBorder();
event.stopPropagation();
});
this.upRight.on('pointermove', event => {
@ -313,14 +346,18 @@ export class AxImageShape extends AxShape {
if (this.upRightDrag) {
this.upRightDrag = 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.position.set(this.position.x + (this.image.width / 2), this.position.y - (this.image.height / 2));
this.assetData.Point = new PIXI.Point(this.x, this.y);
this.drawBorder();
}
});
this.upRight.on('pointerupoutside', event => {
if (this.upRightDrag) {
this.upRightDrag = 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.position.set(this.position.x + (this.image.width / 2), this.position.y - (this.image.height / 2));
this.assetData.Point = new PIXI.Point(this.x, this.y);
this.drawBorder();
}
});
this.upRight.visible = false;
@ -333,7 +370,9 @@ export class AxImageShape extends AxShape {
this.downLeft.on('pointerdown', event => {
this.downLeftDrag = true;
this.image.anchor.set(1, 0);
this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y - (this.image.height / 2));
this.position.set(this.position.x + (this.image.width / 2), this.position.y - (this.image.height / 2));
this.assetData.Point = new PIXI.Point(this.x, this.y);
this.drawBorder();
event.stopPropagation();
});
this.downLeft.on('pointermove', event => {
@ -355,14 +394,18 @@ export class AxImageShape extends AxShape {
if (this.downLeftDrag) {
this.downLeftDrag = 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.position.set(this.position.x - (this.image.width / 2), this.position.y + (this.image.height / 2));
this.assetData.Point = new PIXI.Point(this.x, this.y);
this.drawBorder();
}
});
this.downLeft.on('pointerupoutside', event => {
if (this.downLeftDrag) {
this.downLeftDrag = 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.position.set(this.position.x - (this.image.width / 2), this.position.y + (this.image.height / 2));
this.assetData.Point = new PIXI.Point(this.x, this.y);
this.drawBorder();
}
});
this.downLeft.visible = false;
@ -375,7 +418,9 @@ export class AxImageShape extends AxShape {
this.downRight.on('pointerdown', event => {
this.downRightDrag = true;
this.image.anchor.set(0, 0);
this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y - (this.image.height / 2));
this.position.set(this.position.x - (this.image.width / 2), this.position.y - (this.image.height / 2));
this.assetData.Point = new PIXI.Point(this.x, this.y);
this.drawBorder();
event.stopPropagation();
});
this.downRight.on('pointermove', event => {
@ -397,14 +442,18 @@ export class AxImageShape extends AxShape {
if (this.downRightDrag) {
this.downRightDrag = 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.position.set(this.position.x + (this.image.width / 2), this.position.y + (this.image.height / 2));
this.assetData.Point = new PIXI.Point(this.x, this.y);
this.drawBorder();
}
});
this.downRight.on('pointerupoutside', event => {
if (this.downRightDrag) {
this.downRightDrag = 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.position.set(this.position.x + (this.image.width / 2), this.position.y + (this.image.height / 2));
this.assetData.Point = new PIXI.Point(this.x, this.y);
this.drawBorder();
}
});
this.downRight.visible = false;
@ -422,7 +471,8 @@ export class AxImageShape extends AxShape {
* @param value 显示状态
*/
public setPointVisiable(value: boolean) {
const rect = this.getLocalBounds();
const rect1 = this.image.getLocalBounds();
const rect = new Rectangle(rect1.x * this.image.scale.x, rect1.y * this.image.scale.y, rect1.width * this.image.scale.x, rect1.height * this.image.scale.y);
this.up.x = rect.right - rect.width / 2;
this.up.y = rect.top;
this.down.x = rect.right - rect.width / 2;
@ -452,28 +502,28 @@ export class AxImageShape extends AxShape {
*
* @param scale 绘制边框
*/
public drawBorder(scale: number) {
public drawBorder() {
const visible = this.upLeft.visible;
this.setPointVisiable(false);
const scale = this.assetData.FixedSize ? 1 : 1 / this.workingArea.backgroundImage.scale.x;
this.border.clear();
const rect1 = this.image.getLocalBounds();
const rect = new Rectangle(rect1.x * this.image.scale.x, rect1.y * this.image.scale.y, rect1.width * this.image.scale.x, rect1.height * this.image.scale.y);
const p1 = new PIXI.Point(rect.left, rect.top);
const p2 = new PIXI.Point(rect.right, rect.top);
const p3 = new PIXI.Point(rect.right, rect.bottom);
const p4 = new PIXI.Point(rect.left, rect.bottom);
this.border.lineStyle(scale * 1, 0x00a8ff);
const spaceLength = scale * 1;
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);
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, p3.x + 0.5 * scale, p3.y, p4.x - 0.5 * scale, p4.y, dashLength, spaceLength);
this.drawDash(this.border, p4.x, p4.y + 0.5 * scale, p1.x, p1.y - 0.5 * scale, dashLength, spaceLength);
super.drawBorder(scale);
const rect = this.getLocalBounds();
this.up.x = rect.right - rect.width / 2;
this.up.y = rect.top;
this.down.x = rect.right - rect.width / 2;
this.down.y = rect.bottom;
this.left.x = rect.left;
this.left.y = rect.bottom - rect.height / 2;
this.right.x = rect.right;
this.right.y = rect.bottom - rect.height / 2;
this.upLeft.x = rect.left;
this.upLeft.y = rect.top;
this.upRight.x = rect.right;
this.upRight.y = rect.top;
this.downLeft.x = rect.left;
this.downLeft.y = rect.bottom;
this.downRight.x = rect.right;
this.downRight.y = rect.bottom;
this.setPointVisiable(visible);
}
public setItemScale(scale: number) {
@ -501,41 +551,41 @@ export class AxImageShape extends AxShape {
+ this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue;
if (this.image.anchor.x == 0) {
if (this.image.anchor.y == 0) {
this.text.x = this.image.x + this.image.width / 2;
this.text.y = this.image.y;
} else if (this.image.anchor.y == 0.5) {
this.text.x = this.image.x + this.image.width / 2;
this.text.y = this.image.y - this.image.height / 2;
} else if (this.image.anchor.y == 1) {
this.text.x = this.image.x + this.image.width / 2;
this.text.y = this.image.y - this.image.height;
}
// if (this.image.anchor.x == 0) {
// if (this.image.anchor.y == 0) {
// this.text.x = this.image.x + this.image.width / 2;
// this.text.y = this.image.y;
// } else if (this.image.anchor.y == 0.5) {
// this.text.x = this.image.x + this.image.width / 2;
// this.text.y = this.image.y - this.image.height / 2;
// } else if (this.image.anchor.y == 1) {
// this.text.x = this.image.x + this.image.width / 2;
// this.text.y = this.image.y - this.image.height;
// }
} else if (this.image.anchor.x == 0.5) {
if (this.image.anchor.y == 0) {
this.text.x = this.image.x;
this.text.y = this.image.y;
} else if (this.image.anchor.y == 0.5) {
// } else if (this.image.anchor.x == 0.5) {
// if (this.image.anchor.y == 0) {
// this.text.x = this.image.x;
// this.text.y = this.image.y;
// } else if (this.image.anchor.y == 0.5) {
} else if (this.image.anchor.y == 1) {
this.text.x = this.image.x;
this.text.y = this.image.y - this.image.height;
}
} else if (this.image.anchor.x == 1) {
if (this.image.anchor.y == 0) {
this.text.x = this.image.x - this.image.width / 2;
this.text.y = this.image.y;
} else if (this.image.anchor.y == 0.5) {
this.text.x = this.image.x - this.image.width / 2;
this.text.y = this.image.y - this.image.height / 2;
} else if (this.image.anchor.y == 1) {
this.text.x = this.image.x - this.image.width / 2;
this.text.y = this.image.y - this.image.height;
}
}
// } else if (this.image.anchor.y == 1) {
// this.text.x = this.image.x;
// this.text.y = this.image.y - this.image.height;
// }
// } else if (this.image.anchor.x == 1) {
// if (this.image.anchor.y == 0) {
// this.text.x = this.image.x - this.image.width / 2;
// this.text.y = this.image.y;
// } else if (this.image.anchor.y == 0.5) {
// this.text.x = this.image.x - this.image.width / 2;
// this.text.y = this.image.y - this.image.height / 2;
// } else if (this.image.anchor.y == 1) {
// this.text.x = this.image.x - this.image.width / 2;
// this.text.y = this.image.y - this.image.height;
// }
// }
this.angle = -this.workingArea.backgroundImage.angle;
this.drawBorder(1 / this.workingArea.backgroundImage.scale.x);
this.drawBorder();
}
}

Write Preview
Loading…
Cancel
Save