Commit 6a68a275 authored by liujiangnan's avatar liujiangnan

feat

parent 92a9e726
...@@ -1957,9 +1957,6 @@ export class HotZoneItem extends MySprite { ...@@ -1957,9 +1957,6 @@ export class HotZoneItem extends MySprite {
audio_url; audio_url;
pic_url; pic_url;
text; text;
text_cn;
time_start;
time_end;
gIdx; gIdx;
private _itemType; private _itemType;
......
...@@ -22,30 +22,93 @@ ...@@ -22,30 +22,93 @@
<div nz-col nzSpan="5" nzOffset="1" class="img-box" <div nz-col nzSpan="5" nzOffset="1" class="img-box"
*ngFor="let it of hotZoneArr; let i = index"> *ngFor="let it of hotZoneArr; let i = index">
<div style="margin: auto; padding: 5px; margin-top: 30px; width:90%; border: 2px dashed #ddd; border-radius: 10px; position: relative;"> <div
<button style="position: absolute; right: -5px; top: -5px; z-index: 100;" nz-button nzType="danger" nzSize="small" (click)="deleteBtnClick(i)"> style="margin: auto; padding: 5px; margin-top: 30px; width:90%; border: 2px dashed #ddd; border-radius: 10px">
<span style="margin-left: 40%;"> item-{{i + 1}}
</span>
<button style="float: right;" nz-button nzType="danger" nzSize="small" (click)="deleteBtnClick(i)">
X X
</button> </button>
<app-upload-image-with-preview <nz-divider style="margin-top: 10px;"></nz-divider>
[picUrl]="it?.pic_url"
(imageUploaded)="onItemImgUploadSuccess($event, it)"> <div style="margin-top: -20px; margin-bottom: 5px; width: 100%;">
</app-upload-image-with-preview>
<div *ngIf="customTypeGroupArr">
<nz-radio-group [ngModel]="it.gIdx" (ngModelChange)="customRadioChange($event, it)" style="display: flex; align-items: center; justify-content: center; flex-wrap: wrap;">
<div *ngFor="let group of customTypeGroupArr; let gIdx = index" style="display: flex; ">
<label nz-radio nzValue="{{gIdx}}">{{group.name}}</label>
</div>
</nz-radio-group>
</div>
<div *ngIf="!customTypeGroupArr">
<nz-radio-group [ngModel]="it.itemType" (ngModelChange)="radioChange($event, it)" style="display: flex; align-items: center; justify-content: center">
<label *ngIf="isHasRect" nz-radio nzValue="rect">矩形</label>
<label *ngIf="isHasPic" nz-radio nzValue="pic">图片</label>
<label *ngIf="isHasText" nz-radio nzValue="text">文本</label>
</nz-radio-group>
</div>
<div style="margin-top: 5px">
<input type="text" nz-input [(ngModel)]="it.text" (blur)="saveText(it)" placeholder="英文">
</div> </div>
<div style="margin-top: 5px">
<input type="text" nz-input [(ngModel)]="it.text_cn" (blur)="saveText(it)" placeholder="中文"> <div *ngIf="customTypeGroupArr && customTypeGroupArr[it.gIdx]">
<div *ngIf="customTypeGroupArr[it.gIdx].pic">
<app-upload-image-with-preview
[picUrl]="it?.pic_url"
(imageUploaded)="onItemImgUploadSuccess($event, it)">
</app-upload-image-with-preview>
</div>
<div *ngIf="customTypeGroupArr[it.gIdx].text" style="margin-top: 5px">
<input type="text" nz-input [(ngModel)]="it.text" (blur)="saveText(it)">
</div>
<div *ngIf="customTypeGroupArr[it.gIdx].anima" align="center" style="margin-top: 5px">
<button nz-button (click)="setAnimaBtnClick(i)" >
<i nz-icon nzType="tool" nzTheme="outline"></i>
配置龙骨动画
</button>
</div>
<div *ngIf="customTypeGroupArr[it.gIdx].audio" style="display: flex;align-items: center; margin-top: 5px">
<app-audio-recorder
style="margin: auto"
[audioUrl]="it.audio_url"
(audioUploaded)="onItemAudioUploadSuccess($event, it)"
></app-audio-recorder>
</div>
</div> </div>
<div style="margin-top: 5px">
<input type="text" nz-input style="width: 100px;" [(ngModel)]="it.time_start" (blur)="saveText(it)" placeholder="开始时间"> <div *ngIf="!customTypeGroupArr">
-
<input type="text" nz-input style="width: 100px;" [(ngModel)]="it.time_end" (blur)="saveText(it)" placeholder="结束时间"> <app-upload-image-with-preview
[picUrl]="it?.pic_url"
(imageUploaded)="onItemImgUploadSuccess($event, it)">
</app-upload-image-with-preview>
<input type="text" nz-input [(ngModel)]="it.text" (blur)="saveText(it)">
<div *ngIf="isHasAudio"
style="width: 100%; margin-top: 5px; display: flex; align-items: center; justify-items: center;">
<app-audio-recorder
style="margin: auto"
[audioUrl]="it.audio_url"
(audioUploaded)="onItemAudioUploadSuccess($event, it)"
></app-audio-recorder>
</div>
</div> </div>
</div> </div>
</div> </div>
<div nz-col nzSpan="5" nzOffset="1"> <div nz-col nzSpan="5" nzOffset="1">
<div class="bg-box"> <div class="bg-box">
<button nz-button nzType="dashed" (click)="addBtnClick()" <button nz-button nzType="dashed" (click)="addBtnClick()"
class="add-btn"> class="add-btn">
...@@ -81,7 +144,64 @@ ...@@ -81,7 +144,64 @@
<button style="margin-left: 5px;" nz-button [disabled]="pasteData==''" nzType="primary" (click)="importData()">导入</button> <button style="margin-left: 5px;" nz-button [disabled]="pasteData==''" nzType="primary" (click)="importData()">导入</button>
</div> </div>
<!--<button style="margin-left: 20px; margin-top: -5px" nz-button (click)="pasteHotZoneData()" > 粘贴数据 </button>-->
</div> </div>
</div> </div>
</div> </div>
<label style="opacity: 0; position: absolute; top: 0px; font-family: 'BRLNSR_1'">1</label> <label style="opacity: 0; position: absolute; top: 0px; font-family: 'BRLNSR_1'">1</label>
<!--龙骨面板-->
<nz-modal [(nzVisible)]="animaPanelVisible" nzTitle="配置资源文件" (nzOnCancel)="animaPanelCancel()" (nzOnOk)="animaPanelOk()" nzOkText="保存">
<div class="anima-upload-btn">
<span style="margin-right: 10px">上传 ske_json 文件: </span>
<nz-upload [nzShowUploadList]="false"
nzAccept="application/json"
[nzAction]="uploadUrl"
[nzData]="uploadData"
(nzChange)="skeJsonHandleChange($event)">
<button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button>
</nz-upload>
<i *ngIf="isSkeJsonLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i>
<span *ngIf="skeJsonData['name']" style="margin-left: 10px"><u> {{skeJsonData['name']}} </u></span>
</div>
<div class="anima-upload-btn">
<span style="margin-right: 10px">上传 tex_json 文件: </span>
<nz-upload [nzShowUploadList]="false"
nzAccept="application/json"
[nzAction]="uploadUrl"
[nzData]="uploadData"
(nzChange)="texJsonHandleChange($event)">
<button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button>
</nz-upload>
<i *ngIf="isTexJsonLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i>
<span *ngIf="texJsonData['name']" style="margin-left: 10px"><u> {{texJsonData['name']}} </u></span>
</div>
<div class="anima-upload-btn">
<span style="margin-right: 10px">上传 tex_png 文件: </span>
<nz-upload [nzShowUploadList]="false"
nzAccept = "image/*"
[nzAction]="uploadUrl"
[nzData]="uploadData"
(nzChange)="texPngHandleChange($event)">
<button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button>
</nz-upload>
<i *ngIf="isTexPngLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i>
<span *ngIf="texPngData['name']" style="margin-left: 10px"><u> {{texPngData['name']}} </u></span>
</div>
</nz-modal>
...@@ -252,7 +252,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -252,7 +252,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.hotZoneArr[i].index = i; this.hotZoneArr[i].index = i;
if (this.hotZoneArr[i]) { if (this.hotZoneArr[i]) {
// this.hotZoneArr[i].title = 'item-' + (i + 1); this.hotZoneArr[i].title = 'item-' + (i + 1);
} }
} }
...@@ -507,24 +507,32 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -507,24 +507,32 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} }
initHotZoneArr() { initHotZoneArr() {
// console.log('this.hotZoneArr: ', this.hotZoneArr);
let curBgRect; let curBgRect;
if (this.bg) { if (this.bg) {
curBgRect = this.bg.getBoundingBox(); curBgRect = this.bg.getBoundingBox();
} else { } else {
curBgRect = {x: 0, y: 0, width: this.canvasWidth, height: this.canvasHeight}; curBgRect = {x: 0, y: 0, width: this.canvasWidth, height: this.canvasHeight};
} }
let oldBgRect = this.bgItem.rect; let oldBgRect = this.bgItem.rect;
if (!oldBgRect) { if (!oldBgRect) {
oldBgRect = curBgRect; oldBgRect = curBgRect;
} }
const rate = curBgRect.width / oldBgRect.width; const rate = curBgRect.width / oldBgRect.width;
console.log('rate: ', rate);
this.hotZoneArr = []; this.hotZoneArr = [];
const arr = this.hotZoneItemArr.concat(); const arr = this.hotZoneItemArr.concat();
console.log('this.hotZoneItemArr: ', this.hotZoneItemArr);
for (let i = 0; i < arr.length; i++) { for (let i = 0; i < arr.length; i++) {
const data = JSON.parse(JSON.stringify(arr[i])); const data = JSON.parse(JSON.stringify(arr[i]));
// const img = {pic_url: data.pic_url};
data.rect.x *= rate; data.rect.x *= rate;
data.rect.y *= rate; data.rect.y *= rate;
data.rect.width *= rate; data.rect.width *= rate;
...@@ -533,20 +541,32 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -533,20 +541,32 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
data.rect.x += curBgRect.x; data.rect.x += curBgRect.x;
data.rect.y += curBgRect.y; data.rect.y += curBgRect.y;
// img['picItem'] = this.getPicItem(img, data);
// img['audio_url'] = arr[i].audio_url;
// this.imgArr.push(img);
const item = this.getHotZoneItem(data); const item = this.getHotZoneItem(data);
item.audio_url = data.audio_url; item.audio_url = data.audio_url;
item.pic_url = data.pic_url; item.pic_url = data.pic_url;
item.text = data.text; item.text = data.text;
item.text_cn = data.text_cn;
item.time_start = data.time_start;
item.time_end = data.time_end;
item.itemType = data.itemType; item.itemType = data.itemType;
this.refreshCustomItem(item); if (this.customTypeGroupArr) {
this.refreshCustomItem(item);
} else {
this.refreshItem(item);
}
console.log('item: ', item);
this.hotZoneArr.push(item); this.hotZoneArr.push(item);
} }
// this.refreshHotZoneId();
this.refreshHotZoneId();
// this.refreshImageId();
} }
...@@ -931,9 +951,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -931,9 +951,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
index: hotZoneArr[i].index, index: hotZoneArr[i].index,
pic_url: hotZoneArr[i].pic_url, pic_url: hotZoneArr[i].pic_url,
text: hotZoneArr[i].text, text: hotZoneArr[i].text,
text_cn: hotZoneArr[i].text_cn,
time_start: hotZoneArr[i].time_start,
time_end: hotZoneArr[i].time_end,
audio_url: hotZoneArr[i].audio_url, audio_url: hotZoneArr[i].audio_url,
itemType: hotZoneArr[i].itemType, itemType: hotZoneArr[i].itemType,
fontScale: hotZoneArr[i].textLabel ? hotZoneArr[i].textLabel.scaleX : 1, fontScale: hotZoneArr[i].textLabel ? hotZoneArr[i].textLabel.scaleX : 1,
...@@ -974,9 +991,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -974,9 +991,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
saveText(item) { saveText(item) {
item.textLabel.text = item.text; item.textLabel.text = item.text;
item.textLabel.text_cn = item.text_cn;
item.textLabel.time_start = item.time_start;
item.textLabel.time_end = item.time_end;
} }
setAnimaBtnClick(index) { setAnimaBtnClick(index) {
...@@ -1234,12 +1248,11 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -1234,12 +1248,11 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
private loadHotZonePic(pic: HotZoneImg, url, scale = null) { private loadHotZonePic(pic: HotZoneImg, url, scale = null) {
const baseLen = this.hotZoneImgSize * this.mapScale; const baseLen = this.hotZoneImgSize * this.mapScale;
pic.load(url).then(() => { pic.load(url).then(() => {
if (!scale) { if (!scale) {
scale = getMinScale(pic, baseLen); scale = getMinScale(pic, baseLen);
} }
pic.visible = true;
// pic.label.visible = true;
pic.setScaleXY(scale); pic.setScaleXY(scale);
}); });
} }
......
...@@ -8,7 +8,6 @@ ...@@ -8,7 +8,6 @@
[hotZoneItemArr]="hotZoneItemArr" [hotZoneItemArr]="hotZoneItemArr"
[hotZoneFontObj]="null" [hotZoneFontObj]="null"
[customTypeGroupArr]="customTypeGroupArr"
(save)="saveHotZone($event)" (save)="saveHotZone($event)"
> >
......
...@@ -16,16 +16,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -16,16 +16,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
hotZoneItemArr = []; hotZoneItemArr = [];
animaArr = []; animaArr = [];
picArr; picArr;
customTypeGroupArr = [
{
name: '基础资源',
rect: true,
anima: false,
pic: true,
text: true,
audio: true,
}
]
constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDetectorRef, private message: NzMessageService) { constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDetectorRef, private message: NzMessageService) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment