<div class="p-image-children-editor"> <h5 style="margin-left: 2.5%;"> preview: </h5> <div class="preview-box" #wrap> <canvas id="canvas" #canvas></canvas> </div> <div nz-row nzType="flex" nzAlign="middle"> <div nz-col nzSpan="5" nzOffset="1"> <h5> add background: </h5> <div class="bg-box"> <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 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 </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> </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 *ngIf="!customTypeGroupArr"> <div *ngIf="it.itemType == 'pic'"> <app-upload-image-with-preview [picUrl]="it?.pic_url" (imageUploaded)="onItemImgUploadSuccess($event, it)"> </app-upload-image-with-preview> </div> <div *ngIf="it.itemType == 'text'"> <input type="text" nz-input [(ngModel)]="it.text" (blur)="saveText(it)"> </div> <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 *ngIf="it.itemType == 'rect' && isHasAnima" align="center" style="margin-bottom: 5px"> <button nz-button (click)="setAnimaBtnClick(i)" > <i nz-icon nzType="tool" nzTheme="outline"></i> 配置龙骨动画 </button> </div> </div> --> </div> </div> <div nz-col nzSpan="5" nzOffset="1"> <div class="bg-box"> <button nz-button nzType="dashed" (click)="addBtnClick()" class="add-btn"> <i nz-icon nzType="plus-circle" nzTheme="outline"></i> <!--Add Image--> Add hot zone </button> </div> </div> </div> <nz-divider></nz-divider> <div class="save-box"> <button style="margin-left: 200px" class="save-btn" nz-button nzType="primary" [nzSize]="'large'" nzShape="round" (click)="saveClick()" > <i nz-icon nzType="save"></i> Save </button> <div *ngIf="isCopyData" 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" > <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> </div> </div> </div> </div> <label style="opacity: 0; position: absolute; top: 0px; font-family: 'BRLNSR_1'">1</label> <!--龙骨面板--> <nz-modal [(nzVisible)]="animaPanelVisible" nzTitle="配置资源文件" (nzAfterClose)="closeAfterPanel()" (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> <div class="anima-upload-btn" *ngIf="customTypeGroupArr && customTypeGroupArr[curDragonBoneGIdx] && customTypeGroupArr[curDragonBoneGIdx].animaNames"> 提示:需包含以下动画: {{customTypeGroupArr[curDragonBoneGIdx].animaNames.toString()}} </div> </nz-modal>