Commit 0d51c698 authored by liujiangnan's avatar liujiangnan

完成

parent a7e92ed4
<div class="model-content">
<div style="position: absolute; left: 200px; top: 100px; width: 300px;">
<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()">
<app-upload-image-with-preview
[picUrl]="item.pic_url"
(imageUploaded)="onImageUploadSuccess($event, 'pic_url')"
></app-upload-image-with-preview>
<div nz-row>
<div nz-col nzOffset='4'><h1 nz-title>课程内容编辑</h1></div>
</div>
<div nz-form>
<div id='title-anchor'>
<nz-divider nzText="课程名称" nzOrientation="left"></nz-divider>
<nz-form-item>
<nz-form-label [nzSpan]="3" nzFor="t_val1">标题1</nz-form-label>
<nz-form-control [nzSpan]="6">
<nz-input-group nzAddOnBefore="Part">
<input type="text" id="t_val1" nz-input [(ngModel)]="item.title.t_val1" (blur)="save()">
</nz-input-group>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="3" nzFor="t_val2">标题2</nz-form-label>
<nz-form-control [nzSpan]="6">
<input nz-input type="text" id="t_val2" [(ngModel)]="item.title.t_val2" (blur)="save()">
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="3" nzFor="t_audio_url">发音</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-audio-recorder
[audioUrl]="item.audio_url"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url')"
></app-audio-recorder>
[audioUrl]="item.title.t_audio_url" id="t_audio_url"
(audioUploaded)="onAudioUploadSuccess($event, item.title, 't_audio_url')">
</app-audio-recorder>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="3" nzFor="t_font_size">字体大小</nz-form-label>
<nz-form-control [nzSpan]="6">
<nz-input-number [(ngModel)]="item.title.t_font_size" [nzMin]="1" [nzStep]="1" (blur)="save()"></nz-input-number>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="3" nzFor="t_font">字体</nz-form-label>
<nz-form-control [nzSpan]="4">
<nz-select [(ngModel)]="item.title.t_font" [nzShowSearch]='true' nzAllowClear nzPlaceHolder="Please select the font" (ngModelChange)="save()">
<nz-option nzValue="BRLNSB" nzLabel="BRLNSB"></nz-option>
<nz-option nzValue="BRLNSDB" nzLabel="BRLNSDB"></nz-option>
<nz-option nzValue="BRLNSR" nzLabel="BRLNSR"></nz-option>
<nz-option nzValue="GOTHIC" nzLabel="GOTHIC"></nz-option>
<nz-option nzValue="GOTHICB" nzLabel="GOTHICB"></nz-option>
<nz-option nzValue="GOTHICBI" nzLabel="GOTHICBI"></nz-option>
<nz-option nzValue="GOTHICI" nzLabel="GOTHICI"></nz-option>
<nz-option nzValue="MMTextBook" nzLabel="MMTextBook"></nz-option>
<nz-option nzValue="MMTextBook-Bold" nzLabel="MMTextBook-Bold"></nz-option>
<nz-option nzValue="MMTextBook-Italic" nzLabel="MMTextBook-Italic"></nz-option>
<nz-option nzValue="MMTextBook-BoldItalic" nzLabel="MMTextBook-BoldItalic"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="3" nzFor="t_font_color">颜色</nz-form-label>
<nz-form-control [nzSpan]="4">
<nz-select [(ngModel)]="item.title.t_font_color" [nzShowSearch]='true' nzAllowClear nzPlaceHolder="Please select the color" (ngModelChange)="save()">
<nz-option nzValue="#008000" nzLabel="绿色"></nz-option>
<nz-option nzValue="#FF0000" nzLabel="红色"></nz-option>
<nz-option nzValue="#D2691E" nzLabel="巧克力色"></nz-option>
<nz-option nzValue="#000000" nzLabel="黑色"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
</div>
<div style="position: absolute; left: 1000px; top: 100px; width: 300px;">
<input type="text" nz-input [(ngModel)]="item.text_2" (blur)="save()">
<app-upload-image-with-preview
[picUrl]="item.pic_url_2"
(imageUploaded)="onImageUploadSuccess($event, 'pic_url_2')"
></app-upload-image-with-preview>
<div id='listen-anchor'>
<nz-divider nzText="听力材料" nzOrientation="left"></nz-divider>
<nz-form-item>
<nz-form-control [nzSpan]="6" nzOffset="3">
<app-audio-recorder id="item.listen_audio_url"
[audioUrl]="item.listen_audio_url"
(audioUploaded)="onAudioUploadSuccess($event, item, 'listen_audio_url')">
</app-audio-recorder>
</nz-form-control>
</nz-form-item>
</div>
<div>
<nz-divider nzText="字母(组合)" nzOrientation="left"></nz-divider>
<nz-form-item>
<nz-form-label [nzSpan]="3" nzFor="words">字母组合一</nz-form-label>
<nz-form-control [nzSpan]="6">
<input nz-input type="text" id="words" [(ngModel)]="item.words" (blur)="save()">
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="3" nzFor="words_audio_url">字母组合一发音</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-audio-recorder
[audioUrl]="item.audio_url_2"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url_2')"
></app-audio-recorder>
[audioUrl]="item.words_audio_url" id="words_audio_url"
(audioUploaded)="onAudioUploadSuccess($event,item, 'words_audio_url')">
</app-audio-recorder>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="3" nzFor="words_two">字母组合二</nz-form-label>
<nz-form-control [nzSpan]="6">
<input nz-input type="text" id="words_two" [(ngModel)]="item.words_two" (blur)="save()">
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="3" nzFor="words_two_audio_url">字母组合二发音</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-audio-recorder
[audioUrl]="item.words_two_audio_url" id="words_two_audio_url"
(audioUploaded)="onAudioUploadSuccess($event,item, 'words_two_audio_url')">
</app-audio-recorder>
</nz-form-control>
</nz-form-item>
</div>
<div>
<nz-divider nzText="单词组" nzOrientation="left"></nz-divider>
<nz-form-item>
<nz-form-control [nzSpan]="20" nzOffset="2">
<div *ngFor="let it of wordArr; let i = index" class="card-item" style="padding: 0.5vw;">
<div class="border">
<h5 style="width: 100%; line-height: 40px; text-align: center;"> 单词组-{{i+1}}</h5>
<nz-divider nzText="左侧单词" nzOrientation="left"></nz-divider>
<div nz-form>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="it.left.word_val">单词</nz-form-label>
<nz-form-control [nzSpan]="6">
<input type="text" nz-input placeholder="请录入单词" [(ngModel)]="it.left.word_val" (blur)="saveWordItem(i,'left')">
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="it.left.word_audio_url">发音</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-audio-recorder id="it.left.word_audio_url"
[audioUrl]="it.left.word_audio_url"
(audioUploaded)="onAudioUploadSuccessByItem($event, it.left,'word_audio_url')">
</app-audio-recorder>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<div nz-col [nzSpan]="15" nzOffset="2">
<nz-table [nzData]="it.left.letters" [nzHideOnSinglePage]="true" [nzBordered]="true">
<thead>
<tr>
<th>字母</th>
<th>颜色</th>
<th>是否填空</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of it.left.letters;let j = index">
<td>{{data.letter_val}}</td>
<td>
<nz-select [(ngModel)]="data.letter_color" (ngModelChange)="saveItem()">
<!--<nz-option nzValue="C01" nzLabel="绿色"></nz-option>-->
<nz-option nzValue="C02" nzLabel="红色"></nz-option>
<!--<nz-option nzValue="C03" nzLabel="巧克力色"></nz-option>-->
<nz-option nzValue="C04" nzLabel="黑色"></nz-option>
</nz-select>
</td>
<td>
<nz-select [(ngModel)]="data.is_" (ngModelChange)="saveItem()">
<nz-option nzValue="1" nzLabel="是"></nz-option>
<nz-option nzValue="0" nzLabel="否"></nz-option>
</nz-select>
</td>
</tr>
</tbody>
</nz-table>
</div>
</nz-form-item>
</div>
<button style="margin: 10px;" nz-button nzType="danger" (click)="deleteItem(i)">
<span>删除</span>
</button>
</div>
</div>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control [nzSpan]="3" nzOffset="3" class="add-btn-box">
<button nz-button nzType="dashed" class="add-btn" id="add-btn"
(click)="addItem()">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>添加
</button>
</nz-form-control>
</nz-form-item>
</div>
</div>
</div>
\ No newline at end of file
<!--<app-audio-recorder-->
<!--[audioUrl]="item.audio_url"-->
<!--(audioUploaded)="onAudioUploadSuccess($event)"-->
<!--&gt;</app-audio-recorder>-->
<!--<div *ngFor="let it of picArr; let i = index"-->
<!--nz-col nzSpan="8" >-->
<!--<div class="item-box">-->
<!--<app-upload-image-with-preview-->
<!--style="width: 100%"-->
<!--[picUrl]="it.pic_url"-->
<!--(imageUploaded)="onImageUploadSuccessByItem($event, it)"-->
<!--&gt;</app-upload-image-with-preview>-->
<!--<div style="display: flex; justify-items: center; padding-top: 10px">-->
<!--<app-audio-recorder-->
<!--[audioUrl]="it.audio_url"-->
<!--(audioUploaded)="onAudioUploadSuccessByItem($event, it)">-->
<!--</app-audio-recorder>-->
<!--<button style="margin-left: 10px;" nz-button nzType="danger" (click)="deleteItem(it)">-->
<!--<i nz-icon type="close"></i>-->
<!--</button>-->
<!--</div>-->
<!--</div>-->
<!--&lt;!&ndash;<h5> id-{{i+1}} </h5>&ndash;&gt;-->
<!--&lt;!&ndash;<div style="display: flex; align-items: center; justify-content: center; padding-bottom: 5px">&ndash;&gt;-->
<!--&lt;!&ndash;<input type="text" nz-input placeholder="" [(ngModel)]="it.text" (blur)="saveItem()">&ndash;&gt;-->
<!--&lt;!&ndash;<button style="margin-left: 10px;" nz-button nzType="danger" (click)="deleteItem(it)">&ndash;&gt;-->
<!--&lt;!&ndash;<i nz-icon type="close"></i>&ndash;&gt;-->
<!--&lt;!&ndash;</button>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<app-upload-image-with-preview&ndash;&gt;-->
<!--&lt;!&ndash;style="width: 100%"&ndash;&gt;-->
<!--&lt;!&ndash;[picUrl]="it.pic_url"&ndash;&gt;-->
<!--&lt;!&ndash;(imageUploaded)="onImageUploadSuccessByItem($event, it)"&ndash;&gt;-->
<!--&lt;!&ndash;&gt;</app-upload-image-with-preview>&ndash;&gt;-->
<!--&lt;!&ndash;<div style="display: flex; align-items: center; justify-content: center">&ndash;&gt;-->
<!--&lt;!&ndash;<span style="width: 80px;">&ndash;&gt;-->
<!--&lt;!&ndash;question:&ndash;&gt;-->
<!--&lt;!&ndash;</span>&ndash;&gt;-->
<!--&lt;!&ndash;<app-audio-recorder&ndash;&gt;-->
<!--&lt;!&ndash;[audioUrl]="it['q_audio_url']"&ndash;&gt;-->
<!--&lt;!&ndash;(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'q')">&ndash;&gt;-->
<!--&lt;!&ndash;</app-audio-recorder>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<div style="display: flex; align-items: center; justify-content: center">&ndash;&gt;-->
<!--&lt;!&ndash;<span style="width: 80px;">&ndash;&gt;-->
<!--&lt;!&ndash;answer:&ndash;&gt;-->
<!--&lt;!&ndash;</span>&ndash;&gt;-->
<!--&lt;!&ndash;<app-audio-recorder&ndash;&gt;-->
<!--&lt;!&ndash;[audioUrl]="it['a_audio_url']"&ndash;&gt;-->
<!--&lt;!&ndash;(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'a')">&ndash;&gt;-->
<!--&lt;!&ndash;</app-audio-recorder>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<nz-radio-group [(ngModel)]="it.radioValue" >&ndash;&gt;-->
<!--&lt;!&ndash;<label nz-radio nzValue="A" (click)="radioClick(it, 'A')"> <i nz-icon nzType="check" nzTheme="outline"></i> </label>&ndash;&gt;-->
<!--&lt;!&ndash;<label nz-radio nzValue="B" (click)="radioClick(it, 'B')"> <i nz-icon nzType="close" nzTheme="outline"></i> </label>&ndash;&gt;-->
<!--&lt;!&ndash;</nz-radio-group>&ndash;&gt;-->
<!--</div>-->
<!--<div nz-col nzSpan="8" class="add-btn-box" >-->
<!--&lt;!&ndash;<div style="width: 100%; height: 100%;">&ndash;&gt;-->
<!--<button style=" margin: auto; width: 60%; height: 60%;" nz-button nzType="dashed" class="add-btn"-->
<!--(click)="addPic()">-->
<!--<i nz-icon nzType="plus-circle" nzTheme="outline"></i>-->
<!--Add-->
<!--</button>-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--</div>-->
<!--&lt;!&ndash;<div style="padding-bottom: 30px;">&ndash;&gt;-->
<!--&lt;!&ndash;<h5> title-sound: </h5>&ndash;&gt;-->
<!--&lt;!&ndash;<app-audio-recorder&ndash;&gt;-->
<!--&lt;!&ndash;[audioUrl]="item.contentObj.title_audio_url"&ndash;&gt;-->
<!--&lt;!&ndash;(audioUploaded)="onAudioUploadSuccessByItem($event, item.contentObj, 'title')">&ndash;&gt;-->
<!--&lt;!&ndash;</app-audio-recorder>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<div style="padding-bottom: 30px;">&ndash;&gt;-->
<!--&lt;!&ndash;<h5> bg-sound: </h5>&ndash;&gt;-->
<!--&lt;!&ndash;<app-audio-recorder&ndash;&gt;-->
<!--&lt;!&ndash;[audioUrl]="item.contentObj.bg_audio_url"&ndash;&gt;-->
<!--&lt;!&ndash;(audioUploaded)="onAudioUploadSuccessByItem($event, item.contentObj, 'bg')">&ndash;&gt;-->
<!--&lt;!&ndash;</app-audio-recorder>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<span style="margin-bottom: 20px"> 10 : 23 </span>&ndash;&gt;-->
<!--&lt;!&ndash;<div *ngFor="let it of picArr; let i = index">&ndash;&gt;-->
<!--&lt;!&ndash;<span> pic-{{i + 1}}: </span>&ndash;&gt;-->
<!--&lt;!&ndash;<div style="display: flex; align-items: center; padding-bottom: 20px">&ndash;&gt;-->
<!--&lt;!&ndash;<div style="width: 40%; padding-right: 20px">&ndash;&gt;-->
<!--&lt;!&ndash;<app-upload-image-with-preview&ndash;&gt;-->
<!--&lt;!&ndash;[picUrl]="it.pic_url"&ndash;&gt;-->
<!--&lt;!&ndash;(imageUploaded)="onImageUploadSuccessByItem($event, it)"&ndash;&gt;-->
<!--&lt;!&ndash;&gt;</app-upload-image-with-preview>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<div class="pic-sound-box">&ndash;&gt;-->
<!--&lt;!&ndash;<div nz-row style="width: 50%; padding-bottom: 20px;">&ndash;&gt;-->
<!--&lt;!&ndash;<div *ngFor="let it2 of it.soundArr; let i2 = index" nz-col nzSpan="8">&ndash;&gt;-->
<!--&lt;!&ndash;<label nz-checkbox nzValue="{{'answer_' + (i2 + 1)}}" [(ngModel)]="it2.answer" (ngModelChange)="clickCheckBox()" >{{i2 + 1}}</label>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<div *ngFor="let it2 of it.soundArr; let i2 = index" style="display: flex; align-items: center; padding-bottom: 5px">&ndash;&gt;-->
<!--&lt;!&ndash;<span style="padding-right: 10px">sound-{{i2 + 1}}:</span>&ndash;&gt;-->
<!--&lt;!&ndash;<app-audio-recorder&ndash;&gt;-->
<!--&lt;!&ndash;[audioUrl]="it2.audio_url"&ndash;&gt;-->
<!--&lt;!&ndash;(audioUploaded)="onAudioUploadSuccessByItem($event, it2)">&ndash;&gt;-->
<!--&lt;!&ndash;</app-audio-recorder>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<div style="margin: auto; width: 95%;" nz-row nzType="flex" nzJustify="start" nzAlign="middle">&ndash;&gt;-->
<!--&lt;!&ndash;<div *ngFor="let it of picArr; let i = index"&ndash;&gt;-->
<!--&lt;!&ndash;nz-col nzSpan="8" >&ndash;&gt;-->
<!--&lt;!&ndash;<div class="item-box">&ndash;&gt;-->
<!--&lt;!&ndash;<h5> id-{{i+1}} </h5>&ndash;&gt;-->
<!--&lt;!&ndash;<div style="display: flex; align-items: center; justify-content: center; padding-bottom: 5px">&ndash;&gt;-->
<!--&lt;!&ndash;<input type="text" nz-input placeholder="" [(ngModel)]="it.text" (blur)="saveItem()">&ndash;&gt;-->
<!--&lt;!&ndash;<button style="margin-left: 10px;" nz-button nzType="danger" (click)="deleteItem(it)">&ndash;&gt;-->
<!--&lt;!&ndash;<i nz-icon type="close"></i>&ndash;&gt;-->
<!--&lt;!&ndash;</button>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<app-upload-image-with-preview&ndash;&gt;-->
<!--&lt;!&ndash;style="width: 100%"&ndash;&gt;-->
<!--&lt;!&ndash;[picUrl]="it.pic_url"&ndash;&gt;-->
<!--&lt;!&ndash;(imageUploaded)="onImageUploadSuccessByItem($event, it)"&ndash;&gt;-->
<!--&lt;!&ndash;&gt;</app-upload-image-with-preview>&ndash;&gt;-->
<!--&lt;!&ndash;<div style="display: flex; align-items: center; justify-content: center">&ndash;&gt;-->
<!--&lt;!&ndash;<span style="width: 80px;">&ndash;&gt;-->
<!--&lt;!&ndash;question:&ndash;&gt;-->
<!--&lt;!&ndash;</span>&ndash;&gt;-->
<!--&lt;!&ndash;<app-audio-recorder&ndash;&gt;-->
<!--&lt;!&ndash;[audioUrl]="it['q_audio_url']"&ndash;&gt;-->
<!--&lt;!&ndash;(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'q')">&ndash;&gt;-->
<!--&lt;!&ndash;</app-audio-recorder>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<div style="display: flex; align-items: center; justify-content: center">&ndash;&gt;-->
<!--&lt;!&ndash;<span style="width: 80px;">&ndash;&gt;-->
<!--&lt;!&ndash;answer:&ndash;&gt;-->
<!--&lt;!&ndash;</span>&ndash;&gt;-->
<!--&lt;!&ndash;<app-audio-recorder&ndash;&gt;-->
<!--&lt;!&ndash;[audioUrl]="it['a_audio_url']"&ndash;&gt;-->
<!--&lt;!&ndash;(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'a')">&ndash;&gt;-->
<!--&lt;!&ndash;</app-audio-recorder>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<nz-radio-group [(ngModel)]="it.radioValue" >&ndash;&gt;-->
<!--&lt;!&ndash;<label nz-radio nzValue="A" (click)="radioClick(it, 'A')"> <i nz-icon nzType="check" nzTheme="outline"></i> </label>&ndash;&gt;-->
<!--&lt;!&ndash;<label nz-radio nzValue="B" (click)="radioClick(it, 'B')"> <i nz-icon nzType="close" nzTheme="outline"></i> </label>&ndash;&gt;-->
<!--&lt;!&ndash;</nz-radio-group>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--</div>-->
......@@ -6,3 +6,73 @@
height: 100%;
}
nz-select {
width: 100%;
}
@font-face
{
font-family: 'BRLNSDB';
src: url("../../assets/font/BRLNSDB.TTF") ;
}
@font-face
{
font-family: 'BRLNSB';
src: url("../../assets/font/BRLNSB.TTF") ;
}
@font-face
{
font-family: 'BRLNSR';
src: url("../../assets/font/BRLNSR.TTF") ;
}
@font-face
{
font-family: 'GOTHIC';
src: url("../../assets/font/GOTHIC.TTF") ;
}
@font-face
{
font-family: 'GOTHICB';
src: url("../../assets/font/GOTHICB.TTF") ;
}
@font-face
{
font-family: 'GOTHICBI';
src: url("../../assets/font/GOTHICBI.TTF") ;
}
@font-face
{
font-family: 'GOTHICI';
src: url("../../assets/font/GOTHICI.TTF") ;
}
@font-face
{
font-family: 'MMTextBook';
src: url("../../assets/font/MMTextBook.otf") ;
}
@font-face
{
font-family: 'MMTextBook-Bold';
src: url("../../assets/font/MMTextBook-Bold.otf") ;
}
@font-face
{
font-family: 'MMTextBook-BoldItalic';
src: url("../../assets/font/MMTextBook-BoldItalic.otf") ;
}
@font-face
{
font-family: 'MMTextBook-Italic';
src: url("../../assets/font/MMTextBook-Italic.otf") ;
}
\ No newline at end of file
......@@ -10,10 +10,11 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap
export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 储存数据用
saveKey = "test_0011";
saveKey = "ym009";
// 储存对象
item;
wordArr = [];
constructor(private appRef: ApplicationRef) {
......@@ -24,6 +25,12 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.item = {};
this.item.title = {
t_font_color:'#000000',
t_font:'BRLNSDB',
t_font_size:40
};
// 获取存储的数据
(<any> window).courseware.getData((data) => {
......@@ -31,6 +38,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.item = data;
}
if ( !this.item.wordArr ) {
this.item.wordArr = [];
}
this.init();
this.refresh();
......@@ -49,6 +60,21 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
init() {
//标题
if(!this.item.title){
this.item.title = {
t_font_color:'#000000',
t_font:'BRLNSDB',
t_font_size:40
};
}
if (this.item.wordArr) {
this.wordArr = this.item.wordArr;
} else {
this.wordArr = this.getDefaultWordArr();
this.item.wordArr = this.wordArr;
}
}
......@@ -66,13 +92,15 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
* 储存音频数据
* @param e
*/
onAudioUploadSuccess(e, key) {
this.item[key] = e.url;
onAudioUploadSuccess(e, item, key) {
item[key] = e.url;
this.save();
}
onAudioUploadSuccessByItem(e, item, key) {
item[key] = e.url;
this.save();
}
/**
* 储存数据
......@@ -91,5 +119,79 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}, 1);
}
deleteItem(index) {
if (index !== -1) {
this.wordArr.splice(index, 1);
}
// this.update.emit(this.item);
this.save();
}
addItem() {
let item = this.wordItemData();
this.wordArr.push(item);
this.saveItem();
}
// addLetterItem(letters){
// let letter = this.letterData();
// letters.push(letter);
// this.save();
// }
deleteLetterItem(letters, index){
console.log(letters);
if (index !== -1) {
letters.splice(index, 1);
}
this.save();
}
wordItemData() {
return {
left: {
word_val: '',
word_audio_url: '',
letters: []
}
};
}
// letterData() {
// return {
// letter_val: '',
// letter_color: 'C04',
// is_: false
// };
// }
saveWordItem(index,type) {
let val = this.wordArr[index][type].word_val;
this.wordArr[index][type].letters = [];
for(let i=0;i<val.length;i++){
this.wordArr[index][type].letters.push({
letter_val: val[i],
letter_color: 'C04',
is_: '0'
});
}
this.save();
}
saveItem() {
this.save();
}
getDefaultWordArr() {
let arr = [];
return arr;
}
}
......@@ -864,8 +864,84 @@ export class ShapeRect extends MySprite {
}
}
export class ShapeRoundRect extends MySprite {
radius = 0;
fillColor = '#ffffff';
strokeColor = '#000000';
fill = true;
stroke = false;
lineWidth = 1;
setSize(w, h, r) {
this.width = w;
this.height = h;
this.radius = r;
}
setOutLine(color, lineWidth) {
this.stroke = true;
this.strokeColor = color;
this.lineWidth = lineWidth;
}
drawShape() {
const ctx = this.ctx;
const width = this.width;
const height = this.height;
const radius = this.radius;
ctx.save();
ctx.beginPath(0);
// 从右下角顺时针绘制,弧度从0到1/2PI
ctx.arc(width - radius, height - radius, radius, 0, Math.PI / 2);
// 矩形下边线
ctx.lineTo(radius, height);
// 左下角圆弧,弧度从1/2PI到PI
ctx.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);
// 矩形左边线
ctx.lineTo(0, radius);
// 左上角圆弧,弧度从PI到3/2PI
ctx.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2);
// 上边线
ctx.lineTo(width - radius, 0);
// 右上角圆弧
ctx.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2);
// 右边线
ctx.lineTo(width, height - radius);
ctx.closePath();
if (this.fill) {
ctx.fillStyle = this.fillColor;
ctx.fill();
}
if (this.stroke) {
ctx.lineWidth = this.lineWidth;
ctx.strokeStyle = this.strokeColor;
ctx.stroke();
}
ctx.restore();
}
drawSelf() {
super.drawSelf();
this.drawShape();
}
}
export class ShapeCircle extends MySprite {
fillColor = '#FF0000';
......
......@@ -17,3 +17,62 @@
src: url("../../assets/font/BRLNSDB.TTF") ;
}
@font-face
{
font-family: 'BRLNSB';
src: url("../../assets/font/BRLNSB.TTF") ;
}
@font-face
{
font-family: 'BRLNSR';
src: url("../../assets/font/BRLNSR.TTF") ;
}
@font-face
{
font-family: 'GOTHIC';
src: url("../../assets/font/GOTHIC.TTF") ;
}
@font-face
{
font-family: 'GOTHICB';
src: url("../../assets/font/GOTHICB.TTF") ;
}
@font-face
{
font-family: 'GOTHICBI';
src: url("../../assets/font/GOTHICBI.TTF") ;
}
@font-face
{
font-family: 'GOTHICI';
src: url("../../assets/font/GOTHICI.TTF") ;
}
@font-face
{
font-family: 'MMTextBook';
src: url("../../assets/font/MMTextBook.otf") ;
}
@font-face
{
font-family: 'MMTextBook-Bold';
src: url("../../assets/font/MMTextBook-Bold.otf") ;
}
@font-face
{
font-family: 'MMTextBook-BoldItalic';
src: url("../../assets/font/MMTextBook-BoldItalic.otf") ;
}
@font-face
{
font-family: 'MMTextBook-Italic';
src: url("../../assets/font/MMTextBook-Italic.otf") ;
}
\ No newline at end of file
......@@ -2,8 +2,8 @@ import {Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener
import {
Label,
MySprite, tweenChange,
MySprite, ShapeCircle, ShapeRect, ShapeRoundRect, tweenChange,
getMinScale
} from './Unit';
import {res, resAudio} from './resources';
......@@ -57,18 +57,116 @@ export class PlayComponent implements OnInit, OnDestroy {
canvasLeft;
canvasTop;
saveKey = 'test_0011';
saveKey = 'ym009';
btnLeft;
btnRight;
pic1;
pic2;
canTouch = true;
curPic;
//单词画面数组
word_arr_left = [] ;
word_arr = [];
word_bg_x ;
word_height ;
all_words_loaded = false;
curAudio ;
play = false;
words_bg ;
words_bg_right ;
title_bg ;
wordLoad :{[key:string]:{loaded : boolean;letters:{[key:string]:{loaded:boolean, letter:Label}}}} = {};
setWordLoad(id: string, letterId:string, loaded:boolean, letter: Label):void{
if(!this.wordLoad[id]){
this.wordLoad[id] = {
loaded:false,
letters:{}
}
}
let letters = this.wordLoad[id].letters;
if(!letters[letterId]){
letters[letterId] = {
loaded:loaded,
letter:letter
}
}
//是否存在未加载完成的字母
let flag = false;
for(let tKey in letters){
if(!letters[tKey].loaded){
flag = true;
break;
}
}
if(!flag){
this.wordLoad[id].loaded = true;
}
else{
this.wordLoad[id].loaded = false;
}
}
getWordLoaded(id: string):boolean{
if(!this.wordLoad[id]){
return false;
}
return this.wordLoad[id].loaded;
}
/**
* 检查单词是否加载完成
* @param id 单词id
*/
checkWordLoaded(id: string):void{
if(!this.wordLoad[id]){
return;
}
let letters = this.wordLoad[id].letters;
//是否存在未加载完成的字母
let flag = false;
for(let tKey in letters){
if(!letters[tKey].loaded){
flag = true;
break;
}
}
if(!flag){
this.wordLoad[id].loaded = true;
}
else{
this.wordLoad[id].loaded = false;
}
}
getLetterSpriteFromWordLoaded(id: string){
if(!this.wordLoad[id]){
return;
}
let letters = this.wordLoad[id].letters;
return letters;
}
@HostListener('window:resize', ['$event'])
onResize(event) {
this.winResizeEventStream.next();
......@@ -90,10 +188,8 @@ export class PlayComponent implements OnInit, OnDestroy {
// 初始化 各事件监听
this.initListener();
// 若无数据 则为预览模式 需要填充一些默认数据用来显示
this.initDefaultData();
// 初始化 音频资源
this.initAudio();
// 初始化 图片资源
......@@ -101,10 +197,99 @@ export class PlayComponent implements OnInit, OnDestroy {
// 开始预加载资源
this.load();
// 加载完成播放音乐
this.playAudio("newpage");
}, this.saveKey);
}
/**
* 初始化标题
*/
initTitle(){
const title_bg = new ShapeRect();
title_bg.x = 70;
title_bg.y = 0;
//设置不显示
title_bg.alpha=0;
let title_content = this.data.title;
console.log('title', title_content);
//标题1
let title1;
//标题2
let title2;
if(title_content){
//标题1
title1 = new Label();
title1.text = title_content.t_val1;
title1.textAlign = 'center';
title1.fontSize = title_content.t_font_size;
title1.fontName = title_content.t_font;
title1.fontColor = title_content.t_font_color;
title1.refreshSize();
// title1.setScaleXY(this.mapScale);
title1.x = (title1.width + 30)/2;
title1.y = (title1.height + 30)/2;
//标题2
title2 = new Label();
title2.text = title_content.t_val2;
title2.textAlign = 'center';
title2.fontSize = title_content.t_font_size;
title2.fontName = title_content.t_font;
title2.fontColor = title_content.t_font_color;
title2.refreshSize();
// title2.setScaleXY(this.mapScale);
}
//标题1背景
let title1_bg = new ShapeRect();
title1_bg.fillColor="#f8c224";
//将标题1添加到标题背景里
title_bg.addChild(title1_bg);
//如果标题1存在,则添加;否则则设置默认值
if(title1){
title1_bg.setSize((title1.width + 30) , (title1.height + 30) );
//将标题1添加到标题1背景里
title1_bg.addChild(title1);
}
else{
title1_bg.setSize(60 , 50 );
}
let title_bg_width = title1_bg.width + 100;
//如果标题2存在,则添加到标题背景里
if(title2){
title_bg.addChild(title2);
title_bg_width = title1_bg.width + 20 + title2.width
}
title_bg.setSize(title_bg_width, title1_bg.height);
title_bg.setScaleXY(this.mapScale);
//设置背景1坐标
title1_bg.x = (title_bg.height - title1_bg.width)/2 ;
title1_bg.y = 0;
if(title2){
//设置标题2坐标
title2.x = title1_bg.width + title2.width/2 + 10;
title2.y = title_bg.height/2;
}
this.title_bg = title_bg;
this.renderArr.push(title_bg);
}
ngOnDestroy() {
window['curCtx'] = null;
window.cancelAnimationFrame(this.animationId);
......@@ -123,10 +308,10 @@ export class PlayComponent implements OnInit, OnDestroy {
init() {
this.initCtx();
this.initData();
this.initView();
this.initTitle();
}
initCtx() {
......@@ -289,6 +474,22 @@ export class PlayComponent implements OnInit, OnDestroy {
}
pauseAudio(key, callback = null){
const audio = this.audioObj[key];
if (audio) {
if (callback) {
audio.onended = () => {
callback();
};
}
audio.pause();
}
}
loadResources() {
const pr = [];
......@@ -387,7 +588,12 @@ export class PlayComponent implements OnInit, OnDestroy {
addUrlToAudioObj(key, url = null, vlomue = 1, loop = false, callback = null) {
addUrlToAudioObj(key, url = null, vlomue = 1, loop = false, callback = null, callbackParam = null) {
console.log('add audio', key);
if(!key){
return;
}
const audioObj = this.audioObj;
......@@ -405,37 +611,157 @@ export class PlayComponent implements OnInit, OnDestroy {
audioObj[key] = audio;
audio.addEventListener('ended', function () {
console.log('play ended');
if (callback) {
audio.onended = () => {
callback();
};
callback(callbackParam);
}
}, false);
}
addUrlToImages(url) {
this.rawImages.set(url, url);
}
defaultWordArr(){
return [
{
left: {
word_val: 'at',
word_audio_url: '',
letters: [
{letter_val: "a",letter_color: 'C02',is_: '0'},
{letter_val: "t",letter_color: 'C02',is_: '0'}
]
}
},{
left: {
word_val: 'ate',
word_audio_url: '',
letters: [
{letter_val: "a",letter_color: 'C02',is_: '1'},
{letter_val: "t",letter_color: 'C02',is_: '0'},
{letter_val: "e",letter_color: 'C02',is_: '1'}
]
}
},
{
left: {
word_val: 'rat',
word_audio_url: '',
letters: [
{letter_val: "r",letter_color: 'C04',is_: '0'},
{letter_val: "a",letter_color: 'C02',is_: '0'},
{letter_val: "t",letter_color: 'C02',is_: '0'}
]
}
},{
left: {
word_val: 'ate',
word_audio_url: '',
letters: [
{letter_val: "r",letter_color: 'C04',is_: '0'},
{letter_val: "a",letter_color: 'C02',is_: '1'},
{letter_val: "t",letter_color: 'C02',is_: '0'},
{letter_val: "e",letter_color: 'C02',is_: '1'}
]
}
},
{
left: {
word_val: 'cap',
word_audio_url: '',
letters: [
{letter_val: "c",letter_color: 'C04',is_: '0'},
{letter_val: "a",letter_color: 'C02',is_: '0'},
{letter_val: "p",letter_color: 'C02',is_: '0'}
]
}
},{
left: {
word_val: 'capexxxxxxxxxxxx',
word_audio_url: '',
letters: [
{letter_val: "c",letter_color: 'C04',is_: '0'},
{letter_val: "a",letter_color: 'C02',is_: '1'},
{letter_val: "p",letter_color: 'C02',is_: '0'},
{letter_val: "e",letter_color: 'C02',is_: '1'},
{letter_val: "x",letter_color: 'C02',is_: '1'},
{letter_val: "x",letter_color: 'C02',is_: '1'},
{letter_val: "x",letter_color: 'C02',is_: '1'},
{letter_val: "x",letter_color: 'C02',is_: '1'},
{letter_val: "x",letter_color: 'C02',is_: '1'},
{letter_val: "x",letter_color: 'C02',is_: '1'},
{letter_val: "x",letter_color: 'C02',is_: '1'},
{letter_val: "x",letter_color: 'C02',is_: '1'},
{letter_val: "x",letter_color: 'C02',is_: '1'},
{letter_val: "x",letter_color: 'C02',is_: '1'},
{letter_val: "x",letter_color: 'C02',is_: '1'},
{letter_val: "x",letter_color: 'C02',is_: '1'}
]
}
},
{
left: {
word_val: 'tap',
word_audio_url: '',
letters: [
{letter_val: "t",letter_color: 'C04',is_: '0'},
{letter_val: "a",letter_color: 'C02',is_: '0'},
{letter_val: "p",letter_color: 'C02',is_: '0'}
]
}
},{
left: {
word_val: 'tape',
word_audio_url: '',
letters: [
{letter_val: "t",letter_color: 'C04',is_: '0'},
{letter_val: "a",letter_color: 'C02',is_: '1'},
{letter_val: "p",letter_color: 'C02',is_: '0'},
{letter_val: "e",letter_color: 'C02',is_: '1'}
]
}
}
];
}
/**
* 添加默认数据 便于无数据时的展示
*/
initDefaultData() {
if(!this.data.title){
this.data.title = this.getDefaultTitle();
}
if(!this.data.words){
this.data.words = "ai";
}
if(!this.data.words_two){
this.data.words_two = "ay";
}
if (!this.data.wordArr) {
this.data.wordArr = this.defaultWordArr();
}
this.title_bg = {};
// ======================================================编写区域==========================================================================
this.listenPlaying = false;
this.listenPlayStatus = {};
/**
* 添加默认数据 便于无数据时的展示
*/
initDefaultData() {
if (!this.data.pic_url) {
this.data.pic_url = 'assets/play/default/pic.jpg';
this.data.pic_url_2 = 'assets/play/default/pic.jpg';
}
getDefaultTitle(){
return {
t_val1:'C',
t_val2:'Listen, write circle and read.',
t_font_color:'#000000',
t_font:'BRLNSDB',
t_font_size:40
};
}
......@@ -453,14 +779,31 @@ export class PlayComponent implements OnInit, OnDestroy {
* 添加预加载音频
*/
initAudio() {
// 音效
this.addUrlToAudioObj('click', this.rawAudios.get('click'), 0.3);
this.addUrlToAudioObj('newpage', this.rawAudios.get('newpage'));
// 听力资料
this.addUrlToAudioObj(this.data.listen_audio_url, null,1, false, function(listenPlayStatus){
listenPlayStatus.play.alpha=1;
listenPlayStatus.pasue.alpha = 0;
},this.listenPlayStatus);
// 音频资源
this.addUrlToAudioObj(this.data.audio_url);
this.addUrlToAudioObj(this.data.audio_url_2);
this.addUrlToAudioObj(this.data.title.t_audio_url);
// 音效
this.addUrlToAudioObj('click', this.rawAudios.get('click'), 0.3);
this.addUrlToAudioObj(this.data.words_audio_url);
this.addUrlToAudioObj(this.data.words_two_audio_url);
// 初始化单词音效
for (let i = 0; i < this.data.wordArr.length; ++ i) {
console.log(this.data.wordArr[i]);
let wordLeft = this.data.wordArr[i].left;
if (wordLeft.word_audio_url && wordLeft.word_audio_url != '') {
this.addUrlToAudioObj(wordLeft.word_audio_url);
}
}
}
......@@ -475,13 +818,18 @@ export class PlayComponent implements OnInit, OnDestroy {
const s = Math.min(sx, sy);
this.mapScale = s;
// this.mapScale = sx;
// this.mapScale = sy;
this.renderArr = [];
this.word_arr_left = [] ;
this.word_arr = [];
this.word_bg_x = 200 ;
this.word_height = 0 ;
this.renderArr = [];
this.all_words_loaded = false;
this.wordLoad = {};
this.play = false ;
}
......@@ -501,147 +849,380 @@ export class PlayComponent implements OnInit, OnDestroy {
initBottomPart() {
const btnLeft = new MySprite();
btnLeft.init(this.images.get('btn_left'));
btnLeft.x = this.canvasWidth - 150 * this.mapScale;
btnLeft.y = this.canvasHeight - 100 * this.mapScale;
const btnPlay = new MySprite();
btnPlay.init(this.images.get('play'));
btnPlay.x = this.canvasWidth - 50 * this.mapScale;
btnPlay.y = this.canvasHeight - 50 * this.mapScale;
btnLeft.setScaleXY(this.mapScale);
btnPlay.setScaleXY(this.mapScale);
btnPlay.alpha = 1;
this.renderArr.push(btnLeft);
this.renderArr.push(btnPlay);
this.btnLeft = btnLeft;
this.listenPlayBtn = btnPlay;
this.listenPlayStatus.play = btnPlay;
const btnRight = new MySprite();
btnRight.init(this.images.get('btn_right'));
btnRight.x = this.canvasWidth - 50 * this.mapScale;
btnRight.y = this.canvasHeight - 100 * this.mapScale;
btnRight.setScaleXY(this.mapScale);
this.renderArr.push(btnRight);
const btnPause = new MySprite();
btnPause.init(this.images.get('pause'));
btnPause.x = btnPlay.x;
btnPause.y = btnPlay.y;
btnPause.alpha = 0;
btnPause.setScaleXY(this.mapScale);
this.btnRight = btnRight;
this.renderArr.push(btnPause);
this.listenPauseBtn = btnPause;
this.listenPlayStatus.pasue = btnPause;
}
body_bg;
body_bg_right;
initPic() {
const maxW = this.canvasWidth * 0.7;
this.body_bg = new ShapeRoundRect();
this.body_bg_right = new ShapeRoundRect();
// 初始化单词显示
this.initWord();
this.body_bg.setSize(480*this.mapScale, 520*this.mapScale, 30*this.mapScale) ;
this.body_bg.x = (this.canvasWidth - 1000*this.mapScale) / 2 ;
this.body_bg.y = this.canvasHeight - this.body_bg.height - (this.canvasHeight - this.body_bg.height)/3 ;
this.body_bg.setOutLine('#faebad',4) ;
this.body_bg_right.setSize(480*this.mapScale, 520*this.mapScale, 30*this.mapScale) ;
this.body_bg_right.x = this.body_bg.x+this.body_bg.width+40*this.mapScale;
this.body_bg_right.y = this.canvasHeight - this.body_bg_right.height - (this.canvasHeight - this.body_bg_right.height)/3 ;
this.body_bg_right.setOutLine('#faebad',4) ;
// this.body_bg.setScaleXY(this.mapScale);
this.renderArr.push(this.body_bg);
this.renderArr.push(this.body_bg_right);
const words_bg = new ShapeCircle();
words_bg.setRadius(50);
words_bg.fillColor = '#fdcd00' ;
words_bg.x = this.body_bg.width / 2 ;
words_bg.y = 0;
const words_content = new Label();
words_content.text = this.data.words;
words_content.textAlign = 'center';
words_content.fontSize = 50;
words_content.fontName = 'GOTHICB';
words_content.fontWeight = 600;
words_content.fontColor = '#ab5a23';
words_content.refreshSize();
words_bg.addChild(words_content);
words_bg.setScaleXY(this.mapScale);
const words_bg_right = new ShapeCircle();
words_bg_right.setRadius(50);
words_bg_right.fillColor = '#ab5a23' ;
words_bg_right.x = this.body_bg_right.width / 2 ;
words_bg_right.y = 0;
const words_content_right = new Label();
words_content_right.text = this.data.words_two;
words_content_right.textAlign = 'center';
words_content_right.fontSize = 50;
words_content_right.fontName = 'GOTHICB';
words_content_right.fontWeight = 600;
words_content_right.fontColor = '#fdcd00';
words_content_right.refreshSize();
words_bg_right.addChild(words_content_right);
words_bg_right.setScaleXY(this.mapScale);
this.body_bg.addChild(words_bg);
this.words_bg = words_bg ;
this.body_bg_right.addChild(words_bg_right);
this.words_bg_right = words_bg_right ;
const pic1 = new MySprite();
pic1.init(this.images.get(this.data.pic_url));
pic1.x = this.canvasWidth / 2;
pic1.y = this.canvasHeight / 2;
pic1.setScaleXY(maxW / pic1.width);
}
this.renderArr.push(pic1);
this.pic1 = pic1;
/**
* 初始化单词显示
*/
initWord() {
this.drawWordSprite();
}
cricleNumber(num){
const bg = new ShapeCircle();
bg.setRadius(20);
bg.fillColor = '#f9ebb0' ;
const words_content = new Label();
words_content.text = num;
words_content.textAlign = 'center';
words_content.fontSize = 25;
words_content.fontName = 'GOTHICB';
words_content.fontWeight = 600;
words_content.fontColor = '#fff';
words_content.refreshSize();
bg.addChild(words_content);
bg.setScaleXY(this.mapScale);
return bg;
}
const label1 = new Label();
label1.text = this.data.text;
label1.textAlign = 'center';
label1.fontSize = 50;
label1.fontName = 'BRLNSDB';
label1.fontColor = '#ffffff';
pic1.addChild(label1);
/**
* 绘画单词
*/
word_bg_groups = [];
drawWordSprite() {
const getWordSprite = (index , x , y) => {
let letterFontSize = 40;
// 单词背景
let word_bg_group = new ShapeRect();
word_bg_group.fillColor = '#ffffff' ;
word_bg_group.x = (x + 60) * this.mapScale;
word_bg_group.y = (y + 80) * this.mapScale;
let start = this.cricleNumber(index+1);
start.y = start.height / 2 ;
start.x = start.width / 2;
word_bg_group.addChild(start) ;
let startWidth = 40;
//单词
let word_bg = new ShapeRect();
word_bg.fillColor = 'transparent' ;
word_bg.x = startWidth ; //序号间距
word_bg.y = 0;
let word_content = this.data.wordArr[index];
let totalWidth = 0;
let height = 0;
let letter_spr_arr = [];
for(let i = 0; i < word_content.left.letters.length; ++ i) {
//字母
let letter = word_content.left.letters[i];
// console.log('letter:',letter) ;
let letter_spr = new Label();
letter_spr.text = letter.letter_val;
if(letter.is_=="0"){
//设置不显示
letter_spr.visible = true;
}else{
word_bg["wordLoaded"] = false;
//设置不显示
letter_spr.visible = false;
}
letter_spr.textAlign = 'left';
// letter_spr.fontSize = word_content.word_font_size ? word_content.word_font_size : 110;
letter_spr.fontSize = letterFontSize;
letter_spr.fontName = 'MMTextBook';
letter_spr.fontColor = this.getColor(letter.letter_color);
letter_spr.refreshSize();
letter_spr_arr.push(letter_spr);
//设置坐标
letter_spr.x = letter_spr.width/2+totalWidth+5;
letter_spr.y = letter_spr.height/2;
if(letter.is_=="1"){
let lts_ = new Label();
lts_.text = "_";
lts_.textAlign = 'left';
lts_.fontSize = letterFontSize;
lts_.fontName = 'MMTextBook';
lts_.fontColor = this.getColor(letter.letter_color);
lts_.x = letter_spr.x;
lts_.y = letter_spr.y+2;
lts_.visible = true;
word_bg.addChild(lts_);
}
height = letter_spr.height;
if(index === 0){
this.word_height = height ;
}
totalWidth += letter_spr.width+10;
word_bg.addChild(letter_spr);
}
word_bg.setSize(totalWidth, height);
// let minScale = getMinScale(word_bg, 120);
// word_bg.setScaleXY(minScale);
word_bg_group.addChild(word_bg);
word_bg_group.setSize((totalWidth+startWidth), height);
if(word_bg_group.width>350){
word_bg_group.setScaleXY(getMinScale(word_bg_group, 350)*this.mapScale);
}else{
word_bg_group.setScaleXY(this.mapScale);
}
const pic2 = new MySprite();
pic2.init(this.images.get(this.data.pic_url_2));
pic2.x = this.canvasWidth / 2 + this.canvasWidth;
pic2.y = this.canvasHeight / 2;
pic2.setScaleXY(maxW / pic2.width);
if(index<4){
this.word_arr_left.push(word_bg);
this.body_bg.addChild(word_bg_group);
}else{
this.word_arr.push(word_bg);
this.body_bg_right.addChild(word_bg_group);
}
this.word_bg_groups.push(word_bg_group);
};
this.renderArr.push(pic2);
this.pic2 = pic2;
//单词个数
let wordNum = this.data.wordArr.length;
// console.log('line: ', line) ;
for (let i = 0; i < wordNum; i++) {
let x = 0;
let y = this.word_height*i*2.7;
if(i>3){
y = this.word_height*(i-4)*2.7;
}
this.curPic = pic1;
getWordSprite(i , x , y);
}
}
/**
* 根据颜色id获取对应的颜色
* @param colorId 颜色id
*/
getColor(colorId){
let color = "#000000";
switch(colorId){
case "C01":
color = "#008000";
break;
case "C02":
color = "#FF0000";
break;
case "C03":
color = "#D2691E";
break;
case "C04":
color = "#000000";
break;
}
btnLeftClicked() {
return color;
}
this.lastPage();
pauseClicked() {
if(this.curAudio){
if(this.play){
this.curAudio.pause() ;
this.play = false ;
}else {
this.curAudio.play() ;
this.play = true ;
}
}
}
btnRightClicked() {
this.nextPage();
}
//听力材播放按钮
listenPlayBtn;
lastPage() {
//听力材暂停按钮
listenPauseBtn;
listenPlaying = false;
listenPlayStatus;
mapDown(event) {
if (this.curPic == this.pic1) {
if (!this.canTouch) {
return;
}
this.canTouch = false;
const moveLen = this.canvasWidth;
tweenChange(this.pic1, {x: this.pic1.x + moveLen}, 1);
tweenChange(this.pic2, {x: this.pic2.x + moveLen}, 1, () => {
this.canTouch = true;
this.curPic = this.pic1;
});
if (this.checkClickTarget(this.title_bg)) {
this.playAudio(this.data.title.t_audio_url) ;
return ;
}
nextPage() {
if (this.checkClickTarget(this.words_bg)) {
this.playAudio(this.data.words_audio_url) ;
return ;
}
if (this.curPic == this.pic2) {
return;
if (this.checkClickTarget(this.words_bg_right)) {
this.playAudio(this.data.words_two_audio_url) ;
return ;
}
this.canTouch = false;
for(let i = 0; i < this.word_arr_left.length; ++ i){
let word = this.word_arr_left[i];
// console.log('word', word) ;
if (this.checkClickTarget(word)) {
// 获取是否加载完成
let loaded = word.wordLoaded;
// 未加载,不触发音效,加载单词
if (!loaded) {
let letters:Array<Label> = word.children.slice(1);
for (let j=0; j<letters.length;j++) {
let labelItem = letters[j];
if(!labelItem.visible){
labelItem.visible = true;
}
}
word.wordLoaded = true;
return ;
}
this.playAudio(this.data.wordArr[i].left.word_audio_url);
return ;
}
const moveLen = this.canvasWidth;
tweenChange(this.pic1, {x: this.pic1.x - moveLen}, 1);
tweenChange(this.pic2, {x: this.pic2.x - moveLen}, 1, () => {
this.canTouch = true;
this.curPic = this.pic2;
});
}
pic1Clicked() {
this.playAudio(this.data.audio_url);
for(let i = 0; i < this.word_arr.length; ++ i){
let word = this.word_arr[i];
// console.log('word', word) ;
if (this.checkClickTarget(word)) {
// 获取是否加载完成
let loaded = word.wordLoaded;
// 未加载,不触发音效,加载单词
if (!loaded) {
let letters:Array<Label> = word.children.slice(1);
for (let j=0; j<letters.length;j++) {
let labelItem = letters[j];
if(!labelItem.visible){
labelItem.visible = true;
}
}
word.wordLoaded = true;
return ;
}
this.playAudio(this.data.wordArr[i+4].left.word_audio_url);
return ;
}
pic2Clicked() {
this.playAudio(this.data.audio_url_2);
}
if (this.checkClickTarget(this.listenPlayBtn) && !this.listenPlaying) {
this.listenPlayBtn.alpha = 0;
this.listenPauseBtn.alpha = 1;
this.playAudio(this.data.listen_audio_url);
mapDown(event) {
this.listenPlaying = true;
if (!this.canTouch) {
return;
}
if ( this.checkClickTarget(this.btnLeft) ) {
this.btnLeftClicked();
return;
}
if (this.checkClickTarget(this.listenPauseBtn) && this.listenPlaying) {
if ( this.checkClickTarget(this.btnRight) ) {
this.btnRightClicked();
return;
}
this.listenPlayBtn.alpha = 1;
if ( this.checkClickTarget(this.pic1) ) {
this.pic1Clicked();
return;
}
this.listenPauseBtn.alpha = 0;
this.pauseAudio(this.data.listen_audio_url);
this.listenPlaying = false;
if ( this.checkClickTarget(this.pic2) ) {
this.pic2Clicked();
return;
}
......
......@@ -3,6 +3,8 @@ const res = [
// ['bg', "assets/play/bg.jpg"],
['btn_left', "assets/play/btn_left.png"],
['btn_right', "assets/play/btn_right.png"],
['pause', "assets/play/pause.png"],
['play', "assets/play/play.png"]
// ['text_bg', "assets/play/text_bg.png"],
];
......@@ -12,6 +14,7 @@ const res = [
const resAudio = [
['click', "assets/play/music/click.mp3"],
['newpage', "assets/play/music/newpage.mp3"]
];
......
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