diff --git a/src/app/ui/collection-tools/collection-tools.component.html b/src/app/ui/collection-tools/collection-tools.component.html
index b0a6931..b94e6ec 100644
--- a/src/app/ui/collection-tools/collection-tools.component.html
+++ b/src/app/ui/collection-tools/collection-tools.component.html
@@ -176,46 +176,95 @@
是否高亮
-
+
选中高亮
{{item.PropertyName}}
-
+
-
+
{{item.PropertyName}}
{{imagesArr.length ? imagesArr.length : 0}} / {{item.PropertyValue}}
-
-
添加
-
-
-
-
+
+
+
{{item.PropertyName}}
+
+
+
+
+
+
+
{{item.PropertyName}}
+
+
+
+
+
{{item.PropertyName}}
+
+
+
+
-
-
diff --git a/src/app/ui/collection-tools/collection-tools.component.scss b/src/app/ui/collection-tools/collection-tools.component.scss
index df34111..a3e3f08 100644
--- a/src/app/ui/collection-tools/collection-tools.component.scss
+++ b/src/app/ui/collection-tools/collection-tools.component.scss
@@ -164,6 +164,9 @@
margin:1px 0 3px 8px;
font-size: 14px;
}
+ span{
+ font-size: 15px;
+ }
input{
height: 18px;
}
@@ -186,14 +189,37 @@
.swiper-button-next{
right: 6px;
}
- .swiper-button-next:after{
- font-size: 20px;
- }
+ // .swiper-button-next:after{
+ // font-size: 20px;
+ // }
.swiper-button-prev{
left: 6px;
}
- .swiper-button-prev:after{
- font-size: 20px;
+ // .swiper-button-prev:after{
+ // font-size: 20px;
+ // }
+ .swiper-container{
+ // --swiper-theme-color: #ff6600;/* 设置Swiper风格 */
+ // --swiper-navigation-color: #00ff33;/* 单独设置按钮颜色 */
+ --swiper-navigation-size:20px;/* 设置按钮大小 */
+ }
+ .hoverred:hover{
+ color: rgb(187, 28, 28);
+ }
+ .selectDiv{
+ height: 21px;
+ position: relative;
+ margin-bottom: 5px;
+ select{
+ width: 98px;
+ height: 22px;
+ vertical-align: middle;
+ position: absolute;
+ right: 10px;
+ top: 1px;
+ border: 1px solid rgb(208, 211, 214);
+ border-radius: 2px;
+ }
}
}
}
@@ -209,4 +235,16 @@
div:focus {
outline: none;
+}
+//没有图片时显示无图片背景图
+.noImgCss{
+ background: url(../../../assets/images/noImg.png) no-repeat center center;
+ background-size: 88% 100%;/*按比例缩放*/
+}
+.input{
+ width: 18px;
+ height: 18px;
+ vertical-align: middle;
+ margin-left: 9px;
+ margin-right: 3px;
}
\ No newline at end of file
diff --git a/src/app/ui/collection-tools/collection-tools.component.ts b/src/app/ui/collection-tools/collection-tools.component.ts
index 3472228..5f9418e 100644
--- a/src/app/ui/collection-tools/collection-tools.component.ts
+++ b/src/app/ui/collection-tools/collection-tools.component.ts
@@ -15,7 +15,7 @@ import Swiper from 'swiper';
export class CollectionToolsComponent implements OnInit {
constructor(private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar) { }
-
+ mySwiper
selected = 'option1' //图标大小选择框
basicInfo:boolean = true //基本信息名称显隐
wantToWork:boolean = true //想定作业名称显隐
@@ -66,9 +66,45 @@ export class CollectionToolsComponent implements OnInit {
"RuleName": "",
"RuleValue": "",
"PhysicalUnit": "",
- "PropertyName": "名称/编号",
+ "PropertyName": "单行文本",
"PropertyType": 0,
"PropertyValue": "99999"
+ },{
+ "Tag": "",
+ "Order": 0,
+ "Enabled": true,
+ "Visible": true,
+ "Required": false,
+ "RuleName": "",
+ "RuleValue": "",
+ "PhysicalUnit": "",
+ "PropertyName": "多行文本",
+ "PropertyType": 1,
+ "PropertyValue": "99999"
+ },{
+ "Tag": "",
+ "Order": 0,
+ "Enabled": true,
+ "Visible": true,
+ "Required": false,
+ "RuleName": "",
+ "RuleValue": "",
+ "PhysicalUnit": "",
+ "PropertyName": "数值",
+ "PropertyType": 2,
+ "PropertyValue": "666"
+ }, {
+ "Tag": "",
+ "Order": 0,
+ "Enabled": true,
+ "Visible": true,
+ "Required": false,
+ "RuleName": "",
+ "RuleValue": "",
+ "PhysicalUnit": "张",
+ "PropertyName": "布尔值",
+ "PropertyType": 6,
+ "PropertyValue": "1"
}, {
"Tag": "",
"Order": 0,
@@ -105,6 +141,66 @@ export class CollectionToolsComponent implements OnInit {
"PropertyName": "图片",
"PropertyType": 3,
"PropertyValue": "/api/Objects/PlanPlatform/5e7c0ff1bb3cf106508afaed.png"
+ }, {
+ "Tag": null,
+ "Order": 0,
+ "Enabled": false,
+ "Visible": false,
+ "Required": false,
+ "RuleName": null,
+ "RuleValue": null,
+ "PhysicalUnit": null,
+ "PropertyName": "图片",
+ "PropertyType": 3,
+ "PropertyValue": "/api/Objects/PlanPlatform/5e7abccbefc8471c94ff19ff.png"
+ }, {
+ "Tag": null,
+ "Order": 0,
+ "Enabled": false,
+ "Visible": false,
+ "Required": false,
+ "RuleName": null,
+ "RuleValue": null,
+ "PhysicalUnit": null,
+ "PropertyName": "图片",
+ "PropertyType": 3,
+ "PropertyValue": "/api/Objects/PlanPlatform/5e7d68e5e72823213c55e4cf.png"
+ },{
+ "Tag": null,
+ "Order": 0,
+ "Enabled": false,
+ "Visible": false,
+ "Required": false,
+ "RuleName": null,
+ "RuleValue": null,
+ "PhysicalUnit": null,
+ "PropertyName": "方向",
+ "PropertyType": 5,
+ "PropertyValue": "4"
+ },{
+ "Tag": null,
+ "Order": 0,
+ "Enabled": false,
+ "Visible": false,
+ "Required": false,
+ "RuleName": null,
+ "RuleValue": null,
+ "PhysicalUnit": null,
+ "PropertyName": "供给区域",
+ "PropertyType": 7,
+ "PropertyValue": "4"
+ },{
+ "Tag": null,
+ "Order": 0,
+ "Enabled": false,
+ "Visible": false,
+ "Required": false,
+ "RuleName": null,
+ "RuleValue": null,
+ "PhysicalUnit": null,
+ "PropertyName": "供给类型",
+ "PropertyType": 8,
+ "PropertyValue": "4"
}],
"IsFromBuilding": false,
"InteractiveMode": 0
@@ -115,11 +211,17 @@ export class CollectionToolsComponent implements OnInit {
sliderValue:number = 0//滑竿的值
isHighLight:boolean = false//是否高亮选择框
PropertyInfos = [] //去除图片链接真正用于循环的内容
+ imagesArrNum //素材属性图片数量上限
imagesArr = [] //属性中的图片链接集合
- clickedIndex //点击图片的索引值
+ clickedIndex //点击图片时的索引值
+
//传入素材对象，设置右侧属性栏内容
+ canvasAssetObj //传入的素材属性对象
+ isImgNumCss = false //控制上传文件input显隐
+
setAssetsProperty(obj){
let _this = this
+ this.canvasAssetObj = obj
this.assetName = obj.Name
this.assetWidth = obj.Width
this.assetHeight = obj.Height
@@ -131,14 +233,16 @@ export class CollectionToolsComponent implements OnInit {
}else{
this.PropertyInfos.push(item)
}
+ if(item.PropertyType == 4){
+ this.imagesArrNum = item.PropertyValue
+ }
})
//如果存在图片则加载轮播图
if(this.imagesArr.length){
-
setTimeout(() => {
- var mySwiper = new Swiper('.swiper-container',{
+ this.mySwiper = new Swiper('.swiper-container',{
loop: false,
- grabCursor: true,
+ // grabCursor: true,
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
@@ -149,12 +253,15 @@ export class CollectionToolsComponent implements OnInit {
_this.clickedIndex = this.clickedIndex
},
}
-
- });
+ });
}, 0);
-
}
-
+ //判断此时图片数量是否达到上限
+ if(this.imagesArr.length < this.imagesArrNum){//如果不超出
+ this.isImgNumCss = true
+ }else{
+ this.isImgNumCss = false
+ }
}
//素材宽度输入框改变
@@ -173,22 +280,159 @@ export class CollectionToolsComponent implements OnInit {
assetHighLightIunput(){
}
+ //动态属性素材input框值改变
+ assetInputChange(i,e){
+ let index = this.canvasAssetObj.PropertyInfos.findIndex((item)=>{
+ return i.PropertyName == item.PropertyName
+ })
+ this.canvasAssetObj.PropertyInfos[index].PropertyValue = e.target.value
+ }
+ //动态属性素材布尔值框改变radio
+ assetRadioChange(i,boolean){
+ let index = this.canvasAssetObj.PropertyInfos.findIndex((item)=>{
+ return i.PropertyName == item.PropertyName
+ })
+ this.canvasAssetObj.PropertyInfos[index].PropertyValue = boolean
+ }
+
//查看图片详情
lookImg(){
const dialogRef = this.dialog.open(ViewDetails, {//调用open方法打开对话框并且携带参数过去
data: {imagesArr:this.imagesArr,index:this.clickedIndex}
});
+ dialogRef.afterClosed().subscribe(data=>{
+
+ });
+ }
+
+ //上传素材图片
+ selectFile(e){
+ let imgFile = e.target.files[0] || null //上传的文件
+ this.startUploading(imgFile)
+ }
+ objectName:any //上传对象名
+ startUploading (imgFile) {
+ let _this = this
+ let file = imgFile || null //获取上传的文件
+ let fileSize = file.size || null //上传文件的总大小
+ let shardSize = 5 * 1024 * 1024 //5MB一个分片
+ let companyId = sessionStorage.getItem("companyId")
+ if (file && fileSize <= shardSize) { //上传文件<=5MB时
+ let formData = new FormData()
+ formData.append("file",file)
+ this.http.post(`api/Objects/WebPlan2D/${companyId}`,formData).subscribe((data:any)=>{
+ this.objectName = data.objectName
+ const config = new MatSnackBarConfig();
+ config.verticalPosition = 'top';
+ config.duration = 3000
+ this.snackBar.open('上传成功','确定',config)
+
+ //在原始素材对象和需要循环图片的对象中分别push最新上传的图片
+ let imgObj = {
+ "Tag": null,
+ "Order": 0,
+ "Enabled": false,
+ "Visible": false,
+ "Required": false,
+ "RuleName": null,
+ "RuleValue": null,
+ "PhysicalUnit": null,
+ "PropertyName": "图片",
+ "PropertyType": 3,
+ "PropertyValue": "/api/Objects/WebPlan2D/" + this.objectName
+ }
+ this.imagesArr.push(imgObj)
+ this.canvasAssetObj.PropertyInfos.push(imgObj)
+ setTimeout(() => {
+ this.mySwiper.update();
+ this.mySwiper.slideTo(this.imagesArr.length - 1)
+ }, 0);
+
+ //判断上传素材属性图片是否超出数量 超出数量则隐藏input框
+ if(this.imagesArr.length < this.imagesArrNum){//不超出input才会显示
+ this.isImgNumCss = true
+ }else{
+ this.isImgNumCss = false
+ }
+ //此处需要把 this.canvasAssetObj这个传入对象 返回给canvas ↓↓↓↓↓↓↓↓↓↓
+
+
+ })
+ } else if (file && fileSize>shardSize) { //上传文件>5MB时,分块上传
+ let config = new MatSnackBarConfig();
+ config.verticalPosition = 'top';
+ config.duration = 3000
+ this.snackBar.open('上传图片文件不允许大于5mb','确定',config);
+ }
+
+ }
+
+ //不能上传图片提示
+ imgNumBeyond(){
+ const config = new MatSnackBarConfig();
+ config.verticalPosition = 'top';
+ config.duration = 3000
+ this.snackBar.open('图片数量已达上限','确定',config);
}
+ //删除素材属性图片
+ deleteImg(){
+ if(this.imagesArr.length == 0){
+ const config = new MatSnackBarConfig();
+ config.verticalPosition = 'top';
+ config.duration = 3000
+ this.snackBar.open('没有可删除的图片，请先上传','确定',config)
+ }else{
+ //在素材原始对象中将删除的图片去掉
+ this.canvasAssetObj.PropertyInfos = [...this.canvasAssetObj.PropertyInfos.filter((item)=>{
+ return item.PropertyValue != this.imagesArr[this.mySwiper.activeIndex].PropertyValue
+ })]
+ //在图片循环数组中将图片去掉
+ this.imagesArr.splice(this.mySwiper.activeIndex, 1);
+ //更新swiper视图
+ setTimeout(() => {
+ this.mySwiper.update();
+ }, 0);
+ //此处需要把 this.canvasAssetObj这个传入对象 返回给canvas ↓↓↓↓↓↓↓↓↓↓
+
+
+ }
+ }
+ //动态属性方向select选择框
+ direction(i,e){
+ let index = this.canvasAssetObj.PropertyInfos.findIndex((item)=>{
+ return i.PropertyName == item.PropertyName
+ })
+ this.canvasAssetObj.PropertyInfos[index].PropertyValue = e.target.value
+ }
+ //动态属性供给区域select选择框
+ supplyArea(i,e){
+ let index = this.canvasAssetObj.PropertyInfos.findIndex((item)=>{
+ return i.PropertyName == item.PropertyName
+ })
+ this.canvasAssetObj.PropertyInfos[index].PropertyValue = e.target.value
+ }
+ //动态属性供给类型select选择框
+ supplyType(i,e){
+ let index = this.canvasAssetObj.PropertyInfos.findIndex((item)=>{
+ return i.PropertyName == item.PropertyName
+ })
+ this.canvasAssetObj.PropertyInfos[index].PropertyValue = e.target.value
+ }
ngOnInit(): void {
this.getAllLibrary()
this.getSitePlan()
this.getAllBuildings()
this.setAssetsProperty(this.proObject) //测试
-
+ function xxx(args) {
+ console.log(args)
+ }
+ xxx({
+ name:"xxxx"
+ })
}
//点击基本信息名称
@@ -754,7 +998,6 @@ export class EditBuilding {
}
//查看图片大图
-//查看图片大图和视频
@Component({
selector: 'viewdetails',
templateUrl: './viewdetails.html',
@@ -773,7 +1016,6 @@ export class ViewDetails {
setTimeout(() => {
var mySwiper = new Swiper('.swiper-container',{
loop: false,
- grabCursor: true,
initialSlide :this.data.index,//默认索引
// 如果需要前进后退按钮
navigation: {
diff --git a/src/app/working-area/working-area.component.ts b/src/app/working-area/working-area.component.ts
index cc9e81f..a38df0b 100644
--- a/src/app/working-area/working-area.component.ts
+++ b/src/app/working-area/working-area.component.ts
@@ -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 {
@@ -104,9 +104,15 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit {
// this.lineIconShadow.lineTo(100, 100);
});
}
- ///
- /// 创建单点图标
- ///
+ /**
+ * 创建单点图标
+ * @param source
+ * @param x
+ * @param y
+ * @param width
+ * @param height
+ * @param alpha
+ */
private createSinglePointIcon(source: PIXI.Texture, x: number, y: number, width: number, height: number, alpha: number): PIXI.Sprite {
const singlePointIcon = new PIXI.Sprite(source);
singlePointIcon.x = x;
@@ -136,9 +142,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,27 +158,111 @@ 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 => {
+ });
+ }
+ });
}
- ///
- /// 创建背景图
- ///
+ /**
+ * 测试创建
+ * @param texture 测试创建
+ * @param points 点集合
+ */
+ private createLineIconTest(texture: PIXI.Texture, points: PIXI.Point[]) {
+ const icon = new MultipointIcon(texture, points);
+ this.backgroundImage.addChild(icon);
+ }
+ /**
+ * 创建背景图
+ */
private createBackgroundImage(): void {
this.backgroundImage = PIXI.Sprite.from('assets/images/noImg.png');
this.backgroundImage.anchor.set(0.5);
@@ -204,7 +294,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;
@@ -242,17 +334,26 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit {
});
this.app.stage.addChild(this.backgroundImage);
}
- ///
- /// 替换背景图
- /// 参数{source：string} 可以是一个url地址,也可以是本地assets下的一个图片路径
- ///
- public changeBackgroundImage(source: string): void {
- this.backgroundImage.texture = PIXI.Texture.from(source);
+ /**
+ * 替换背景图
+ * @param imageUri 可以是一个url地址,也可以是本地assets下的一个图片路径
+ * @param imageAngle 图片旋转角度
+ */
+ public changeBackgroundImage(imageUri: string, imageAngle: number): void {
+ this.backgroundImage.texture = PIXI.Texture.from(imageUri);
+ this.backgroundImage.angle = imageAngle;
this.backgroundImage.visible = true;
}
- ///
- /// 创建单点图标影子
- ///
+ /**
+ * 设置背景图角度
+ * @param imageAngle 角度值
+ */
+ public setBackgroundAngle(imageAngle: number) {
+ this.backgroundImage.angle = imageAngle;
+ }
+ /**
+ * 创建单点图标影子
+ */
private createSinglePointIconShadow(): void {
this.singlePointIconShadow = PIXI.Sprite.from('assets/images/noImg.png');
this.singlePointIconShadow.width = 32;
@@ -262,43 +363,50 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit {
this.singlePointIconShadow.visible = false;
this.app.stage.addChild(this.singlePointIconShadow);
}
- ///
- /// 改变单点图标影子
- ///
- private changeSinglePointIconShadow(source: string): void {
- this.singlePointIconShadow.texture = PIXI.Texture.from(source);
+ /**
+ * 改变单点图标影子
+ * @param uri 图片地址
+ */
+ private changeSinglePointIconShadow(uri: string): void {
+ this.singlePointIconShadow.texture = PIXI.Texture.from(uri);
this.singlePointIconShadow.visible = true;
}
- /// <>
- /// 创建线图标影子
- /// <>
+ /**
+ * 创建线图标影子
+ */
private createLineIconShadow() {
this.app.stage.addChild(this.lineIconShadow);
}
- ///
- /// 开始绘画单点图标
- ///
- public beginPaintSinglePointIcon(source: string): void {
+ /**
+ * 开始绘画单点图标
+ * @param imageUri 图片路径
+ */
+ public beginPaintSinglePointIcon(imageUri: string): void {
this.cancelPaint();
this.paintMode = PaintMode.SinglePointIcon;
- this.changeSinglePointIconShadow(source);
+ this.changeSinglePointIconShadow(imageUri);
}
- // 开始绘画多边形
- public beginPaintPolygonIcon(source: string): void {
+ /**
+ * 开始绘画多边形
+ */
+ public beginPaintPolygonIcon(): void {
this.cancelPaint();
this.paintMode = PaintMode.PolygonIcon;
}
- // 开始绘画线
- public beginPaintLineIcon(source: string): void {
+ /**
+ * 开始绘制多点图标
+ * @param imageUri 图片路径
+ */
+ public beginPaintLineIcon(imageUri: string): void {
this.cancelPaint();
this.paintMode = PaintMode.LineIcon;
- this.changeSinglePointIconShadow(source);
+ this.changeSinglePointIconShadow(imageUri);
// this.lineIconShadow.lineStyle(1, 0xffd900, 1);
}
- ///
- /// 取消绘画
- ///
+ /**
+ * 取消绘画
+ */
private cancelPaint(): void {
switch (this.paintMode) {
case PaintMode.PaintEnd:
@@ -316,24 +424,25 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit {
break;
}
}
- ///
- /// 画圆
- ///
+ /**
+ * 画圆
+ * @param x 半径
+ */
paintShadowCircle(x: number): void {
this.circleShadow.beginFill(0xFFCC5A);
this.circleShadow.drawCircle(0, 0, x);
this.app.stage.addChild(this.circleShadow);
}
- ///
- /// 取消画圆
- ///
+ /**
+ * 取消画圆
+ */
cancelPaintShadowCircle(): void {
this.app.stage.removeChild(this.circleShadow);
}
}
-///
-/// 绘制模式
-///
+/**
+ * 绘制模式
+ */
enum PaintMode {
SinglePointIcon,
LineIcon,
@@ -341,3 +450,218 @@ enum PaintMode {
PolygonIcon,
PaintEnd,
}
+
+/**
+ * 多点连线
+ */
+class MultipointIcon extends PIXI.Container {
+ public pointsData: PIXI.Point[];
+ public pointsGraphics: PIXI.Graphics[] = [];
+ public iconsTilingSprite: PIXI.TilingSprite[] = [];
+ /**
+ *
+ * @param texture 图片素材
+ * @param points 点集合
+ */
+ constructor(texture: PIXI.Texture, points: PIXI.Point[]) {
+ super();
+ this.pointsData = points;
+ // 画线图标
+ 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.pointsData.forEach((item, index, array) => {
+ const iconPoint = new PIXI.Graphics();
+ iconPoint.lineStyle(0);
+ iconPoint.beginFill(0xFFFF0B, 1);
+ iconPoint.drawCircle(0, 0, 15);
+ iconPoint.x = item.x;
+ iconPoint.y = item.y;
+ iconPoint.endFill();
+ iconPoint.visible = false;
+ this.pointsGraphics.push(iconPoint);
+ this.addChild(iconPoint);
+ });
+ // 添加圆点事件
+ 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;
+
+ this.setPointVisiable(true);
+ })
+ .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 => {
+ });
+ });
+ }
+ /**
+ * 设置点显示状态
+ * @param value 显示状态
+ */
+ public setPointVisiable(value: boolean) {
+ this.pointsGraphics.forEach((item) => {
+ item.visible = value;
+ });
+ }
+}
+
+interface IEventData {
+ // 事件唯一ID
+ uuid: number;
+ callback: (data: any) => void;
+}
+
+/**
+ * 简单消息分发
+ */
+export default class Event {
+
+ public static eventUuid = 0;
+
+ public static eventList: { [eventName: string]: IEventData[] } = {};
+
+ public static register(eventName: string, callback: (data: any) => void): number {
+ this.eventUuid = this.eventUuid + 1;
+
+ if (this.eventList[eventName] === undefined) {
+ this.eventList[eventName] = [];
+ }
+ this.eventList[eventName][this.eventUuid] = { uuid: this.eventUuid, callback };
+
+ return this.eventUuid;
+ }
+
+ public static unregister(eventName: string, tag: number) {
+ if (tag == null) {
+ this.eventList[eventName] = undefined;
+ } else {
+ if (this.eventList[eventName] !== undefined && this.eventList[eventName][tag] !== undefined) {
+ this.eventList[eventName][tag] = undefined;
+ }
+ }
+ }
+
+ public static dispatch(eventName: string, data: any) {
+ const eventList: IEventData[] = this.eventList[eventName];
+ if (eventList !== undefined) {
+ for (const key in eventList) {
+ if (eventList[key].callback !== undefined) {
+ eventList[key].callback(data);
+ }
+ }
+ }
+ }
+}