Commit 3d6d7515 authored by liujiangnan's avatar liujiangnan

feat: 热区功能完成

parent 6a68a275
......@@ -1957,6 +1957,9 @@ export class HotZoneItem extends MySprite {
audio_url;
pic_url;
text;
text_cn;
start_time;
end_time;
gIdx;
private _itemType;
......
......@@ -12,96 +12,38 @@
<h5> add background: </h5>
<div class="bg-box">
<app-upload-image-with-preview
[picUrl]="bgItem?.url"
(imageUploaded)="onBackgroundUploadSuccess($event)">
<app-upload-image-with-preview [picUrl]="bgItem?.url" (imageUploaded)="onBackgroundUploadSuccess($event)">
</app-upload-image-with-preview>
</div>
</div>
<div nz-col nzSpan="5" nzOffset="1" class="img-box"
*ngFor="let it of hotZoneArr; let i = index">
<div nz-col nzSpan="5" nzOffset="1" class="img-box" *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">
<span style="margin-left: 40%;"> item-{{i + 1}}
</span>
<button style="float: right;" nz-button nzType="danger" nzSize="small" (click)="deleteBtnClick(i)">
<div style="margin: auto; padding: 5px; margin-top: 30px; width:90%; border: 2px dashed #ddd; border-radius: 10px; position: relative;">
<button style="position: absolute; right: -15px; top: -15px; z-index: 100;" nz-button nzType="danger" nzSize="small"
(click)="deleteBtnClick(i)">
X
</button>
<nz-divider style="margin-top: 10px;"></nz-divider>
<div style="margin-top: -20px; margin-bottom: 5px; width: 100%;">
<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>
<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 [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 style="margin-top: 5px">
<input type="text" nz-input [(ngModel)]="it.text" (blur)="saveText(it)" placeholder="英文">
</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 style="margin-top: 5px">
<input type="text" nz-input [(ngModel)]="it.text_cn" (blur)="saveText(it)" placeholder="中文">
</div>
<div style="margin-top: 5px">
<input type="text" style="width: 100px;" nz-input [(ngModel)]="it.start_time" (blur)="saveText(it)" placeholder="开始时间">
-
<input type="text" style="width: 100px;" nz-input [(ngModel)]="it.end_time" (blur)="saveText(it)" placeholder="结束时间">
</div>
<div *ngIf="!customTypeGroupArr">
<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>
<app-audio-recorder style="margin: auto" [audioUrl]="it.audio_url"
(audioUploaded)="onItemAudioUploadSuccess($event, it)"></app-audio-recorder>
</div>
</div>
</div>
......@@ -110,8 +52,7 @@
<div nz-col nzSpan="5" nzOffset="1">
<div class="bg-box">
<button nz-button nzType="dashed" (click)="addBtnClick()"
class="add-btn">
<button nz-button nzType="dashed" (click)="addBtnClick()" class="add-btn">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
<!--Add Image-->
Add hot zone
......@@ -127,21 +68,22 @@
<div class="save-box">
<button style="margin-left: 200px" class="save-btn" nz-button nzType="primary" [nzSize]="'large'" nzShape="round"
(click)="saveClick()" >
(click)="saveClick()">
<i nz-icon nzType="save"></i>
Save
</button>
<div style="height: 40px; display: flex; justify-items: center;" >
<div style="height: 40px; display: flex; justify-items: center;">
<label style="margin-left: 40px" nz-checkbox [(ngModel)]="bgItem.isShowDebugLine">显示辅助框</label>
<button style="margin-left: 20px; margin-top: -5px" nz-button (click)="copyHotZoneData()"> 复制基础数据 </button>
<div style="margin-left: 10px; margin-top: -5px" >
<div style="margin-left: 10px; margin-top: -5px">
<span>粘贴数据: </span>
<input style="width: 100px;" type="text" nz-input [(ngModel)]="pasteData" >
<button style="margin-left: 5px;" nz-button [disabled]="pasteData==''" nzType="primary" (click)="importData()">导入</button>
<input style="width: 100px;" type="text" nz-input [(ngModel)]="pasteData">
<button style="margin-left: 5px;" nz-button [disabled]="pasteData==''" nzType="primary"
(click)="importData()">导入</button>
</div>
<!--<button style="margin-left: 20px; margin-top: -5px" nz-button (click)="pasteHotZoneData()" > 粘贴数据 </button>-->
......@@ -153,55 +95,5 @@
</div>
<label style="opacity: 0; position: absolute; top: 0px; font-family: 'BRLNSR_1'">1</label>
\ No newline at end of file
<!--龙骨面板-->
<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>
......@@ -54,7 +54,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// color: '#8f3758'
// }
@Input()
defaultItemType = 'text';
// defaultItemType = 'rect';
defaultItemType = 'pic';
@Input()
hotZoneImgSize = 190;
......@@ -251,10 +252,10 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
for (let i = 0; i < this.hotZoneArr.length; i++) {
this.hotZoneArr[i].index = i;
if (this.hotZoneArr[i]) {
this.hotZoneArr[i].title = 'item-' + (i + 1);
// if (this.hotZoneArr[i]) {
// this.hotZoneArr[i].title = 'item-' + (i + 1);
}
// }
}
}
......@@ -549,6 +550,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
item.audio_url = data.audio_url;
item.pic_url = data.pic_url;
item.text = data.text;
item.text_cn = data.text_cn;
item.start_time = data.start_time;
item.end_time = data.end_time;
item.itemType = data.itemType;
if (this.customTypeGroupArr) {
......@@ -951,6 +955,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
index: hotZoneArr[i].index,
pic_url: hotZoneArr[i].pic_url,
text: hotZoneArr[i].text,
text_cn: hotZoneArr[i].text_cn,
start_time: hotZoneArr[i].start_time,
end_time: hotZoneArr[i].end_time,
audio_url: hotZoneArr[i].audio_url,
itemType: hotZoneArr[i].itemType,
fontScale: hotZoneArr[i].textLabel ? hotZoneArr[i].textLabel.scaleX : 1,
......@@ -991,6 +998,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
saveText(item) {
item.textLabel.text = item.text;
item.textLabel.text_cn = item.text_cn;
item.textLabel.start_time = item.start_time;
item.textLabel.end_time = item.end_time;
}
setAnimaBtnClick(index) {
......@@ -1254,6 +1264,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
scale = getMinScale(pic, baseLen);
}
pic.setScaleXY(scale);
pic.visible = true;
});
}
......
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