Commit 97c62bdc authored by liujiangnan's avatar liujiangnan

模板开发完成

parent ffcc9f93
...@@ -3,47 +3,78 @@ ...@@ -3,47 +3,78 @@
<div nz-col nzOffset='4'><h1 nz-title>课程内容编辑</h1></div> <div nz-col nzOffset='4'><h1 nz-title>课程内容编辑</h1></div>
</div> </div>
<div nz-form> <div nz-form>
<div> <div id='title-anchor'>
<nz-divider nzText="课程标题" nzOrientation="left"></nz-divider> <nz-divider nzText="课程名称" nzOrientation="left"></nz-divider>
<nz-form-item> <nz-form-item>
<nz-form-label [nzSpan]="3" nzFor="title_left">标题左半部分</nz-form-label> <nz-form-label [nzSpan]="3" nzFor="t_val1">标题1</nz-form-label>
<nz-form-control [nzSpan]="6"> <nz-form-control [nzSpan]="6">
<input nz-input type="text" id="title_left" placeholder="C" [(ngModel)]="item.title_left" (blur)="save()"> <nz-input-group nzAddOnBefore="Part">
</nz-form-control> <input type="text" id="t_val1" nz-input [(ngModel)]="item.title.t_val1" (blur)="save()">
</nz-form-item> </nz-input-group>
<nz-form-item> </nz-form-control>
<nz-form-label [nzSpan]="3" nzFor="title_right">标题右半部分</nz-form-label> </nz-form-item>
<nz-form-control [nzSpan]="6"> <nz-form-item>
<input nz-input type="text" id="title_right" placeholder="Listen write and read" [(ngModel)]="item.title_right" (blur)="save()"> <nz-form-label [nzSpan]="3" nzFor="t_val2">标题2</nz-form-label>
</nz-form-control> <nz-form-control [nzSpan]="6">
</nz-form-item> <input nz-input type="text" id="t_val2" [(ngModel)]="item.title.t_val2" (blur)="save()">
<nz-form-item> </nz-form-control>
<nz-form-label [nzSpan]="3" nzFor="title_color">标题字体颜色</nz-form-label> </nz-form-item>
<nz-form-control [nzSpan]="6"> <nz-form-item>
<nz-select [(ngModel)]="item.title_color" nzAllowClear nzPlaceHolder="Please select the color" (ngModelChange)="saveItem()"> <nz-form-label [nzSpan]="3" nzFor="t_audio_url">发音</nz-form-label>
<nz-option nzValue="C01" nzLabel="绿色"></nz-option> <nz-form-control [nzSpan]="6">
<nz-option nzValue="C02" nzLabel="红色"></nz-option> <app-audio-recorder
<nz-option nzValue="C03" nzLabel="巧克力色"></nz-option> [audioUrl]="item.title.t_audio_url" id="t_audio_url"
<nz-option nzValue="C04" nzLabel="黑色"></nz-option> (audioUploaded)="onAudioUploadSuccess($event, item.title, 't_audio_url')">
</nz-select> </app-audio-recorder>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
<nz-form-item> <nz-form-item>
<nz-form-label [nzSpan]="3" nzFor="title_font_size">标题字体大小</nz-form-label> <nz-form-label [nzSpan]="3" nzFor="t_font_size">字体大小</nz-form-label>
<nz-form-control [nzSpan]="3"> <nz-form-control [nzSpan]="6">
<nz-input-number [(ngModel)]="item.title_font_size" [nzMin]="1" [nzStep]="1" (blur)="saveItem()"></nz-input-number> <nz-input-number [(ngModel)]="item.title.t_font_size" [nzMin]="1" [nzStep]="1" (blur)="save()"></nz-input-number>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
<nz-form-item> <nz-form-item>
<nz-form-label [nzSpan]="3" nzFor="title_audio_url">标题发音</nz-form-label> <nz-form-label [nzSpan]="3" nzFor="t_font">字体</nz-form-label>
<nz-form-control [nzSpan]="6"> <nz-form-control [nzSpan]="4">
<app-audio-recorder <nz-select [(ngModel)]="item.title.t_font" [nzShowSearch]='true' nzAllowClear nzPlaceHolder="Please select the font" (ngModelChange)="save()">
[audioUrl]="item.title_audio_url" id="title_audio_url" <nz-option nzValue="BRLNSB" nzLabel="BRLNSB"></nz-option>
(audioUploaded)="onAudioUploadSuccess($event, 'title_audio_url')"> <nz-option nzValue="BRLNSDB" nzLabel="BRLNSDB"></nz-option>
</app-audio-recorder> <nz-option nzValue="BRLNSR" nzLabel="BRLNSR"></nz-option>
</nz-form-control> <nz-option nzValue="GOTHIC" nzLabel="GOTHIC"></nz-option>
</nz-form-item> <nz-option nzValue="GOTHICB" nzLabel="GOTHICB"></nz-option>
</div> <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 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> <div>
<nz-divider nzText="字母(组合)" nzOrientation="left"></nz-divider> <nz-divider nzText="字母(组合)" nzOrientation="left"></nz-divider>
<nz-form-item> <nz-form-item>
...@@ -57,31 +88,24 @@ ...@@ -57,31 +88,24 @@
<nz-form-control [nzSpan]="6"> <nz-form-control [nzSpan]="6">
<app-audio-recorder <app-audio-recorder
[audioUrl]="item.words_audio_url" id="words_audio_url" [audioUrl]="item.words_audio_url" id="words_audio_url"
(audioUploaded)="onAudioUploadSuccess($event, 'words_audio_url')"> (audioUploaded)="onAudioUploadSuccess($event,item, 'words_audio_url')">
</app-audio-recorder> </app-audio-recorder>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</div> </div>
<div> <div>
<nz-divider nzText="单词" nzOrientation="left"></nz-divider> <nz-divider nzText="单词组" nzOrientation="left"></nz-divider>
<nz-form-item> <nz-form-item>
<nz-form-control [nzSpan]="3" nzOffset="3" class="add-btn-box"> <nz-form-control [nzSpan]="20" nzOffset="2">
<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>
<nz-form-item>
<nz-form-control [nzSpan]="15" nzOffset="3">
<div *ngFor="let it of wordArr; let i = index" class="card-item" style="padding: 0.5vw;"> <div *ngFor="let it of wordArr; let i = index" class="card-item" style="padding: 0.5vw;">
<div class="border"> <div class="border">
<h5 style="width: 100%; line-height: 40px; text-align: center;"> 单词-{{i+1}}</h5> <h5 style="width: 100%; line-height: 40px; text-align: center;"> 单词组-{{i+1}}</h5>
<nz-divider nzText="左侧单词" nzOrientation="left"></nz-divider>
<div nz-form> <div nz-form>
<nz-form-item> <nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="it.left.word_val">单词</nz-form-label> <nz-form-label [nzSpan]="6" nzFor="it.left.word_val">单词</nz-form-label>
<nz-form-control [nzSpan]="6"> <nz-form-control [nzSpan]="6">
<input type="text" nz-input placeholder="请录入单词" [(ngModel)]="it.left.word_val" (blur)="saveItem()"> <input type="text" nz-input placeholder="请录入单词" [(ngModel)]="it.left.word_val" (blur)="saveWordItem(i,'left')">
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
<nz-form-item> <nz-form-item>
...@@ -92,46 +116,22 @@ ...@@ -92,46 +116,22 @@
(audioUploaded)="onAudioUploadSuccessByItem($event, it.left,'word_audio_url')"> (audioUploaded)="onAudioUploadSuccessByItem($event, it.left,'word_audio_url')">
</app-audio-recorder> </app-audio-recorder>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
<!--<nz-form-item>-->
<!--<nz-form-label [nzSpan]="6" nzFor="word_font_size">字体大小</nz-form-label>-->
<!--<nz-form-control [nzSpan]="6">-->
<!--<nz-input-number [(ngModel)]="it.word_font_size" [nzMin]="1" [nzStep]="1" (blur)="saveItem()"></nz-input-number>-->
<!--</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">
<button nz-button nzType="dashed" class="add-btn" id="add-btn"
(click)="addLetterItem(it.left.letters)">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>添加
</button>
</nz-form-control>
</nz-form-item>
<nz-form-item> <nz-form-item>
<div nz-col [nzSpan]="22" nzOffset="1"> <div nz-col [nzSpan]="15" nzOffset="2">
<nz-table #lettersTable [nzData]="it.left.letters" [nzHideOnSinglePage]="true" [nzBordered]="true"> <nz-table [nzData]="it.left.letters" [nzHideOnSinglePage]="true" [nzBordered]="true">
<thead> <thead>
<tr> <tr>
<th>序号</th> <th>字母</th>
<th>字母(组合)</th>
<!--<th>发音</th>-->
<th>颜色</th> <th>颜色</th>
<th>操作</th> <th>是否填空</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr *ngFor="let data of it.left.letters;let j = index"> <tr *ngFor="let data of it.left.letters;let j = index">
<td>{{j+1}}</td> <td>{{data.letter_val}}</td>
<td><input type="text" nz-input placeholder="请录入字母(组合)" [(ngModel)]="data.letter_val" (blur)="saveItem()"></td>
<!--<td>-->
<!--<app-audio-recorder id="data.letter_audio_url"-->
<!--[audioUrl]="data.letter_audio_url"-->
<!--(audioUploaded)="onAudioUploadSuccessByItem($event, data, 'letter_audio_url')">-->
<!--</app-audio-recorder>-->
<!--</td>-->
<td> <td>
<nz-select [(ngModel)]="data.letter_color" nzAllowClear nzPlaceHolder="Please select the color" (ngModelChange)="saveItem()"> <nz-select [(ngModel)]="data.letter_color" (ngModelChange)="saveItem()">
<!--<nz-option nzValue="C01" nzLabel="绿色"></nz-option>--> <!--<nz-option nzValue="C01" nzLabel="绿色"></nz-option>-->
<nz-option nzValue="C02" nzLabel="红色"></nz-option> <nz-option nzValue="C02" nzLabel="红色"></nz-option>
<!--<nz-option nzValue="C03" nzLabel="巧克力色"></nz-option>--> <!--<nz-option nzValue="C03" nzLabel="巧克力色"></nz-option>-->
...@@ -139,8 +139,11 @@ ...@@ -139,8 +139,11 @@
</nz-select> </nz-select>
</td> </td>
<td> <td>
<a (click)="deleteLetterItem(it.left.letters, j)">delete</a> <nz-select [(ngModel)]="data.is_" (ngModelChange)="saveItem()">
</td> <nz-option nzValue="1" nzLabel="是"></nz-option>
<nz-option nzValue="0" nzLabel="否"></nz-option>
</nz-select>
</td>
</tr> </tr>
</tbody> </tbody>
</nz-table> </nz-table>
...@@ -148,11 +151,12 @@ ...@@ -148,11 +151,12 @@
</nz-form-item> </nz-form-item>
</div> </div>
<nz-divider nzText="右侧单词" nzOrientation="left"></nz-divider>
<div nz-form> <div nz-form>
<nz-form-item> <nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="it.right.word_val">单词</nz-form-label> <nz-form-label [nzSpan]="6" nzFor="it.right.word_val">单词</nz-form-label>
<nz-form-control [nzSpan]="6"> <nz-form-control [nzSpan]="6">
<input type="text" nz-input placeholder="请录入单词" [(ngModel)]="it.right.word_val" (blur)="saveItem()"> <input type="text" nz-input placeholder="请录入单词" [(ngModel)]="it.right.word_val" (blur)="saveWordItem(i,'right')">
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
<nz-form-item> <nz-form-item>
...@@ -163,55 +167,32 @@ ...@@ -163,55 +167,32 @@
(audioUploaded)="onAudioUploadSuccessByItem($event, it.right,'word_audio_url')"> (audioUploaded)="onAudioUploadSuccessByItem($event, it.right,'word_audio_url')">
</app-audio-recorder> </app-audio-recorder>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
<!--<nz-form-item>-->
<!--<nz-form-label [nzSpan]="6" nzFor="word_font_size">字体大小</nz-form-label>-->
<!--<nz-form-control [nzSpan]="6">-->
<!--<nz-input-number [(ngModel)]="it.word_font_size" [nzMin]="1" [nzStep]="1" (blur)="saveItem()"></nz-input-number>-->
<!--</nz-form-control>-->
<!--</nz-form-item>-->
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="it.right.word_audio_url">单词字组(组合)</nz-form-label>
<nz-form-control [nzSpan]="6">
<button nz-button nzType="dashed" class="add-btn" id="add-btn"
(click)="addLetterItem(it.right.letters)">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>添加
</button>
</nz-form-control>
</nz-form-item>
<nz-form-item> <nz-form-item>
<div nz-col [nzSpan]="22" nzOffset="1"> <div nz-col [nzSpan]="22" nzOffset="1">
<nz-table #lettersTable [nzData]="it.right.letters" [nzHideOnSinglePage]="true" [nzBordered]="true"> <nz-table [nzData]="it.right.letters" [nzHideOnSinglePage]="true" [nzBordered]="true">
<thead> <thead>
<tr> <tr>
<th>序号</th> <th>字母</th>
<th>字母(组合)</th>
<!--<th>发音</th>-->
<th>颜色</th> <th>颜色</th>
<th>操作</th> <th>是否填空</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr *ngFor="let data of it.right.letters;let j = index"> <tr *ngFor="let data of it.right.letters;let j = index">
<td>{{j+1}}</td> <td>{{data.letter_val}}</td>
<td><input type="text" nz-input placeholder="请录入字母(组合)" [(ngModel)]="data.letter_val" (blur)="saveItem()"></td>
<!--<td>-->
<!--<app-audio-recorder id="data.letter_audio_url"-->
<!--[audioUrl]="data.letter_audio_url"-->
<!--(audioUploaded)="onAudioUploadSuccessByItem($event, data, 'letter_audio_url')">-->
<!--</app-audio-recorder>-->
<!--</td>-->
<td> <td>
<nz-select [(ngModel)]="data.letter_color" nzAllowClear nzPlaceHolder="Please select the color" (ngModelChange)="saveItem()"> <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="C02" nzLabel="红色"></nz-option>
<!--<nz-option nzValue="C03" nzLabel="巧克力色"></nz-option>-->
<nz-option nzValue="C04" nzLabel="黑色"></nz-option> <nz-option nzValue="C04" nzLabel="黑色"></nz-option>
</nz-select> </nz-select>
</td> </td>
<td> <td>
<a (click)="deleteLetterItem(it.right.letters, j)">delete</a> <nz-select [(ngModel)]="data.is_" (ngModelChange)="saveItem()">
</td> <nz-option nzValue="1" nzLabel="是"></nz-option>
<nz-option nzValue="0" nzLabel="否"></nz-option>
</nz-select>
</td>
</tr> </tr>
</tbody> </tbody>
</nz-table> </nz-table>
...@@ -225,298 +206,14 @@ ...@@ -225,298 +206,14 @@
</div> </div>
</nz-form-control> </nz-form-control>
</nz-form-item> </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> </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>-->
...@@ -10,3 +10,69 @@ ...@@ -10,3 +10,69 @@
nz-select { nz-select {
width: 100%; 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
...@@ -25,6 +25,12 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -25,6 +25,12 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.item = {}; this.item = {};
this.item.title = {
t_font_color:'#000000',
t_font:'BRLNSDB',
t_font_size:40
};
// 获取存储的数据 // 获取存储的数据
(<any> window).courseware.getData((data) => { (<any> window).courseware.getData((data) => {
...@@ -53,6 +59,16 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -53,6 +59,16 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
init() { init() {
//标题
if(!this.item.title){
this.item.title = {
t_font_color:'#000000',
t_font:'BRLNSDB',
t_font_size:40
};
}
if (this.item.wordArr) { if (this.item.wordArr) {
this.wordArr = this.item.wordArr; this.wordArr = this.item.wordArr;
} else { } else {
...@@ -76,14 +92,12 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -76,14 +92,12 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
* 储存音频数据 * 储存音频数据
* @param e * @param e
*/ */
onAudioUploadSuccess(e, key) { onAudioUploadSuccess(e, item, key) {
item[key] = e.url;
this.item[key] = e.url;
this.save(); this.save();
} }
onAudioUploadSuccessByItem(e, item, key) { onAudioUploadSuccessByItem(e, item, key) {
console.log(item);
item[key] = e.url; item[key] = e.url;
this.save(); this.save();
} }
...@@ -121,14 +135,14 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -121,14 +135,14 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.saveItem(); this.saveItem();
} }
addLetterItem(letters){ // addLetterItem(letters){
let letter = this.letterData(); // let letter = this.letterData();
letters.push(letter); // letters.push(letter);
this.save(); // this.save();
} // }
deleteLetterItem(letters, index){ deleteLetterItem(letters, index){
console.log(letters); console.log(letters);
...@@ -154,11 +168,25 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -154,11 +168,25 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}; };
} }
letterData() { // letterData() {
return { // return {
letter_val: '', // letter_val: '',
letter_color: 'C04' // 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() { saveItem() {
......
...@@ -609,7 +609,7 @@ export class Label extends MySprite { ...@@ -609,7 +609,7 @@ export class Label extends MySprite {
this.ctx.font = `${this.fontSize}px ${this.fontName}`; this.ctx.font = `${this.fontSize}px ${this.fontName}`;
this.ctx.textAlign = this.textAlign; this.ctx.textAlign = this.textAlign;
this.ctx.textBaseline = 'middle'; this.ctx.textBaseline = 'middle';
this.ctx.fontWeight = this.fontWeight; this.ctx.fontWeight = this.fontWeight;
if (this._outlineFlag) { if (this._outlineFlag) {
this.ctx.lineWidth = this._outLineWidth; this.ctx.lineWidth = this._outLineWidth;
...@@ -864,7 +864,7 @@ export class ShapeRect extends MySprite { ...@@ -864,7 +864,7 @@ export class ShapeRect extends MySprite {
} }
} }
export class ShapeRectNew extends MySprite { export class ShapeRoundRect extends MySprite {
radius = 0; radius = 0;
......
...@@ -17,3 +17,62 @@ ...@@ -17,3 +17,62 @@
src: url("../../assets/font/BRLNSDB.TTF") ; 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 ...@@ -2,8 +2,8 @@ import {Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener
import { import {
Label, Label,
MySprite, ShapeCircle, ShapeRect, ShapeRectNew, tweenChange, MySprite, ShapeCircle, ShapeRect, ShapeRoundRect, tweenChange,
getMinScale
} from './Unit'; } from './Unit';
import {res, resAudio} from './resources'; import {res, resAudio} from './resources';
...@@ -58,12 +58,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -58,12 +58,7 @@ export class PlayComponent implements OnInit, OnDestroy {
canvasTop; canvasTop;
saveKey = 'test_008'; saveKey = 'test_008';
pause;
btnLeft;
btnRight;
pic1;
pic2;
canTouch = true; canTouch = true;
...@@ -191,11 +186,9 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -191,11 +186,9 @@ export class PlayComponent implements OnInit, OnDestroy {
// console.log('data:' , data); // console.log('data:' , data);
// 初始化 各事件监听 // 初始化 各事件监听
this.initListener(); this.initListener();
// 若无数据 则为预览模式 需要填充一些默认数据用来显示 // 若无数据 则为预览模式 需要填充一些默认数据用来显示
this.initDefaultData(); this.initDefaultData();
// 初始化 音频资源 // 初始化 音频资源
this.initAudio(); this.initAudio();
// 初始化 图片资源 // 初始化 图片资源
...@@ -203,6 +196,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -203,6 +196,8 @@ export class PlayComponent implements OnInit, OnDestroy {
// 开始预加载资源 // 开始预加载资源
this.load(); this.load();
// 加载完成播放音乐 // 加载完成播放音乐
this.playAudio("newpage"); this.playAudio("newpage");
...@@ -210,6 +205,90 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -210,6 +205,90 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
/**
* 初始化标题
*/
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="#FFA500";
//将标题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() { ngOnDestroy() {
window['curCtx'] = null; window['curCtx'] = null;
window.cancelAnimationFrame(this.animationId); window.cancelAnimationFrame(this.animationId);
...@@ -227,11 +306,11 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -227,11 +306,11 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
init() { init() {
this.initCtx();
this.initCtx();
this.initData(); this.initData();
this.initView(); this.initView();
this.initTitle();
} }
initCtx() { initCtx() {
...@@ -389,16 +468,27 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -389,16 +468,27 @@ export class PlayComponent implements OnInit, OnDestroy {
callback(); callback();
}; };
} }
if(this.curAudio) {
this.curAudio.pause() ;
}
audio.play(); audio.play();
this.play = true ;
this.curAudio = audio ;
} }
} }
pauseAudio(key, callback = null){
const audio = this.audioObj[key];
if (audio) {
if (callback) {
audio.onended = () => {
callback();
};
}
audio.pause();
}
}
loadResources() { loadResources() {
const pr = []; const pr = [];
...@@ -497,7 +587,12 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -497,7 +587,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; const audioObj = this.audioObj;
...@@ -515,37 +610,230 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -515,37 +610,230 @@ export class PlayComponent implements OnInit, OnDestroy {
audioObj[key] = audio; audioObj[key] = audio;
if (callback) { audio.addEventListener('ended', function () {
audio.onended = () => { console.log('play ended');
callback(); if (callback) {
}; callback(callbackParam);
} }
}, false);
} }
addUrlToImages(url) { addUrlToImages(url) {
this.rawImages.set(url, 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'}
]
},
right: {
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'}
]
},
right: {
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'}
]
},
right: {
word_val: 'capexxxxxxxx',
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'}
]
}
},
{
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'}
]
},
right: {
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'}
]
}
},
{
left: {
word_val: 'can',
word_audio_url: '',
letters: [
{letter_val: "c",letter_color: 'C04',is_: '0'},
{letter_val: "a",letter_color: 'C02',is_: '0'},
{letter_val: "n",letter_color: 'C02',is_: '0'}
]
},
right: {
word_val: 'cane',
word_audio_url: '',
letters: [
{letter_val: "c",letter_color: 'C04',is_: '0'},
{letter_val: "a",letter_color: 'C02',is_: '1'},
{letter_val: "n",letter_color: 'C02',is_: '0'},
{letter_val: "e",letter_color: 'C02',is_: '1'}
]
}
},
{
left: {
word_val: 'mat',
word_audio_url: '',
letters: [
{letter_val: "m",letter_color: 'C04',is_: '0'},
{letter_val: "a",letter_color: 'C02',is_: '0'},
{letter_val: "t",letter_color: 'C02',is_: '0'}
]
},
right: {
word_val: 'mate',
word_audio_url: '',
letters: [
{letter_val: "m",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: 'man',
word_audio_url: '',
letters: [
{letter_val: "m",letter_color: 'C04',is_: '0'},
{letter_val: "a",letter_color: 'C02',is_: '0'},
{letter_val: "n",letter_color: 'C02',is_: '0'}
]
},
right: {
word_val: 'mane',
word_audio_url: '',
letters: [
{letter_val: "m",letter_color: 'C04',is_: '0'},
{letter_val: "a",letter_color: 'C02',is_: '1'},
{letter_val: "n",letter_color: 'C02',is_: '0'},
{letter_val: "e",letter_color: 'C02',is_: '1'}
]
}
},
{
left: {
word_val: 'van',
word_audio_url: '',
letters: [
{letter_val: "v",letter_color: 'C04',is_: '0'},
{letter_val: "a",letter_color: 'C02',is_: '0'},
{letter_val: "n",letter_color: 'C02',is_: '0'}
]
},
right: {
word_val: 'vane',
word_audio_url: '',
letters: [
{letter_val: "v",letter_color: 'C04',is_: '0'},
{letter_val: "a",letter_color: 'C02',is_: '1'},
{letter_val: "n",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 = "a_e";
}
if (!this.data.wordArr) {
this.data.wordArr = this.defaultWordArr();
}
this.title_bg = {};
this.listenPlaying = false;
// ======================================================编写区域========================================================================== this.listenPlayStatus = {};
/** }
* 添加默认数据 便于无数据时的展示
*/
initDefaultData() {
if (!this.data.pic_url) { getDefaultTitle(){
this.data.pic_url = 'assets/play/default/pic.jpg'; return {
this.data.pic_url_2 = 'assets/play/default/pic.jpg'; t_val1:'C',
} t_val2:'Listen, write circle and read.',
t_font_color:'#000000',
t_font:'BRLNSDB',
t_font_size:40
};
} }
...@@ -568,8 +856,15 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -568,8 +856,15 @@ export class PlayComponent implements OnInit, OnDestroy {
this.addUrlToAudioObj('newpage', this.rawAudios.get('newpage')); 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.title_audio_url); this.addUrlToAudioObj(this.data.title.t_audio_url);
this.addUrlToAudioObj(this.data.words_audio_url); this.addUrlToAudioObj(this.data.words_audio_url);
// 初始化单词音效 // 初始化单词音效
...@@ -596,11 +891,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -596,11 +891,7 @@ export class PlayComponent implements OnInit, OnDestroy {
const sx = this.canvasWidth / this.canvasBaseW; const sx = this.canvasWidth / this.canvasBaseW;
const sy = this.canvasHeight / this.canvasBaseH; const sy = this.canvasHeight / this.canvasBaseH;
const s = Math.min(sx, sy); const s = Math.min(sx, sy);
this.mapScale = s; this.mapScale = s;
// this.mapScale = sx;
// this.mapScale = sy;
this.renderArr = []; this.renderArr = [];
this.word_arr_left = [] ; this.word_arr_left = [] ;
...@@ -633,113 +924,76 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -633,113 +924,76 @@ export class PlayComponent implements OnInit, OnDestroy {
initBottomPart() { initBottomPart() {
const pause = new MySprite(); const btnPlay = new MySprite();
pause.init(this.images.get('pause')); btnPlay.init(this.images.get('play'));
pause.x = this.canvasWidth - 50 * this.mapScale; btnPlay.x = this.canvasWidth - 50 * this.mapScale;
pause.y = this.canvasHeight - 100 * this.mapScale; btnPlay.y = this.canvasHeight - 50 * this.mapScale;
pause.setScaleXY(this.mapScale); btnPlay.setScaleXY(this.mapScale);
btnPlay.alpha = 1;
this.renderArr.push(pause); this.renderArr.push(btnPlay);
this.pause = pause; this.listenPlayBtn = btnPlay;
this.listenPlayStatus.play = btnPlay;
// const btnRight = new MySprite();
// btnRight.init(this.images.get('btn_right')); const btnPause = new MySprite();
// btnRight.x = this.canvasWidth - 50 * this.mapScale; btnPause.init(this.images.get('pause'));
// btnRight.y = this.canvasHeight - 100 * this.mapScale; btnPause.x = btnPlay.x;
// btnRight.setScaleXY(this.mapScale); btnPause.y = btnPlay.y;
// btnPause.alpha = 0;
// this.renderArr.push(btnRight); btnPause.setScaleXY(this.mapScale);
//
// this.btnRight = btnRight; this.renderArr.push(btnPause);
this.listenPauseBtn = btnPause;
this.listenPlayStatus.pasue = btnPause;
} }
body_bg;
initPic() { initPic() {
this.body_bg = new ShapeRoundRect();
// 初始化单词显示 // 初始化单词显示
this.initWord(); this.initWord();
const body_bg = new ShapeRectNew(); // let wordNum = this.data.wordArr.length;
let wordNum = this.data.wordArr.length; // for (let i = 0; i < wordNum; ++ i) {
let line = wordNum % 2 == 0 ? wordNum / 2 :Math.ceil(wordNum / 2) ; // this.body_bg.addChild(this.word_bg_groups[i]) ;
// console.log('line: ', line) ; // }
let beginX = 0 ; this.body_bg.setSize(1000*this.mapScale, 520*this.mapScale, 30*this.mapScale) ;
let beginY = 0; this.body_bg.x = (this.canvasWidth - this.body_bg.width) / 2 ;
let endX = 0 ; this.body_bg.y = this.canvasHeight - this.body_bg.height - (this.canvasHeight - this.body_bg.height)/3 ;
let endY = 0 ; this.body_bg.setOutLine('#faebad',4) ;
for (let i = 0; i < wordNum; ++ i) { // this.body_bg.setScaleXY(this.mapScale);
if ( i == 0) {
beginX = this.word_arr_left[i].x; this.renderArr.push(this.body_bg);
beginY = this.word_arr_left[i].y;
} else if( i == line - 1){
endY = this.word_arr[i].y + this.word_arr[i].height;
} else if( i == line){
endX = this.word_arr[i].x + this.word_arr[i].width ;
}
body_bg.addChild(this.word_arr_left[i]) ;
body_bg.addChild(this.word_arr[i]) ;
}
body_bg.setSize(1200,600,60) ;
body_bg.x = (this.canvasWidth - body_bg.width) / 2 ;
body_bg.y = (this.canvasHeight - body_bg.height) /2 ;
body_bg.setOutLine('yellow',2) ;
this.renderArr.push(body_bg);
const words_bg = new ShapeCircle(); const words_bg = new ShapeCircle();
words_bg.setRadius(50); words_bg.setRadius(50);
words_bg.fillColor = '#975833' ; words_bg.fillColor = '#fdcd00' ;
words_bg.x = this.canvasWidth / 2 ; words_bg.x = this.body_bg.width / 2 ;
words_bg.y = (this.canvasHeight - body_bg.height) /2 ; words_bg.y = 0;
const words_content = new Label(); const words_content = new Label();
words_content.text = this.data.words.trim().split('').join('_'); words_content.text = this.data.words;
words_content.textAlign = 'center'; words_content.textAlign = 'center';
words_content.fontSize = 50; words_content.fontSize = 50;
words_content.fontName = 'GOTHICB'; words_content.fontName = 'GOTHICB';
words_content.fontColor = 'yellow'; words_content.fontWeight = 600;
words_content.refreshSize(); words_content.fontColor = '#ab5a23';
words_bg.addChild(words_content) ; words_content.refreshSize();
this.words_bg = words_bg ; words_bg.addChild(words_content);
this.renderArr.push(this.words_bg); words_bg.setScaleXY(this.mapScale);
const title_bg = new ShapeRect(); this.body_bg.addChild(words_bg);
title_bg.fillColor = 'transparent' ; this.words_bg = words_bg ;
const title_left_bg = new ShapeRect();
title_left_bg.fillColor = 'yellow' ;
const title_left = new Label();
title_left.text = this.data.title_left;
title_left.textAlign = 'center';
title_left.fontSize = this.data.title_font_size ? this.data.title_font_size : 50;
title_left.fontName = 'GOTHICB';
title_left.fontColor = this.getColor(this.data.title_color) ? this.getColor(this.data.title_color) : 'black';
title_left.refreshSize();
title_left.x = title_left.width / 2 ;
title_left.y = title_left.height / 2 ;
title_left_bg.setSize(title_left.width , title_left.height) ;
title_left_bg.addChild(title_left) ;
title_bg.addChild(title_left_bg) ;
const title_right_bg = new ShapeRect();
title_right_bg.fillColor = 'transparent' ;
title_right_bg.x = title_left_bg.x+title_left_bg.width ;
const title_right = new Label();
title_right.text = this.data.title_right;
title_right.textAlign = 'center';
title_right.fontSize = this.data.title_font_size ? this.data.title_font_size : 50;
title_right.fontName = 'GOTHICB';
title_right.fontColor = this.getColor(this.data.title_color) ? this.getColor(this.data.title_color) : 'black';
title_right.refreshSize();
title_right.x = title_right.width / 2 ;
title_right.y = title_right.height / 2 ;
title_right_bg.setSize(title_right.width , title_right.height) ;
title_right_bg.addChild(title_right) ;
title_bg.setSize(title_left_bg.width + title_right_bg.width , title_right_bg.height) ;
title_bg.addChild(title_right_bg) ;
this.title_bg = title_bg ;
this.renderArr.push(title_bg) ;
} }
/** /**
...@@ -749,212 +1003,211 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -749,212 +1003,211 @@ export class PlayComponent implements OnInit, OnDestroy {
this.drawWordSprite(); 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;
}
/** /**
* 绘画单词 * 绘画单词
*/ */
word_bg_groups = [];
drawWordSprite() { drawWordSprite() {
const getWordSprite = (index , x , y) => { const getWordSprite = (index , x , y) => {
// 单词背景 let letterFontSize = 40;
let word_bg = new ShapeRect(); // 单词背景
word_bg.fillColor = 'transparent' ; let word_bg_group = new ShapeRect();
word_bg.x = x + 200 ; word_bg_group.fillColor = '#ffffff' ;
word_bg.y = y + 200; word_bg_group.x = (x + 60) * this.mapScale;
word_bg_group.y = (y + 80) * this.mapScale;
let start = new Label();
start.text = (index+1)+'. '; let start = this.cricleNumber(index+1);
start.textAlign = 'center';
// letter_spr.fontSize = word_content.word_font_size ? word_content.word_font_size : 110;
start.fontSize = 50;
start.fontName = 'MMTextBookBold';
start.fontColor = 'black';
//设置不显示
start.visible = true;
start.refreshSize();
start.y = start.height / 2 ; start.y = start.height / 2 ;
word_bg.addChild(start) ; 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 word_content = this.data.wordArr[index];
let totalWidth = 0; let totalWidth = 0;
let height = 0; let height = 0;
let letter_spr_arr = []; let letter_spr_arr = [];
for(let i = 0; i < word_content.left.letters.length; ++ i) { for(let i = 0; i < word_content.left.letters.length; ++ i) {
//字母 //字母
let letter = word_content.left.letters[i]; let letter = word_content.left.letters[i];
// console.log('letter:',letter) ; // console.log('letter:',letter) ;
let letter_spr = new Label(); let letter_spr = new Label();
letter_spr.text = letter.letter_val; letter_spr.text = letter.letter_val;
letter_spr.textAlign = 'center'; 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 = word_content.word_font_size ? word_content.word_font_size : 110;
letter_spr.fontSize = 50; letter_spr.fontSize = letterFontSize;
letter_spr.fontName = 'MMTextBookBold'; letter_spr.fontName = 'MMTextBook';
letter_spr.fontColor = this.getColor(letter.letter_color); letter_spr.fontColor = this.getColor(letter.letter_color);
//设置不显示 //设置不显示
letter_spr.visible = true; letter_spr.visible = true;
letter_spr.refreshSize(); letter_spr.refreshSize();
letter_spr_arr.push(letter_spr); letter_spr_arr.push(letter_spr);
//设置坐标
//设置y坐标 letter_spr.x = letter_spr.width/2+totalWidth+5;
letter_spr.y = letter_spr.height/2; 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; height = letter_spr.height;
if(index === 0){ if(index === 0){
this.word_height = height ; this.word_height = height ;
} }
totalWidth += letter_spr.width;
if((i + 1) < word_content.left.letters.length){
totalWidth += 0;
}
// 设置单词未加截完
// this.setWordLoad(index, String(i), false, letter_spr);
totalWidth += letter_spr.width+10;
word_bg.addChild(letter_spr); word_bg.addChild(letter_spr);
} }
let temp_startX = 0;
//设置所有字母的x坐标
for(let i = 0; i < letter_spr_arr.length; ++ i) {
let startX = start.width/2;
if(i == 0){
startX = letter_spr_arr[i].width/2 + start.width/2 ;
}
else{
temp_startX += letter_spr_arr[i-1].width + 0;
startX = temp_startX + letter_spr_arr[i].width/2+start.width/2;
}
letter_spr_arr[i].x = startX;
}
word_bg.setSize(totalWidth, height); word_bg.setSize(totalWidth, height);
// 设置不显示 // let minScale = getMinScale(word_bg, 120);
// word_bg.alpha = 0; // word_bg.setScaleXY(minScale);
// this.word_height = word_bg.height; word_bg_group.addChild(word_bg);
this.word_arr_left.push(word_bg);
// this.renderArr.push(word_bg) ; this.word_arr_left.push(word_bg);
// console.log('word_arr', this.word_arr) ;
//中间斜杠
let splitStr = new Label();
let splitStrWidth = 60;
splitStr.text = '/';
splitStr.textAlign = 'center';
splitStr.fontSize = letterFontSize;
splitStr.fontName = 'MMTextBook';
splitStr.fontColor = 'black';
//设置不显示
splitStr.visible = true;
splitStr.refreshSize();
splitStr.y = splitStr.height / 2 ;
splitStr.x = startWidth + totalWidth + 40 ;
word_bg_group.addChild(splitStr) ;
//=============================右侧单词========================================
// 单词背景 // 单词背景
let word_bg_right = new ShapeRect(); let word_bg_right = new ShapeRect();
word_bg_right.fillColor = 'transparent' ; word_bg_right.fillColor = 'transparent' ;
word_bg_right.x = word_bg.x+200; word_bg_right.x = startWidth + totalWidth + splitStrWidth;
word_bg_right.y = y + 200; word_bg_right.y = 0;
word_bg_right["wordLoaded"] = true;
//单词 //单词
let totalWidth_right = 0; let totalWidth_right = 0;
let height_right = 0; let height_right = 0;
let letter_spr_arr_right = []; let letter_spr_arr_right = [];
for(let i = 0; i < word_content.right.letters.length; ++ i) {
for(let i = 0; i < word_content.right.letters.length; ++ i) {
//字母 //字母
let letter = word_content.right.letters[i]; let letter = word_content.right.letters[i];
// console.log('letter:',letter) ;
let letter_spr = new Label(); let letter_spr = new Label();
letter_spr.text = letter.letter_val; letter_spr.text = letter.letter_val;
letter_spr.textAlign = 'center'; if(letter.is_=="0"){
// letter_spr.fontSize = word_content.word_font_size ? word_content.word_font_size : 110; //设置不显示
letter_spr.fontSize = 50; letter_spr.visible = true;
letter_spr.fontName = 'MMTextBookBold'; }else{
word_bg_right["wordLoaded"] = false;
//设置不显示
letter_spr.visible = false;
}
letter_spr.textAlign = 'left';
letter_spr.fontSize = letterFontSize;
letter_spr.fontName = 'MMTextBook';
letter_spr.fontColor = this.getColor(letter.letter_color); letter_spr.fontColor = this.getColor(letter.letter_color);
//设置不显示
letter_spr.visible = true; letter_spr.refreshSize();
letter_spr.refreshSize();
letter_spr_arr_right.push(letter_spr); letter_spr_arr_right.push(letter_spr);
//设置y坐标 //设置坐标
letter_spr.x = Math.ceil(letter_spr.width/2) + totalWidth_right +5;
letter_spr.y = letter_spr.height/2; letter_spr.y = letter_spr.height/2;
height_right = letter_spr.height; if(letter.is_=="1"){
totalWidth_right += letter_spr.width; let lts_ = new Label();
lts_.text = "_";
if((i + 1) < word_content.right.letters.length){ lts_.textAlign = 'left';
totalWidth_right += 0; 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_right.addChild(lts_);
} }
height_right = letter_spr.height;
totalWidth_right += letter_spr.width+10;
// 设置单词未加截完 // 设置单词未加截完
this.setWordLoad(index, String(i), false, letter_spr); // this.setWordLoad(index, String(i), false, letter_spr);
word_bg_right.addChild(letter_spr); word_bg_right.addChild(letter_spr);
} }
let temp_startX_right = 0;
//设置所有字母的x坐标
for(let i = 0; i < letter_spr_arr_right.length; ++ i) {
let startX = letter_spr_arr[letter_spr_arr.length - 1].x;
if(i == 0){
startX = letter_spr_arr[i].width/2;
}
else{
temp_startX_right += letter_spr_arr_right[i-1].width + 0;
startX = temp_startX_right + letter_spr_arr_right[i].width/2;
}
letter_spr_arr_right[i].x = startX;
if ( letter_spr_arr_right[i].text === this.data.words.trim().split('')[0] || letter_spr_arr_right[i].text === this.data.words.trim().split('')[1]) {
letter_spr_arr_right[i].visible = false ;
let label = new Label();
label.text = '_';
label.textAlign = 'center';
// letter_spr.fontSize = word_content.word_font_size ? word_content.word_font_size : 110;
label.fontSize = 50;
label.fontName = 'MMTextBookBold';
label.fontColor = 'red';
//设置不显示
label.visible = true;
label.refreshSize();
label.x = letter_spr_arr_right[i].x ;
label.y = letter_spr_arr_right[i].height / 2 ;
word_bg_right.addChild(label) ;
}
}
word_bg_right.setSize(totalWidth_right, height_right); word_bg_right.setSize(totalWidth_right, height_right);
// 设置不显示 word_bg_group.addChild(word_bg_right) ;
// word_bg.alpha = 0; word_bg_group.setSize((totalWidth_right+totalWidth+splitStrWidth+startWidth), height);
// this.word_height = word_bg.height; if(word_bg_group.width>350){
this.word_arr.push(word_bg_right); word_bg_group.setScaleXY(getMinScale(word_bg_group, 350)*this.mapScale);
// this.renderArr.push(word_bg_right) ; }else{
word_bg_group.setScaleXY(this.mapScale);
}
this.word_arr.push(word_bg_right);
this.word_bg_groups.push(word_bg_group);
this.body_bg.addChild(word_bg_group);
}; };
//单词个数 //单词个数
let wordNum = this.data.wordArr.length; let wordNum = this.data.wordArr.length;
let line = wordNum % 2 == 0 ? wordNum / 2 :Math.ceil(wordNum / 2) ;
// console.log('line: ', line) ; // console.log('line: ', line) ;
for (let i = 0; i < wordNum; ++ i) { for (let i = 0; i < wordNum; i++) {
if(i <= line-1){ let x = 0;
getWordSprite(i , 0 , this.word_height*i*1.3); let y = this.word_height*i*2.7;
} else { if(i>3){
getWordSprite(i , 500 , this.word_height*(i-line)*1.3); x = 500;
} y = this.word_height*(i-4)*2.7;
}
getWordSprite(i , x , y);
} }
} }
...@@ -995,54 +1248,17 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -995,54 +1248,17 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
} }
} }
btnRightClicked() { //听力材播放按钮
listenPlayBtn;
this.nextPage();
}
lastPage() {
if (this.curPic == this.pic1) {
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;
});
}
nextPage() {
if (this.curPic == this.pic2) {
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.pic2;
});
}
pic1Clicked() {
this.playAudio(this.data.audio_url);
}
pic2Clicked() {
this.playAudio(this.data.audio_url_2);
}
//听力材暂停按钮
listenPauseBtn;
listenPlaying = false;
listenPlayStatus;
mapDown(event) { mapDown(event) {
...@@ -1053,7 +1269,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1053,7 +1269,7 @@ export class PlayComponent implements OnInit, OnDestroy {
if (this.checkClickTarget(this.title_bg)) { if (this.checkClickTarget(this.title_bg)) {
// console.log('click the words :' , this.data.words_audio_url) ; // console.log('click the words :' , this.data.words_audio_url) ;
this.playAudio(this.data.title_audio_url) ; this.playAudio(this.data.title.t_audio_url) ;
return ; return ;
} }
...@@ -1077,53 +1293,52 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1077,53 +1293,52 @@ export class PlayComponent implements OnInit, OnDestroy {
for(let i = 0; i < this.word_arr.length; ++ i){ for(let i = 0; i < this.word_arr.length; ++ i){
let word = this.word_arr[i]; let word = this.word_arr[i];
// console.log('word', word) ; // console.log('word', word) ;
if (this.checkClickTarget(word)) { if (this.checkClickTarget(word)) {
// 获取是否加载完成 // 获取是否加载完成
let loaded = this.getWordLoaded(String(i)); let loaded = word.wordLoaded;
// 未加载,不触发音效,加载单词 // 未加载,不触发音效,加载单词
if ( !loaded) { if (!loaded) {
let letters = this.getLetterSpriteFromWordLoaded(String(i)); let letters:Array<Label> = word.children.slice(1);
for (let key in letters) { for (let j=0; j<letters.length;j++) {
let loaded = letters[key].loaded; let labelItem = letters[j];
let letter_spr = letters[key].letter; if(!labelItem.visible){
//加载完成,跳过 labelItem.visible = true;
if(loaded){ }
continue; }
} word.wordLoaded = true;
//设置显示 return ;
letter_spr.visible = true; }
//设置加载完成
letters[key].loaded = true;
this.checkWordLoaded(String(i));
}
return ;
}
console.log('this word: ', this.data.wordArr[i]) ;
this.playAudio(this.data.wordArr[i].right.word_audio_url); this.playAudio(this.data.wordArr[i].right.word_audio_url);
return ; return ;
} }
} }
if (this.checkClickTarget(this.listenPlayBtn) && !this.listenPlaying) {
this.listenPlayBtn.alpha = 0;
if ( this.checkClickTarget(this.pause) ) { this.listenPauseBtn.alpha = 1;
this.pauseClicked();
return;
}
if ( this.checkClickTarget(this.btnRight) ) { this.playAudio(this.data.listen_audio_url);
this.btnRightClicked();
return; this.listenPlaying = true;
}
if ( this.checkClickTarget(this.pic1) ) {
this.pic1Clicked();
return; return;
} }
if ( this.checkClickTarget(this.pic2) ) { if (this.checkClickTarget(this.listenPauseBtn) && this.listenPlaying) {
this.pic2Clicked();
this.listenPlayBtn.alpha = 1;
this.listenPauseBtn.alpha = 0;
this.pauseAudio(this.data.listen_audio_url);
this.listenPlaying = false;
return; return;
} }
} }
......
...@@ -3,7 +3,8 @@ const res = [ ...@@ -3,7 +3,8 @@ const res = [
// ['bg', "assets/play/bg.jpg"], // ['bg', "assets/play/bg.jpg"],
['btn_left', "assets/play/btn_left.png"], ['btn_left', "assets/play/btn_left.png"],
['btn_right', "assets/play/btn_right.png"], ['btn_right', "assets/play/btn_right.png"],
['pause', "assets/play/pause.png"] ['pause', "assets/play/pause.png"],
['play', "assets/play/play.png"]
// ['text_bg', "assets/play/text_bg.png"], // ['text_bg', "assets/play/text_bg.png"],
]; ];
......
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