shaojiahao
/
AX.Angular9DataCollection
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

[新增] 多点图标

develop
徐振升 5 years ago
parent
9dab10ee34
commit
5465518dfe
1 changed files with 256 additions and 22 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. 278
      src/app/working-area/working-area.component.ts

278
src/app/working-area/working-area.component.ts
Unescape View File

@ -15,21 +15,21 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit {
content: ElementRef;
// 画布程序
app: PIXI.Application;
public app: PIXI.Application;
// 加载器
loader = PIXI.Loader.shared;
public loader = PIXI.Loader.shared;
// 根目录
backgroundImage: PIXI.Sprite;
public backgroundImage: PIXI.Sprite;
// 单点图标影子
singlePointIconShadow = new PIXI.Sprite();
public singlePointIconShadow = new PIXI.Sprite();
// 线图标影子
lineIconShadow = new PIXI.Graphics();
public lineIconShadow = new PIXI.Graphics();
// 圆形影子
circleShadow = new PIXI.Graphics();
public circleShadow = new PIXI.Graphics();
// 鼠标位置
mousePosition: PIXI.Point;
public mousePosition: PIXI.Point;
/// 绘画模式
paintMode: PaintMode;
public paintMode: PaintMode;
ngOnInit(): void {
@ -136,9 +136,9 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit {
})
.on('mousemove', event => {
if (event.currentTarget.dragging) {
const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent);
event.currentTarget.x = newPosition.x;
event.currentTarget.y = newPosition.y;
const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent);
event.currentTarget.x = newPosition.x;
event.currentTarget.y = newPosition.y;
}
})
.on('rightclick', event => {
@ -152,23 +152,103 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit {
/// <>
private createLineIcon(source: PIXI.Texture, x: number, y: number, points: PIXI.Point[]) {
const container = new PIXI.Container();
container.x = x;
container.y = y;
points.forEach(item => {
const icon = new PIXI.TilingSprite(source, 100, 64);
icon.anchor.set(0, 0.5);
icon.x = item.x;
icon.y = item.y;
container.addChild(icon);
container.name = '多点连线';
// 画点
points.forEach((item, index, array) => {
const iconPoint = new PIXI.Graphics();
iconPoint.lineStyle(0);
iconPoint.beginFill(0xFFFF0B, 1);
iconPoint.drawCircle(item.x, item.y, 15);
iconPoint.drawCircle(0, 0, 15);
iconPoint.x = item.x;
iconPoint.y = item.y;
iconPoint.endFill();
container.addChild(iconPoint);
});
// 画线图标
for (let i = 0, count = points.length - 1; i < count; i++) {
const pointA = points[i];
const pointB = points[i + 1];
const angle = Math.atan2((pointB.y - pointA.y), (pointB.x - pointA.x)) * (180 / Math.PI);
const a = pointB.x - pointA.x;
const b = pointB.y - pointA.y;
const distance = Math.sqrt(a * a + b * b);
const icon = new PIXI.TilingSprite(source, distance, 64);
icon.anchor.set(0, 0.5);
icon.x = pointA.x;
icon.y = pointA.y;
icon.angle = angle;
container.addChild(icon);
}
this.backgroundImage.addChild(container);
// 添加事件
container.children.forEach(item => {
if (item instanceof PIXI.Graphics) {
item.interactive = true;
item.on('mousedown', event => {
event.stopPropagation();
event.currentTarget.data = event.data;
event.currentTarget.alpha = 0.5;
event.currentTarget.dragging = true;
})
.on('mouseup', event => {
event.currentTarget.alpha = 1;
event.currentTarget.dragging = false;
event.currentTarget.data = null;
})
.on('mouseupoutside', event => {
event.currentTarget.alpha = 1;
event.currentTarget.dragging = false;
event.currentTarget.data = null;
})
.on('mousemove', event => {
if (event.currentTarget.dragging) {
const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent);
event.currentTarget.x = newPosition.x;
event.currentTarget.y = newPosition.y;
}
})
.on('rightclick', event => {
});
} else if (item instanceof PIXI.TilingSprite) {
item.interactive = true;
item.on('mousedown', event => {
event.stopPropagation();
event.currentTarget.parent.data = event.data;
event.currentTarget.parent.alpha = 0.5;
event.currentTarget.parent.dragging = true;
event.currentTarget.parent.dragPoint = event.data.getLocalPosition(event.currentTarget.parent.parent);
event.currentTarget.parent.dragPoint.x -= event.currentTarget.parent.x;
event.currentTarget.parent.dragPoint.y -= event.currentTarget.parent.y;
})
.on('mouseup', event => {
event.currentTarget.parent.alpha = 1;
event.currentTarget.parent.dragging = false;
event.currentTarget.parent.data = null;
})
.on('mouseupoutside', event => {
event.currentTarget.parent.alpha = 1;
event.currentTarget.parent.dragging = false;
event.currentTarget.parent.data = null;
})
.on('mousemove', event => {
if (event.currentTarget.parent.dragging) {
const newPosition = event.currentTarget.parent.data.getLocalPosition(event.currentTarget.parent.parent);
event.currentTarget.parent.x = newPosition.x - event.currentTarget.parent.dragPoint.x;
event.currentTarget.parent.y = newPosition.y - event.currentTarget.parent.dragPoint.y;
}
})
.on('rightclick', event => {
});
}
});
}
// 测试创建
private createLineIconTest(texture: PIXI.Texture, points: PIXI.Point[]) {
const icon = new MultipointIcon(texture, points);
this.backgroundImage.addChild(icon);
}
/// <summary>
/// 创建背景图
@ -204,7 +284,9 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit {
break;
case PaintMode.LineIcon:
// tslint:disable-next-line: max-line-length
this.createLineIcon(this.singlePointIconShadow.texture, pos.x, pos.y, [new PIXI.Point(0, 0), new PIXI.Point(100, 0), new PIXI.Point(100, 100)]);
// this.createLineIcon(this.singlePointIconShadow.texture, 0, 0, [new PIXI.Point(0, -100), new PIXI.Point(100, 0), new PIXI.Point(0, 100)]);
// tslint:disable-next-line: max-line-length
this.createLineIconTest(this.singlePointIconShadow.texture, [new PIXI.Point(0, -100), new PIXI.Point(100, 0), new PIXI.Point(0, 100), new PIXI.Point(-100, 0)]);
break;
case PaintMode.PolygonIcon:
break;
@ -341,3 +423,155 @@ enum PaintMode {
PolygonIcon,
PaintEnd,
}
/// 多点图标
class MultipointIcon extends PIXI.Container {
public pointsData: PIXI.Point[];
public pointsGraphics: PIXI.Graphics[] = [];
public iconsTilingSprite: PIXI.TilingSprite[] = [];
/**
* 初始化
*/
constructor(texture: PIXI.Texture, data: PIXI.Point[]) {
super();
this.pointsData = data;
// 画点
this.pointsData.forEach((item, index, array) => {
const iconPoint = new PIXI.Graphics();
iconPoint.lineStyle(0);
iconPoint.beginFill(0xFFFF0B, 1);
iconPoint.drawCircle(0, 0, 50);
iconPoint.x = item.x;
iconPoint.y = item.y;
iconPoint.endFill();
this.pointsGraphics.push(iconPoint);
this.addChild(iconPoint);
});
// 画线图标
for (let i = 0, count = this.pointsData.length - 1; i < count; i++) {
const pointA = this.pointsData[i];
const pointB = this.pointsData[i + 1];
const angle = Math.atan2((pointB.y - pointA.y), (pointB.x - pointA.x)) * (180 / Math.PI);
const a = pointB.x - pointA.x;
const b = pointB.y - pointA.y;
const distance = Math.sqrt(a * a + b * b);
const icon = new PIXI.TilingSprite(texture, distance, 64);
icon.anchor.set(0, 0.5);
icon.x = pointA.x;
icon.y = pointA.y;
icon.angle = angle;
this.iconsTilingSprite.push(icon);
this.addChild(icon);
}
// 添加圆点事件
this.pointsGraphics.forEach((item, index, array) => {
item.interactive = true;
item.on('mousedown', event => {
event.stopPropagation();
event.currentTarget.data = event.data;
event.currentTarget.alpha = 0.5;
event.currentTarget.dragging = true;
})
.on('mouseup', event => {
event.currentTarget.alpha = 1;
event.currentTarget.dragging = false;
event.currentTarget.data = null;
})
.on('mouseupoutside', event => {
event.currentTarget.alpha = 1;
event.currentTarget.dragging = false;
event.currentTarget.data = null;
})
.on('mousemove', event => {
if (event.currentTarget.dragging) {
const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent);
event.currentTarget.x = newPosition.x;
event.currentTarget.y = newPosition.y;
if (index === 0) {// 第一个点
this.iconsTilingSprite[index].x = newPosition.x;
this.iconsTilingSprite[index].y = newPosition.y;
const pointA = array[index];
const pointB = array[index + 1];
const angle = Math.atan2((pointB.y - pointA.y), (pointB.x - pointA.x)) * (180 / Math.PI);
const a = pointB.x - pointA.x;
const b = pointB.y - pointA.y;
const distance = Math.sqrt(a * a + b * b);
this.iconsTilingSprite[index].angle = angle;
this.iconsTilingSprite[index].width = distance;
} else if (index < array.length - 1) {// 不是第一个点，也不是最后一个点
this.iconsTilingSprite[index].x = newPosition.x;
this.iconsTilingSprite[index].y = newPosition.y;
const pointA = array[index]; // 当前点
const pointB = array[index + 1]; // 后一个点
const pointC = array[index - 1]; // 前一个点
const angle = Math.atan2((pointB.y - pointA.y), (pointB.x - pointA.x)) * (180 / Math.PI);
const a = pointB.x - pointA.x;
const b = pointB.y - pointA.y;
const distance = Math.sqrt(a * a + b * b);
this.iconsTilingSprite[index].angle = angle;
this.iconsTilingSprite[index].width = distance;
const angleC = Math.atan2((pointA.y - pointC.y), (pointA.x - pointC.x)) * (180 / Math.PI);
const aC = pointA.x - pointC.x;
const bC = pointA.y - pointC.y;
const distanceC = Math.sqrt(aC * aC + bC * bC);
this.iconsTilingSprite[index - 1].angle = angleC;
this.iconsTilingSprite[index - 1].width = distanceC;
} else if (index === array.length - 1) { // 最后一个点
const pointA = array[index]; // 当前点
const pointC = array[index - 1]; // 前一个点
const angleC = Math.atan2((pointA.y - pointC.y), (pointA.x - pointC.x)) * (180 / Math.PI);
const aC = pointA.x - pointC.x;
const bC = pointA.y - pointC.y;
const distanceC = Math.sqrt(aC * aC + bC * bC);
this.iconsTilingSprite[index - 1].angle = angleC;
this.iconsTilingSprite[index - 1].width = distanceC;
}
}
})
.on('rightclick', event => {
});
});
// 添加选中事件
this.iconsTilingSprite.forEach((item, index, array) => {
item.interactive = true;
item.on('mousedown', event => {
event.stopPropagation();
event.currentTarget.parent.data = event.data;
event.currentTarget.parent.alpha = 0.5;
event.currentTarget.parent.dragging = true;
event.currentTarget.parent.dragPoint = event.data.getLocalPosition(event.currentTarget.parent.parent);
event.currentTarget.parent.dragPoint.x -= event.currentTarget.parent.x;
event.currentTarget.parent.dragPoint.y -= event.currentTarget.parent.y;
})
.on('mouseup', event => {
event.currentTarget.parent.alpha = 1;
event.currentTarget.parent.dragging = false;
event.currentTarget.parent.data = null;
})
.on('mouseupoutside', event => {
event.currentTarget.parent.alpha = 1;
event.currentTarget.parent.dragging = false;
event.currentTarget.parent.data = null;
})
.on('mousemove', event => {
if (event.currentTarget.parent.dragging) {
const newPosition = event.currentTarget.parent.data.getLocalPosition(event.currentTarget.parent.parent);
event.currentTarget.parent.x = newPosition.x - event.currentTarget.parent.dragPoint.x;
event.currentTarget.parent.y = newPosition.y - event.currentTarget.parent.dragPoint.y;
}
})
.on('rightclick', event => {
});
});
//
}
}

Write Preview
Loading…
Cancel
Save