Commit 33c22379 authored by 李维's avatar 李维

bug fix

parent 220e54ef
...@@ -193,7 +193,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy { ...@@ -193,7 +193,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy {
item.x = saveRect.x / saveData.scale + newRect.x item.x = saveRect.x / saveData.scale + newRect.x
item.y = saveRect.y / saveData.scale + newRect.y item.y = saveRect.y / saveData.scale + newRect.y
if(saveData.media.type == "Text") { if(saveData.media.type == "Text") {
return {width: this.itemWidth, height: this.itemHeight} return {width: this.itemWidth, height: this.itemHeight}
} }
}); });
...@@ -204,7 +203,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy { ...@@ -204,7 +203,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy {
item.audio_url = saveData.media.audio_url?saveData.media.audio_url:"" item.audio_url = saveData.media.audio_url?saveData.media.audio_url:""
} else { } else {
item.uid = uuid.v4() item.uid = uuid.v4()
item.initFont(Number(this.fontSize) * this.scale, this.fontName, this.fontColor) item.initFont(this.fontSize, this.fontName, this.fontColor)
item.init(this.defaultItemBG, "Text", "Text", () => { item.init(this.defaultItemBG, "Text", "Text", () => {
item.x = this.canvasWidth / 2 - this.itemWidth / 2; item.x = this.canvasWidth / 2 - this.itemWidth / 2;
item.y = this.canvasHeight / 2 - 20; item.y = this.canvasHeight / 2 - 20;
......
...@@ -23,453 +23,457 @@ ...@@ -23,453 +23,457 @@
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</div> </div>
<div class="section" style="display: flex; padding: 1rem;"> <div class="section" style="padding: 1rem;">
<!-- 左侧选区 --> <nz-collapse>
<div style="flex: 1; padding-right: 20px;"> <nz-collapse-panel nzHeader="左选区" nzActive="true">
<nz-form-item> <div style="flex: 1; padding-right: 20px;">
<nz-form-label [nzSpan]="4">左侧单词</nz-form-label>
<nz-form-control [nzSpan]="6">
<input type="text" nz-input placeholder="" [(ngModel)]="item.contentObj.wordLeft_text" (blur)="save()" />
</nz-form-control>
<nz-form-label [nzSpan]="4">音频</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-audio-recorder id="index_audio_1" [audioUrl]="wordLeft_audio_url" (audioUploaded)="onAudioUploadSuccess($event, 'wordLeft_audio_url', item.contentObj)" ></app-audio-recorder>
</nz-form-control>
</nz-form-item>
<app-custom-hot-zone
#hotZooLeftEL
zoneWidth = "330"
zoneHeight = "168"
[customBackground] = "true"
defaultBGImage = "assets/play/bg_330_168.png"
defaultItemBG = "assets/play/default_itemBG.png"
[itemWidth] = "100"
[itemHeight] = "43"
[bgItem]="bgItemLeft"
fontSize = "48"
fontName = "FuturaBT-Medium"
fontColor = "#c8161e"
[hotZoneItemArr]="hotZoneItemArrLeft"
title="左选区"
(save)="saveData($event, 1)"
></app-custom-hot-zone>
<!-- 选区设置 -->
<div nzAlign="middle" style="border-bottom: 2px solid #DDD;">
<h3>选区配置({{hotZoneItemArrLeft.length}})</h3>
<div *ngFor="let it of hotZoneItemArrLeft; let i = index" class="img-box" style="border-bottom: 1px solid #DDD; padding-bottom: 10px; position: relative; margin-bottom: 5px;">
<h3>选区-{{ i + 1 }}</h3>
<nz-form-item> <nz-form-item>
<nz-form-control [nzSpan]="8"> <nz-form-label [nzSpan]="4">左侧单词</nz-form-label>
<div style="float: left; margin-right: 10px;"> <nz-form-control [nzSpan]="6">
音频 <input type="text" nz-input placeholder="" [(ngModel)]="item.contentObj.wordLeft_text" (blur)="save()" />
</div>
<div style="float: left;">
<app-audio-recorder id="index_audio_1" [audioUrl]="it.media.audio_url" (audioUploaded)="onAudioUploadSuccess($event, 'audio_url', it.media)" > </app-audio-recorder>
</div>
</nz-form-control>
<nz-form-control [nzSpan]="8">
<div style="float: left; margin-right: 10px;">
文字
</div>
<div style="float: left;">
<input type="text" nz-input placeholder="" [(ngModel)]="it.media.text" (blur)="handleTextChange($event, it.uid)" />
</div>
</nz-form-control> </nz-form-control>
<nz-form-control [nzSpan]="8"> <nz-form-label [nzSpan]="4">音频</nz-form-label>
<button style="float: right; margin-bottom: 5px;" nz-button nzType="danger" (click)="deleteHotZoo(1, i)"> <nz-form-control [nzSpan]="6">
<i nz-icon nzType="delete" nzTheme="outline"></i> <app-audio-recorder id="index_audio_1" [audioUrl]="wordLeft_audio_url" (audioUploaded)="onAudioUploadSuccess($event, 'wordLeft_audio_url', item.contentObj)" ></app-audio-recorder>
删除
</button>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</div> <app-custom-hot-zone
<nz-form-item> #hotZooLeftEL
<nz-form-control [nzSpan]="24"> zoneWidth = "330"
<div style="float: right;"> zoneHeight = "168"
<button nz-button nzType="dashed" (click)="addHotZoo(1)" class="img-box" style="border-bottom: 1px solid #DDD; padding-bottom: 10px;"> [customBackground] = "true"
<i nz-icon nzType="plus-circle" nzTheme="outline"></i> defaultBGImage = "assets/play/bg_330_168.png"
添加选区 defaultItemBG = "assets/play/default_itemBG.png"
</button> [itemWidth] = "240"
[itemHeight] = "114"
[bgItem]="bgItemLeft"
fontSize = "48"
fontName = "FuturaBT-Medium"
fontColor = "#c8161e"
[hotZoneItemArr]="hotZoneItemArrLeft"
title="左选区"
(save)="saveData($event, 1)"
></app-custom-hot-zone>
<!-- 选区设置 -->
<div nzAlign="middle" style="border-bottom: 2px solid #DDD;">
<h3>选区配置({{hotZoneItemArrLeft.length}})</h3>
<div *ngFor="let it of hotZoneItemArrLeft; let i = index" class="img-box" style="border-bottom: 1px solid #DDD; padding-bottom: 10px; position: relative; margin-bottom: 5px;">
<h3>选区-{{ i + 1 }}</h3>
<nz-form-item>
<nz-form-control [nzSpan]="8">
<div style="float: left; margin-right: 10px;">
音频
</div>
<div style="float: left;">
<app-audio-recorder id="index_audio_1" [audioUrl]="it.media.audio_url" (audioUploaded)="onAudioUploadSuccess($event, 'audio_url', it.media)" > </app-audio-recorder>
</div>
</nz-form-control>
<nz-form-control [nzSpan]="8">
<div style="float: left; margin-right: 10px;">
文字
</div>
<div style="float: left;">
<input type="text" nz-input placeholder="" [(ngModel)]="it.media.text" (blur)="handleTextChange($event, it.uid)" />
</div>
</nz-form-control>
<nz-form-control [nzSpan]="8">
<button style="float: right; margin-bottom: 5px;" nz-button nzType="danger" (click)="deleteHotZoo(1, i)">
<i nz-icon nzType="delete" nzTheme="outline"></i>
删除
</button>
</nz-form-control>
</nz-form-item>
</div> </div>
</nz-form-control>
</nz-form-item>
</div>
<!-- 左侧题目 -->
<div nzAlign="middle">
<div class="img-box clearfix" style="margin-top: 20px; padding-bottom: 10px;">
<h3>题目配置({{questionsLeft.length}})</h3>
<div *ngFor="let item of questionsLeft; let QI = index" class="img-box clearfix" style="border-bottom: 1px solid #DDD; padding-bottom: 10px;">
<nz-form-item>
<nz-form-label [nzSpan]="1">No.</nz-form-label>
<nz-form-control [nzSpan]="1">
{{QI+1}}
</nz-form-control>
<nz-form-label [nzSpan]="2">组合数</nz-form-label>
<nz-form-control [nzSpan]="6">
<nz-input-number [(ngModel)]="item.number" [nzMin]="1" [nzMax]="5" [nzStep]="1" (ngModelChange)="handleCombinLength(item)"></nz-input-number>
</nz-form-control>
<nz-form-label [nzSpan]="2">发音</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-audio-recorder id="index_audio_1" [audioUrl]="item.audio_url" (audioUploaded)="onAudioUploadSuccess($event, 'audio_url', item)" > </app-audio-recorder>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="2">组合</nz-form-label>
<nz-form-control [nzSpan]="22">
<nz-select *ngFor="let part of item.combin; let i = index" [attr.data-index]="i" [(ngModel)]="questionsLeft[QI]._combin[i]" style="float: left; margin-right: 5px; width: 100px;" (ngModelChange)="handlePartChange($event, 1, QI, i)">
<nz-option *ngIf="wordLeft_text" [nzDisabled]="item.combin.indexOf(-1)!=-1" [nzValue]="-1" [nzLabel]="'R-' + wordLeft_text"></nz-option>
<nz-option *ngFor="let hot of hotZoneItemArrLeft; let j = index;" [attr.data-index]="j" [nzValue]="j" [nzLabel]="(j + 1) + '-' + hot.media.text"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item> <nz-form-item>
<nz-form-label [nzSpan]="2">预览</nz-form-label> <nz-form-control [nzSpan]="24">
<nz-form-control [nzSpan]="4" style="padding: 0 5px; "> <div style="float: right;">
<span style="background-color: #ccc; padding: 5px;"> <button nz-button nzType="dashed" (click)="addHotZoo(1)" class="img-box" style="border-bottom: 1px solid #DDD; padding-bottom: 10px;">
{{getQuestionWord(1, item.combin)}} <i nz-icon nzType="plus-circle" nzTheme="outline"></i>
</span> 添加选区
</button>
</div>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</div>
<!-- 左侧题目 -->
<div nzAlign="middle">
<div class="img-box clearfix" style="margin-top: 20px; padding-bottom: 10px;">
<h3>题目配置({{questionsLeft.length}})</h3>
<div *ngFor="let item of questionsLeft; let QI = index" class="img-box clearfix" style="border-bottom: 1px solid #DDD; padding-bottom: 10px;">
<nz-form-item>
<nz-form-label [nzSpan]="1">No.</nz-form-label>
<nz-form-control [nzSpan]="1">
{{QI+1}}
</nz-form-control>
<nz-form-label [nzSpan]="2">组合数</nz-form-label>
<nz-form-control [nzSpan]="6">
<nz-input-number [(ngModel)]="item.number" [nzMin]="1" [nzMax]="5" [nzStep]="1" (ngModelChange)="handleCombinLength(item)"></nz-input-number>
</nz-form-control>
<nz-form-label [nzSpan]="2">发音</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-audio-recorder id="index_audio_1" [audioUrl]="item.audio_url" (audioUploaded)="onAudioUploadSuccess($event, 'audio_url', item)" > </app-audio-recorder>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="2">组合</nz-form-label>
<nz-form-control [nzSpan]="22">
<nz-select *ngFor="let part of item.combin; let i = index" [attr.data-index]="i" [(ngModel)]="questionsLeft[QI]._combin[i]" style="float: left; margin-right: 5px; width: 100px;" (ngModelChange)="handlePartChange($event, 1, QI, i)">
<nz-option *ngIf="wordLeft_text" [nzDisabled]="item.combin.indexOf(-1)!=-1" [nzValue]="-1" [nzLabel]="'R-' + wordLeft_text"></nz-option>
<nz-option *ngFor="let hot of hotZoneItemArrLeft; let j = index;" [attr.data-index]="j" [nzValue]="j" [nzLabel]="(j + 1) + '-' + hot.media.text"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="2">预览</nz-form-label>
<nz-form-control [nzSpan]="4" style="padding: 0 5px; ">
<span style="background-color: #ccc; padding: 5px;">
{{getQuestionWord(1, item.combin)}}
</span>
</nz-form-control>
</nz-form-item>
<nz-form-item style="margin-bottom: 0;">
<nz-form-control [nzSpan]="24">
<div style="float: right;">
<button style="flex:1; margin-bottom: 5px;" nz-button nzType="dashed" (click)="handleMoveItemUp(1, QI)"
[disabled]="QI==0">
<i nz-icon nzType="up" nzTheme="outline"></i>
上移
</button>
<button style="flex:1; margin-bottom: 5px;" nz-button nzType="dashed" (click)="handleMoveItemDown(1, QI)"
[disabled]="QI==questionsLeft.length-1">
<i nz-icon nzType="down" nzTheme="outline"></i>
下移
</button>
<button style="flex:1; margin-bottom: 5px;" nz-button nzType="danger" (click)="deleteQuestionItem(1, QI)">
<i nz-icon nzType="delete" nzTheme="outline"></i>
删除
</button>
</div>
</nz-form-control>
</nz-form-item>
</div>
</div>
<nz-form-item style="margin-bottom: 0;"> <nz-form-item style="margin-bottom: 0;">
<nz-form-control [nzSpan]="24"> <nz-form-control [nzSpan]="24">
<div style="float: right;"> <div style="float: right;">
<button style="flex:1; margin-bottom: 5px;" nz-button nzType="dashed" (click)="handleMoveItemUp(1, QI)" <button nz-button nzType="dashed" (click)="addQustion(1)" [disabled]="questionsLeft.length==3">
[disabled]="QI==0"> <i nz-icon nzType="plus-circle" nzTheme="outline"></i>
<i nz-icon nzType="up" nzTheme="outline"></i> 添加题目
上移
</button>
<button style="flex:1; margin-bottom: 5px;" nz-button nzType="dashed" (click)="handleMoveItemDown(1, QI)"
[disabled]="QI==questionsLeft.length-1">
<i nz-icon nzType="down" nzTheme="outline"></i>
下移
</button>
<button style="flex:1; margin-bottom: 5px;" nz-button nzType="danger" (click)="deleteQuestionItem(1, QI)">
<i nz-icon nzType="delete" nzTheme="outline"></i>
删除
</button> </button>
</div> </div>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</div> </div>
</div> </div>
<nz-form-item style="margin-bottom: 0;"> </nz-collapse-panel>
<nz-form-control [nzSpan]="24">
<div style="float: right;">
<button nz-button nzType="dashed" (click)="addQustion(1)" [disabled]="questionsLeft.length==3">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
添加题目
</button>
</div>
</nz-form-control>
</nz-form-item>
</div>
</div>
<!-- 中间选区 -->
<div style="flex: 1; padding-left: 20px; border-left: 2px dashed #ccc;">
<nz-form-item>
<nz-form-label [nzSpan]="4">中间单词</nz-form-label>
<nz-form-control [nzSpan]="6">
<input type="text" nz-input placeholder="" [(ngModel)]="item.contentObj.wordMiddle_text" (blur)="save()" />
</nz-form-control>
<nz-form-label [nzSpan]="4">音频</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-audio-recorder id="index_audio_1" [audioUrl]="wordMiddle_audio_url" (audioUploaded)="onAudioUploadSuccess($event, 'wordMiddle_audio_url', item.contentObj)" ></app-audio-recorder>
</nz-form-control>
</nz-form-item>
<app-custom-hot-zone <nz-collapse-panel nzHeader="中选区" nzActive="false">
#hotZooMiddleEL <div style="flex: 1; padding-left: 20px; border-left: 2px dashed #ccc;">
zoneWidth = "330"
zoneHeight = "168"
[customBackground] = "true"
defaultBGImage = "assets/play/bg_330_168.png"
defaultItemBG = "assets/play/default_itemBG.png"
[itemWidth] = "100"
[itemHeight] = "43"
[(bgItem)]="bgItemMiddle"
fontSize = "48"
fontName = "FuturaBT-Medium"
fontColor = "#c8161e"
[(hotZoneItemArr)]="hotZoneItemArrMiddle"
title="右选区"
(save)="saveData($event, 2)"
></app-custom-hot-zone>
<!-- 选区设置 -->
<div nzAlign="middle" style="border-bottom: 2px solid #DDD;">
<h3>选区配置({{hotZoneItemArrMiddle.length}})</h3>
<div *ngFor="let it of hotZoneItemArrMiddle; let i = index" class="img-box" style="border-bottom: 1px solid #DDD; padding-bottom: 10px; position: relative; margin-bottom: 5px;">
<h3>选区-{{ i + 1 }}</h3>
<nz-form-item> <nz-form-item>
<nz-form-control [nzSpan]="8"> <nz-form-label [nzSpan]="4">中间单词</nz-form-label>
<div style="float: left; margin-right: 10px;"> <nz-form-control [nzSpan]="6">
音频 <input type="text" nz-input placeholder="" [(ngModel)]="item.contentObj.wordMiddle_text" (blur)="save()" />
</div>
<div style="float: left;">
<app-audio-recorder id="index_audio_1" [audioUrl]="it.media.audio_url" (audioUploaded)="onAudioUploadSuccess($event, 'audio_url', it.media)" > </app-audio-recorder>
</div>
</nz-form-control>
<nz-form-control [nzSpan]="8">
<div style="float: left; margin-right: 10px;">
文字
</div>
<div style="float: left;">
<input type="text" nz-input placeholder="" [(ngModel)]="it.media.text" (blur)="handleTextChange($event, it.uid)" />
</div>
</nz-form-control> </nz-form-control>
<nz-form-control [nzSpan]="8"> <nz-form-label [nzSpan]="4">音频</nz-form-label>
<button style="float: right; margin-bottom: 5px;" nz-button nzType="danger" (click)="deleteHotZoo(2, i)"> <nz-form-control [nzSpan]="6">
<i nz-icon nzType="delete" nzTheme="outline"></i> <app-audio-recorder id="index_audio_1" [audioUrl]="wordMiddle_audio_url" (audioUploaded)="onAudioUploadSuccess($event, 'wordMiddle_audio_url', item.contentObj)" ></app-audio-recorder>
删除
</button>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</div>
<nz-form-item>
<nz-form-control [nzSpan]="24">
<div style="float: right;">
<button nz-button nzType="dashed" (click)="addHotZoo(2)" class="img-box" style="border-bottom: 1px solid #DDD; padding-bottom: 10px;">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
添加选区
</button>
</div>
</nz-form-control>
</nz-form-item>
</div>
<!-- 右侧题目 -->
<div nzAlign="middle">
<div class="img-box clearfix" style="margin-top: 20px; padding-bottom: 10px;">
<h3>题目配置({{questionsMiddle.length}})</h3>
<div *ngFor="let item of questionsMiddle; let QI = index" class="img-box clearfix" style="border-bottom: 1px solid #DDD; padding-bottom: 10px;">
<nz-form-item>
<nz-form-label [nzSpan]="1">No.</nz-form-label>
<nz-form-control [nzSpan]="1">
{{QI+1}}
</nz-form-control>
<nz-form-label [nzSpan]="2">组合数</nz-form-label>
<nz-form-control [nzSpan]="6">
<nz-input-number [(ngModel)]="item.number" [nzMin]="1" [nzMax]="5" [nzStep]="1" (ngModelChange)="handleCombinLength(item)"></nz-input-number>
</nz-form-control>
<nz-form-label [nzSpan]="2">发音</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-audio-recorder id="index_audio_1" [audioUrl]="item.audio_url" (audioUploaded)="onAudioUploadSuccess($event, 'audio_url', item)" > </app-audio-recorder>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="2">组合</nz-form-label>
<nz-form-control [nzSpan]="22">
<nz-select *ngFor="let part of item.combin; let i = index" [attr.data-index]="i" [(ngModel)]="questionsMiddle[QI]._combin[i]" style="float: left; margin-right: 5px; width: 100px;" (ngModelChange)="handlePartChange($event, 2, QI, i)">
<nz-option *ngIf="wordMiddle_text" [nzDisabled]="item.combin.indexOf(-1)!=-1" [nzValue]="-1" [nzLabel]="'R-' + wordMiddle_text"></nz-option>
<nz-option *ngFor="let hot of hotZoneItemArrMiddle; let j = index;" [attr.data-index]="j" [nzValue]="j" [nzLabel]="(j + 1) + '-' + hot.media.text"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<app-custom-hot-zone
#hotZooMiddleEL
zoneWidth = "330"
zoneHeight = "168"
[customBackground] = "true"
defaultBGImage = "assets/play/bg_330_168.png"
defaultItemBG = "assets/play/default_itemBG.png"
[itemWidth] = "240"
[itemHeight] = "114"
[(bgItem)]="bgItemMiddle"
fontSize = "48"
fontName = "FuturaBT-Medium"
fontColor = "#c8161e"
[(hotZoneItemArr)]="hotZoneItemArrMiddle"
title="右选区"
(save)="saveData($event, 2)"
></app-custom-hot-zone>
<!-- 选区设置 -->
<div nzAlign="middle" style="border-bottom: 2px solid #DDD;">
<h3>选区配置({{hotZoneItemArrMiddle.length}})</h3>
<div *ngFor="let it of hotZoneItemArrMiddle; let i = index" class="img-box" style="border-bottom: 1px solid #DDD; padding-bottom: 10px; position: relative; margin-bottom: 5px;">
<h3>选区-{{ i + 1 }}</h3>
<nz-form-item>
<nz-form-control [nzSpan]="8">
<div style="float: left; margin-right: 10px;">
音频
</div>
<div style="float: left;">
<app-audio-recorder id="index_audio_1" [audioUrl]="it.media.audio_url" (audioUploaded)="onAudioUploadSuccess($event, 'audio_url', it.media)" > </app-audio-recorder>
</div>
</nz-form-control>
<nz-form-control [nzSpan]="8">
<div style="float: left; margin-right: 10px;">
文字
</div>
<div style="float: left;">
<input type="text" nz-input placeholder="" [(ngModel)]="it.media.text" (blur)="handleTextChange($event, it.uid)" />
</div>
</nz-form-control>
<nz-form-control [nzSpan]="8">
<button style="float: right; margin-bottom: 5px;" nz-button nzType="danger" (click)="deleteHotZoo(2, i)">
<i nz-icon nzType="delete" nzTheme="outline"></i>
删除
</button>
</nz-form-control>
</nz-form-item>
</div>
<nz-form-item> <nz-form-item>
<nz-form-label [nzSpan]="2">预览</nz-form-label> <nz-form-control [nzSpan]="24">
<nz-form-control [nzSpan]="4" style="padding: 0 5px; "> <div style="float: right;">
<span style="background-color: #ccc; padding: 5px;"> <button nz-button nzType="dashed" (click)="addHotZoo(2)" class="img-box" style="border-bottom: 1px solid #DDD; padding-bottom: 10px;">
{{getQuestionWord(2, item.combin)}} <i nz-icon nzType="plus-circle" nzTheme="outline"></i>
</span> 添加选区
</button>
</div>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</div>
<!-- 右侧题目 -->
<div nzAlign="middle">
<div class="img-box clearfix" style="margin-top: 20px; padding-bottom: 10px;">
<h3>题目配置({{questionsMiddle.length}})</h3>
<div *ngFor="let item of questionsMiddle; let QI = index" class="img-box clearfix" style="border-bottom: 1px solid #DDD; padding-bottom: 10px;">
<nz-form-item>
<nz-form-label [nzSpan]="1">No.</nz-form-label>
<nz-form-control [nzSpan]="1">
{{QI+1}}
</nz-form-control>
<nz-form-label [nzSpan]="2">组合数</nz-form-label>
<nz-form-control [nzSpan]="6">
<nz-input-number [(ngModel)]="item.number" [nzMin]="1" [nzMax]="5" [nzStep]="1" (ngModelChange)="handleCombinLength(item)"></nz-input-number>
</nz-form-control>
<nz-form-label [nzSpan]="2">发音</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-audio-recorder id="index_audio_1" [audioUrl]="item.audio_url" (audioUploaded)="onAudioUploadSuccess($event, 'audio_url', item)" > </app-audio-recorder>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="2">组合</nz-form-label>
<nz-form-control [nzSpan]="22">
<nz-select *ngFor="let part of item.combin; let i = index" [attr.data-index]="i" [(ngModel)]="questionsMiddle[QI]._combin[i]" style="float: left; margin-right: 5px; width: 100px;" (ngModelChange)="handlePartChange($event, 2, QI, i)">
<nz-option *ngIf="wordMiddle_text" [nzDisabled]="item.combin.indexOf(-1)!=-1" [nzValue]="-1" [nzLabel]="'R-' + wordMiddle_text"></nz-option>
<nz-option *ngFor="let hot of hotZoneItemArrMiddle; let j = index;" [attr.data-index]="j" [nzValue]="j" [nzLabel]="(j + 1) + '-' + hot.media.text"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="2">预览</nz-form-label>
<nz-form-control [nzSpan]="4" style="padding: 0 5px; ">
<span style="background-color: #ccc; padding: 5px;">
{{getQuestionWord(2, item.combin)}}
</span>
</nz-form-control>
</nz-form-item>
<nz-form-item style="margin-bottom: 0;">
<nz-form-control [nzSpan]="24">
<div style="float: right;">
<button style="flex:1; margin-bottom: 5px;" nz-button nzType="dashed" (click)="handleMoveItemUp(2, QI)"
[disabled]="QI==0">
<i nz-icon nzType="up" nzTheme="outline"></i>
上移
</button>
<button style="flex:1; margin-bottom: 5px;" nz-button nzType="dashed" (click)="handleMoveItemDown(2, QI)"
[disabled]="QI==questionsMiddle.length-1">
<i nz-icon nzType="down" nzTheme="outline"></i>
下移
</button>
<button style="flex:1; margin-bottom: 5px;" nz-button nzType="danger" (click)="deleteQuestionItem(2, QI)">
<i nz-icon nzType="delete" nzTheme="outline"></i>
删除
</button>
</div>
</nz-form-control>
</nz-form-item>
</div>
</div>
<nz-form-item style="margin-bottom: 0;"> <nz-form-item style="margin-bottom: 0;">
<nz-form-control [nzSpan]="24"> <nz-form-control [nzSpan]="24">
<div style="float: right;"> <div style="float: right;">
<button style="flex:1; margin-bottom: 5px;" nz-button nzType="dashed" (click)="handleMoveItemUp(2, QI)" <button nz-button nzType="dashed" (click)="addQustion(2)" [disabled]="questionsMiddle.length==3">
[disabled]="QI==0"> <i nz-icon nzType="plus-circle" nzTheme="outline"></i>
<i nz-icon nzType="up" nzTheme="outline"></i> 添加题目
上移
</button>
<button style="flex:1; margin-bottom: 5px;" nz-button nzType="dashed" (click)="handleMoveItemDown(2, QI)"
[disabled]="QI==questionsMiddle.length-1">
<i nz-icon nzType="down" nzTheme="outline"></i>
下移
</button>
<button style="flex:1; margin-bottom: 5px;" nz-button nzType="danger" (click)="deleteQuestionItem(2, QI)">
<i nz-icon nzType="delete" nzTheme="outline"></i>
删除
</button> </button>
</div> </div>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</div> </div>
</div> </div>
<nz-form-item style="margin-bottom: 0;"> </nz-collapse-panel>
<nz-form-control [nzSpan]="24">
<div style="float: right;">
<button nz-button nzType="dashed" (click)="addQustion(2)" [disabled]="questionsMiddle.length==3">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
添加题目
</button>
</div>
</nz-form-control>
</nz-form-item>
</div>
</div>
<!-- 右侧选区 -->
<div style="flex: 1; padding-left: 20px; border-left: 2px dashed #ccc;">
<nz-form-item>
<nz-form-label [nzSpan]="4">右侧单词</nz-form-label>
<nz-form-control [nzSpan]="6">
<input type="text" nz-input placeholder="" [(ngModel)]="item.contentObj.wordRight_text" (blur)="save()" />
</nz-form-control>
<nz-form-label [nzSpan]="4">音频</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-audio-recorder id="index_audio_1" [audioUrl]="wordRight_audio_url" (audioUploaded)="onAudioUploadSuccess($event, 'wordRight_audio_url', item.contentObj)" ></app-audio-recorder>
</nz-form-control>
</nz-form-item>
<app-custom-hot-zone <nz-collapse-panel nzHeader="右选区" nzActive="false">
#hotZooRightEL <div style="flex: 1; padding-left: 20px; border-left: 2px dashed #ccc;">
zoneWidth = "330"
zoneHeight = "168"
[customBackground] = "true"
defaultBGImage = "assets/play/bg_330_168.png"
defaultItemBG = "assets/play/default_itemBG.png"
[itemWidth] = "100"
[itemHeight] = "43"
[(bgItem)]="bgItemRight"
fontSize = "48"
fontName = "FuturaBT-Medium"
fontColor = "#c8161e"
[(hotZoneItemArr)]="hotZoneItemArrRight"
title="右选区"
(save)="saveData($event, 3)"
></app-custom-hot-zone>
<!-- 选区设置 -->
<div nzAlign="middle" style="border-bottom: 2px solid #DDD;">
<h3>选区配置({{hotZoneItemArrRight.length}})</h3>
<div *ngFor="let it of hotZoneItemArrRight; let i = index" class="img-box" style="border-bottom: 1px solid #DDD; padding-bottom: 10px; position: relative; margin-bottom: 5px;">
<h3>选区-{{ i + 1 }}</h3>
<nz-form-item> <nz-form-item>
<nz-form-control [nzSpan]="8"> <nz-form-label [nzSpan]="4">右侧单词</nz-form-label>
<div style="float: left; margin-right: 10px;"> <nz-form-control [nzSpan]="6">
音频 <input type="text" nz-input placeholder="" [(ngModel)]="item.contentObj.wordRight_text" (blur)="save()" />
</div>
<div style="float: left;">
<app-audio-recorder id="index_audio_1" [audioUrl]="it.media.audio_url" (audioUploaded)="onAudioUploadSuccess($event, 'audio_url', it.media)" > </app-audio-recorder>
</div>
</nz-form-control>
<nz-form-control [nzSpan]="8">
<div style="float: left; margin-right: 10px;">
文字
</div>
<div style="float: left;">
<input type="text" nz-input placeholder="" [(ngModel)]="it.media.text" (blur)="handleTextChange($event, it.uid)" />
</div>
</nz-form-control> </nz-form-control>
<nz-form-control [nzSpan]="8"> <nz-form-label [nzSpan]="4">音频</nz-form-label>
<button style="float: right; margin-bottom: 5px;" nz-button nzType="danger" (click)="deleteHotZoo(3, i)"> <nz-form-control [nzSpan]="6">
<i nz-icon nzType="delete" nzTheme="outline"></i> <app-audio-recorder id="index_audio_1" [audioUrl]="wordRight_audio_url" (audioUploaded)="onAudioUploadSuccess($event, 'wordRight_audio_url', item.contentObj)" ></app-audio-recorder>
删除
</button>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</div>
<nz-form-item>
<nz-form-control [nzSpan]="24">
<div style="float: right;">
<button nz-button nzType="dashed" (click)="addHotZoo(3)" class="img-box" style="border-bottom: 1px solid #DDD; padding-bottom: 10px;">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
添加选区
</button>
</div>
</nz-form-control>
</nz-form-item>
</div>
<!-- 右侧题目 -->
<div nzAlign="middle">
<div class="img-box clearfix" style="margin-top: 20px; padding-bottom: 10px;">
<h3>题目配置({{questionsRight.length}})</h3>
<div *ngFor="let item of questionsRight; let QI = index" class="img-box clearfix" style="border-bottom: 1px solid #DDD; padding-bottom: 10px;">
<nz-form-item>
<nz-form-label [nzSpan]="1">No.</nz-form-label>
<nz-form-control [nzSpan]="1">
{{QI+1}}
</nz-form-control>
<nz-form-label [nzSpan]="2">组合数</nz-form-label>
<nz-form-control [nzSpan]="6">
<nz-input-number [(ngModel)]="item.number" [nzMin]="1" [nzMax]="5" [nzStep]="1" (ngModelChange)="handleCombinLength(item)"></nz-input-number>
</nz-form-control>
<nz-form-label [nzSpan]="2">发音</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-audio-recorder id="index_audio_1" [audioUrl]="item.audio_url" (audioUploaded)="onAudioUploadSuccess($event, 'audio_url', item)" > </app-audio-recorder>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="2">组合</nz-form-label>
<nz-form-control [nzSpan]="22">
<nz-select *ngFor="let part of item.combin; let i = index" [attr.data-index]="i" [(ngModel)]="questionsRight[QI]._combin[i]" style="float: left; margin-right: 5px; width: 100px;" (ngModelChange)="handlePartChange($event, 3, QI, i)">
<nz-option *ngIf="wordRight_text" [nzDisabled]="item.combin.indexOf(-1)!=-1" [nzValue]="-1" [nzLabel]="'R-' + wordRight_text"></nz-option>
<nz-option *ngFor="let hot of hotZoneItemArrRight; let j = index;" [attr.data-index]="j" [nzValue]="j" [nzLabel]="(j + 1) + '-' + hot.media.text"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<app-custom-hot-zone
#hotZooRightEL
zoneWidth = "330"
zoneHeight = "168"
[customBackground] = "true"
defaultBGImage = "assets/play/bg_330_168.png"
defaultItemBG = "assets/play/default_itemBG.png"
[itemWidth] = "240"
[itemHeight] = "114"
[(bgItem)]="bgItemRight"
fontSize = "48"
fontName = "FuturaBT-Medium"
fontColor = "#c8161e"
[(hotZoneItemArr)]="hotZoneItemArrRight"
title="右选区"
(save)="saveData($event, 3)"
></app-custom-hot-zone>
<!-- 选区设置 -->
<div nzAlign="middle" style="border-bottom: 2px solid #DDD;">
<h3>选区配置({{hotZoneItemArrRight.length}})</h3>
<div *ngFor="let it of hotZoneItemArrRight; let i = index" class="img-box" style="border-bottom: 1px solid #DDD; padding-bottom: 10px; position: relative; margin-bottom: 5px;">
<h3>选区-{{ i + 1 }}</h3>
<nz-form-item>
<nz-form-control [nzSpan]="8">
<div style="float: left; margin-right: 10px;">
音频
</div>
<div style="float: left;">
<app-audio-recorder id="index_audio_1" [audioUrl]="it.media.audio_url" (audioUploaded)="onAudioUploadSuccess($event, 'audio_url', it.media)" > </app-audio-recorder>
</div>
</nz-form-control>
<nz-form-control [nzSpan]="8">
<div style="float: left; margin-right: 10px;">
文字
</div>
<div style="float: left;">
<input type="text" nz-input placeholder="" [(ngModel)]="it.media.text" (blur)="handleTextChange($event, it.uid)" />
</div>
</nz-form-control>
<nz-form-control [nzSpan]="8">
<button style="float: right; margin-bottom: 5px;" nz-button nzType="danger" (click)="deleteHotZoo(3, i)">
<i nz-icon nzType="delete" nzTheme="outline"></i>
删除
</button>
</nz-form-control>
</nz-form-item>
</div>
<nz-form-item> <nz-form-item>
<nz-form-label [nzSpan]="2">预览</nz-form-label> <nz-form-control [nzSpan]="24">
<nz-form-control [nzSpan]="4" style="padding: 0 5px; "> <div style="float: right;">
<span style="background-color: #ccc; padding: 5px;"> <button nz-button nzType="dashed" (click)="addHotZoo(3)" class="img-box" style="border-bottom: 1px solid #DDD; padding-bottom: 10px;">
{{getQuestionWord(3, item.combin)}} <i nz-icon nzType="plus-circle" nzTheme="outline"></i>
</span> 添加选区
</button>
</div>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</div>
<!-- 右侧题目 -->
<div nzAlign="middle">
<div class="img-box clearfix" style="margin-top: 20px; padding-bottom: 10px;">
<h3>题目配置({{questionsRight.length}})</h3>
<div *ngFor="let item of questionsRight; let QI = index" class="img-box clearfix" style="border-bottom: 1px solid #DDD; padding-bottom: 10px;">
<nz-form-item>
<nz-form-label [nzSpan]="1">No.</nz-form-label>
<nz-form-control [nzSpan]="1">
{{QI+1}}
</nz-form-control>
<nz-form-label [nzSpan]="2">组合数</nz-form-label>
<nz-form-control [nzSpan]="6">
<nz-input-number [(ngModel)]="item.number" [nzMin]="1" [nzMax]="5" [nzStep]="1" (ngModelChange)="handleCombinLength(item)"></nz-input-number>
</nz-form-control>
<nz-form-label [nzSpan]="2">发音</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-audio-recorder id="index_audio_1" [audioUrl]="item.audio_url" (audioUploaded)="onAudioUploadSuccess($event, 'audio_url', item)" > </app-audio-recorder>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="2">组合</nz-form-label>
<nz-form-control [nzSpan]="22">
<nz-select *ngFor="let part of item.combin; let i = index" [attr.data-index]="i" [(ngModel)]="questionsRight[QI]._combin[i]" style="float: left; margin-right: 5px; width: 100px;" (ngModelChange)="handlePartChange($event, 3, QI, i)">
<nz-option *ngIf="wordRight_text" [nzDisabled]="item.combin.indexOf(-1)!=-1" [nzValue]="-1" [nzLabel]="'R-' + wordRight_text"></nz-option>
<nz-option *ngFor="let hot of hotZoneItemArrRight; let j = index;" [attr.data-index]="j" [nzValue]="j" [nzLabel]="(j + 1) + '-' + hot.media.text"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="2">预览</nz-form-label>
<nz-form-control [nzSpan]="4" style="padding: 0 5px; ">
<span style="background-color: #ccc; padding: 5px;">
{{getQuestionWord(3, item.combin)}}
</span>
</nz-form-control>
</nz-form-item>
<nz-form-item style="margin-bottom: 0;">
<nz-form-control [nzSpan]="24">
<div style="float: right;">
<button style="flex:1; margin-bottom: 5px;" nz-button nzType="dashed" (click)="handleMoveItemUp(3, QI)"
[disabled]="QI==0">
<i nz-icon nzType="up" nzTheme="outline"></i>
上移
</button>
<button style="flex:1; margin-bottom: 5px;" nz-button nzType="dashed" (click)="handleMoveItemDown(3, QI)"
[disabled]="QI==questionsRight.length-1">
<i nz-icon nzType="down" nzTheme="outline"></i>
下移
</button>
<button style="flex:1; margin-bottom: 5px;" nz-button nzType="danger" (click)="deleteQuestionItem(3, QI)">
<i nz-icon nzType="delete" nzTheme="outline"></i>
删除
</button>
</div>
</nz-form-control>
</nz-form-item>
</div>
</div>
<nz-form-item style="margin-bottom: 0;"> <nz-form-item style="margin-bottom: 0;">
<nz-form-control [nzSpan]="24"> <nz-form-control [nzSpan]="24">
<div style="float: right;"> <div style="float: right;">
<button style="flex:1; margin-bottom: 5px;" nz-button nzType="dashed" (click)="handleMoveItemUp(3, QI)" <button nz-button nzType="dashed" (click)="addQustion(3)" [disabled]="questionsRight.length==3">
[disabled]="QI==0"> <i nz-icon nzType="plus-circle" nzTheme="outline"></i>
<i nz-icon nzType="up" nzTheme="outline"></i> 添加题目
上移
</button>
<button style="flex:1; margin-bottom: 5px;" nz-button nzType="dashed" (click)="handleMoveItemDown(3, QI)"
[disabled]="QI==questionsRight.length-1">
<i nz-icon nzType="down" nzTheme="outline"></i>
下移
</button>
<button style="flex:1; margin-bottom: 5px;" nz-button nzType="danger" (click)="deleteQuestionItem(3, QI)">
<i nz-icon nzType="delete" nzTheme="outline"></i>
删除
</button> </button>
</div> </div>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</div> </div>
</div> </div>
<nz-form-item style="margin-bottom: 0;"> </nz-collapse-panel>
<nz-form-control [nzSpan]="24"> </nz-collapse>
<div style="float: right;">
<button nz-button nzType="dashed" (click)="addQustion(3)" [disabled]="questionsRight.length==3">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
添加题目
</button>
</div>
</nz-form-control>
</nz-form-item>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
......
...@@ -466,7 +466,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -466,7 +466,7 @@ export class PlayComponent implements OnInit, OnDestroy {
containerMiddle.ref.addChild(element_middle.ref) containerMiddle.ref.addChild(element_middle.ref)
this.render(containerMiddle.ref) this.render(containerMiddle.ref)
this.initHotZooes(this.g_formData.hotZoneItemArrRight, containerMiddle, "middle") this.initHotZooes(this.g_formData.hotZoneItemArrMiddle, containerMiddle, "middle")
// 右侧 // 右侧
let containerRight = this.g_cartoon.createCartoonElementImageFunc("select-container-right", "bg_330_168", (w, h)=>{ let containerRight = this.g_cartoon.createCartoonElementImageFunc("select-container-right", "bg_330_168", (w, h)=>{
...@@ -513,6 +513,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -513,6 +513,7 @@ export class PlayComponent implements OnInit, OnDestroy {
let element = null let element = null
element = this.g_cartoon.createCartoonElement("image-puzzle-"+index+"_"+side, "MySprite") element = this.g_cartoon.createCartoonElement("image-puzzle-"+index+"_"+side, "MySprite")
console.log(item.media.image_url)
element.ref.init(this.g_cartoon.images.get(item.media.image_url)) element.ref.init(this.g_cartoon.images.get(item.media.image_url))
element.ref.scaleX = (item.rect.width / element.ref.width) * parent.ref.scaleX element.ref.scaleX = (item.rect.width / element.ref.width) * parent.ref.scaleX
element.ref.scaleY = (item.rect.height / element.ref.height) * parent.ref.scaleY element.ref.scaleY = (item.rect.height / element.ref.height) * parent.ref.scaleY
......
src/assets/play/default_itemBG.png

1.7 KB | W: | H:

src/assets/play/default_itemBG.png

2.12 KB | W: | H:

src/assets/play/default_itemBG.png
src/assets/play/default_itemBG.png
src/assets/play/default_itemBG.png
src/assets/play/default_itemBG.png
  • 2-up
  • Swipe
  • Onion skin
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