Commit ff54889f authored by liujiangnan's avatar liujiangnan

开发完成

parent a7e92ed4
<div class="model-content"> <div class="model-content">
<div nz-row>
<div nz-col nzOffset='4'>
<div style="position: absolute; left: 200px; top: 100px; width: 300px;"> <h1 nz-title>课程内容编辑</h1>
</div>
<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()"> </div>
<div nz-form>
<app-upload-image-with-preview <div id='title-anchor'>
[picUrl]="item.pic_url" <nz-divider nzText="课程名称" nzOrientation="left"></nz-divider>
(imageUploaded)="onImageUploadSuccess($event, 'pic_url')" <nz-form-item>
></app-upload-image-with-preview> <nz-form-label [nzSpan]="3" nzFor="t_val1">标题1</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-audio-recorder <nz-input-group nzAddOnBefore="Part">
[audioUrl]="item.audio_url" <input type="text" id="t_val1" nz-input [(ngModel)]="item.title.t_val1" (blur)="save()">
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url')" </nz-input-group>
></app-audio-recorder> </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.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 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.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 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>
<app-audio-recorder
[audioUrl]="item.audio_url_2"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url_2')"
></app-audio-recorder>
</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>-->
...@@ -6,3 +6,73 @@ ...@@ -6,3 +6,73 @@
height: 100%; 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 ...@@ -10,10 +10,11 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap
export class FormComponent implements OnInit, OnChanges, OnDestroy { export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 储存数据用 // 储存数据用
saveKey = "test_0011"; saveKey = "ym011";
// 储存对象 // 储存对象
item; item;
wordArr = [];
constructor(private appRef: ApplicationRef) { constructor(private appRef: ApplicationRef) {
...@@ -24,6 +25,12 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -24,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) => {
...@@ -31,6 +38,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -31,6 +38,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.item = data; this.item = data;
} }
if ( !this.item.wordArr ) {
this.item.wordArr = [];
}
this.init(); this.init();
this.refresh(); this.refresh();
...@@ -49,6 +60,21 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -49,6 +60,21 @@ 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) {
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 { ...@@ -66,13 +92,15 @@ 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) {
item[key] = e.url;
this.save();
}
/** /**
* 储存数据 * 储存数据
...@@ -91,5 +119,79 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -91,5 +119,79 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}, 1); }, 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 { ...@@ -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 { export class ShapeCircle extends MySprite {
fillColor = '#FF0000'; fillColor = '#FF0000';
......
...@@ -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, tweenChange, MySprite, ShapeCircle, ShapeRect, ShapeRoundRect, tweenChange,
getMinScale
} from './Unit'; } from './Unit';
import {res, resAudio} from './resources'; import {res, resAudio} from './resources';
...@@ -57,18 +57,116 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -57,18 +57,116 @@ export class PlayComponent implements OnInit, OnDestroy {
canvasLeft; canvasLeft;
canvasTop; canvasTop;
saveKey = 'test_0011'; saveKey = 'ym011';
btnLeft;
btnRight;
pic1;
pic2;
canTouch = true; canTouch = true;
curPic; 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']) @HostListener('window:resize', ['$event'])
onResize(event) { onResize(event) {
this.winResizeEventStream.next(); this.winResizeEventStream.next();
...@@ -90,10 +188,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -90,10 +188,8 @@ export class PlayComponent implements OnInit, OnDestroy {
// 初始化 各事件监听 // 初始化 各事件监听
this.initListener(); this.initListener();
// 若无数据 则为预览模式 需要填充一些默认数据用来显示 // 若无数据 则为预览模式 需要填充一些默认数据用来显示
this.initDefaultData(); this.initDefaultData();
// 初始化 音频资源 // 初始化 音频资源
this.initAudio(); this.initAudio();
// 初始化 图片资源 // 初始化 图片资源
...@@ -101,10 +197,99 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -101,10 +197,99 @@ export class PlayComponent implements OnInit, OnDestroy {
// 开始预加载资源 // 开始预加载资源
this.load(); this.load();
// 加载完成播放音乐
this.playAudio("newpage");
}, this.saveKey); }, 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() { ngOnDestroy() {
window['curCtx'] = null; window['curCtx'] = null;
window.cancelAnimationFrame(this.animationId); window.cancelAnimationFrame(this.animationId);
...@@ -123,10 +308,10 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -123,10 +308,10 @@ export class PlayComponent implements OnInit, OnDestroy {
init() { init() {
this.initCtx(); this.initCtx();
this.initData(); this.initData();
this.initView(); this.initView();
this.initTitle();
} }
initCtx() { initCtx() {
...@@ -289,6 +474,22 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -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() { loadResources() {
const pr = []; const pr = [];
...@@ -387,7 +588,12 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -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; const audioObj = this.audioObj;
...@@ -405,37 +611,193 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -405,37 +611,193 @@ export class PlayComponent implements OnInit, OnDestroy {
audioObj[key] = audio; audioObj[key] = audio;
audio.addEventListener('ended', function () {
console.log('play ended');
if (callback) { if (callback) {
audio.onended = () => { callback(callbackParam);
callback();
};
} }
}, 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'}
]
}
},{
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: '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'}
]
}
},{
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'}
]
}
},
{
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'}
]
}
},{
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'}
]
}
},
{
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'}
]
}
}
];
}
/**
* 添加默认数据 便于无数据时的展示
*/
initDefaultData() {
if(!this.data.title){
this.data.title = this.getDefaultTitle();
}
if(!this.data.words){
this.data.words = "or";
}
if(!this.data.words_two){
this.data.words_two = "ue";
}
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 +815,30 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -453,14 +815,30 @@ export class PlayComponent implements OnInit, OnDestroy {
* 添加预加载音频 * 添加预加载音频
*/ */
initAudio() { 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.title.t_audio_url);
this.addUrlToAudioObj(this.data.audio_url_2);
// 音效 this.addUrlToAudioObj(this.data.words_audio_url);
this.addUrlToAudioObj('click', this.rawAudios.get('click'), 0.3); this.addUrlToAudioObj(this.data.words_two_audio_url);
// 初始化单词音效
for (let i = 0; i < this.data.wordArr.length; ++ 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 +853,18 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -475,13 +853,18 @@ export class PlayComponent implements OnInit, OnDestroy {
const s = Math.min(sx, sy); const s = Math.min(sx, sy);
this.mapScale = s; this.mapScale = s;
// this.mapScale = sx; this.renderArr = [];
// this.mapScale = sy; 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 +884,420 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -501,147 +884,420 @@ export class PlayComponent implements OnInit, OnDestroy {
initBottomPart() { initBottomPart() {
const btnLeft = new MySprite(); const btnPlay = new MySprite();
btnLeft.init(this.images.get('btn_left')); btnPlay.init(this.images.get('play'));
btnLeft.x = this.canvasWidth - 150 * this.mapScale; btnPlay.x = this.canvasWidth - 50 * this.mapScale;
btnLeft.y = this.canvasHeight - 100 * 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);
}
initPic() { this.listenPauseBtn = btnPause;
const maxW = this.canvasWidth * 0.7; this.listenPlayStatus.pasue = btnPause;
}
const pic1 = new MySprite(); body_bg;
pic1.init(this.images.get(this.data.pic_url)); body_bg_right;
pic1.x = this.canvasWidth / 2;
pic1.y = this.canvasHeight / 2;
pic1.setScaleXY(maxW / pic1.width);
this.renderArr.push(pic1); initPic() {
this.pic1 = pic1;
this.body_bg = new ShapeRoundRect();
this.body_bg_right = new ShapeRoundRect();
this.body_bg.setSize(320*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(660*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('#f8ceaf',4) ;
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 = 'BRLNSDB';
words_content.fontWeight = 600;
words_content.fontColor = '#ab5a23';
words_content.refreshSize();
words_bg.addChild(words_content);
words_bg.setRadius(words_content.width/3*2);
let scale = getMinScale(words_bg, 80)*this.mapScale
words_bg.setScaleXY(scale);
const words_bg_right = new ShapeCircle();
words_bg_right.setRadius(50);
words_bg_right.fillColor = '#aa5a23' ;
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 = 'BRLNSDB';
words_content_right.fontWeight = 600;
words_content_right.fontColor = '#fdcd00';
words_content_right.refreshSize();
words_bg_right.addChild(words_content_right);
words_bg_right.setRadius(words_content.width/3*2);
let scale_r = getMinScale(words_bg_right, 80)*this.mapScale
words_bg_right.setScaleXY(scale_r);
const block1 = new ShapeRoundRect();
block1.setSize(270, 160, 20*this.mapScale) ;
block1.fillColor = '#fefae7' ;
block1.x = (this.body_bg.width-270*this.mapScale)/2 ;
block1.y = 75*this.mapScale ;
block1.setScaleXY(this.mapScale);
const block2 = new ShapeRoundRect();
block2.setSize(270, 160, 20*this.mapScale) ;
block2.fillColor = '#faf0e8' ;
block2.x = (this.body_bg.width-270*this.mapScale)/2 ;
block2.y = 290*this.mapScale ;
block2.setScaleXY(this.mapScale);
this.body_bg.addChild(block1);
this.body_bg.addChild(block2);
this.body_bg.addChild(words_bg);
this.words_bg = words_bg ;
const block3 = new ShapeRoundRect();
block3.setSize(290, 160, 20*this.mapScale) ;
block3.fillColor = '#e5f3f9' ;
block3.x = (this.body_bg_right.width/2-290*this.mapScale)/2 ;
block3.y = 75*this.mapScale ;
block3.setScaleXY(this.mapScale);
const block4 = new ShapeRoundRect();
block4.setSize(290, 160, 20*this.mapScale) ;
block4.fillColor = '#e5f3f9' ;
block4.x = (block3.x*3+block3.width)*this.mapScale;
block4.y = 75*this.mapScale ;
block4.setScaleXY(this.mapScale);
const block5 = new ShapeRoundRect();
block5.setSize(290, 160, 20*this.mapScale) ;
block5.fillColor = '#f5f9ea' ;
block5.x = (this.body_bg_right.width/2-290*this.mapScale)/2 ;
block5.y = 290*this.mapScale ;
block5.setScaleXY(this.mapScale);
const block6 = new ShapeRoundRect();
block6.setSize(290, 160, 20*this.mapScale) ;
block6.fillColor = '#f5f9ea' ;
block6.x = (block5.x*3+block5.width)*this.mapScale;
block6.y = 290*this.mapScale ;
block6.setScaleXY(this.mapScale);
this.body_bg_right.addChild(block3);
this.body_bg_right.addChild(block4);
this.body_bg_right.addChild(block5);
this.body_bg_right.addChild(block6);
this.body_bg_right.addChild(words_bg_right);
this.words_bg_right = words_bg_right ;
// 初始化单词显示
this.initWord();
const label1 = new Label(); }
label1.text = this.data.text;
label1.textAlign = 'center';
label1.fontSize = 50;
label1.fontName = 'BRLNSDB';
label1.fontColor = '#ffffff';
pic1.addChild(label1); /**
* 初始化单词显示
*/
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;
}
/**
* 绘画单词
*/
word_bg_groups = [];
drawWordSprite() {
const getWordSprite = (index , x , y) => {
let letterFontSize = 40;
// 单词背景
let word_bg_group = new ShapeRect();
word_bg_group.fillColor = 'transparent' ;
word_bg_group.x = (x + 40) * this.mapScale;
if(index%2==0){
word_bg_group.y = (y + 100) * this.mapScale;
}else{
word_bg_group.y = (y + 60) * this.mapScale;
}
const pic2 = new MySprite(); let start = this.cricleNumber(index+1);
pic2.init(this.images.get(this.data.pic_url_2)); start.y = start.height / 2 ;
pic2.x = this.canvasWidth / 2 + this.canvasWidth; start.x = start.width / 2;
pic2.y = this.canvasHeight / 2; word_bg_group.addChild(start) ;
pic2.setScaleXY(maxW / pic2.width); 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;
}
this.renderArr.push(pic2); letter_spr.textAlign = 'left';
this.pic2 = pic2; // 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_);
}
this.curPic = pic1; height = letter_spr.height;
if(index === 0){
this.word_height = height ;
} }
totalWidth += letter_spr.width+10;
word_bg.addChild(letter_spr);
}
btnLeftClicked() { 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);
this.word_arr_left.push(word_bg);
if(word_bg_group.width>240){
word_bg_group.setScaleXY(getMinScale(word_bg_group, 240)*this.mapScale);
}else{
word_bg_group.setScaleXY(this.mapScale);
}
this.word_bg_groups.push(word_bg_group);
if(index<4){
this.body_bg.addChild(word_bg_group);
}else{
this.body_bg_right.addChild(word_bg_group);
}
};
this.lastPage(); //单词个数
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;
}
if(i>7){
x = 320;
y = this.word_height*(i-8)*2.7;
} }
btnRightClicked() { getWordSprite(i , x , y);
}
}
this.nextPage(); /**
* 根据颜色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;
} }
lastPage() { return color;
}
if (this.curPic == this.pic1) { pauseClicked() {
return; if(this.curAudio){
if(this.play){
this.curAudio.pause() ;
this.play = false ;
}else {
this.curAudio.play() ;
this.play = true ;
}
}
} }
this.canTouch = false;
const moveLen = this.canvasWidth; //听力材播放按钮
tweenChange(this.pic1, {x: this.pic1.x + moveLen}, 1); listenPlayBtn;
tweenChange(this.pic2, {x: this.pic2.x + moveLen}, 1, () => {
this.canTouch = true; //听力材暂停按钮
this.curPic = this.pic1; listenPauseBtn;
});
} listenPlaying = false;
nextPage() { listenPlayStatus;
if (this.curPic == this.pic2) {
mapDown(event) {
if (!this.canTouch) {
return; return;
} }
this.canTouch = false; if (this.checkClickTarget(this.title_bg)) {
this.playAudio(this.data.title.t_audio_url) ;
return ;
}
const moveLen = this.canvasWidth; if (this.checkClickTarget(this.words_bg)) {
tweenChange(this.pic1, {x: this.pic1.x - moveLen}, 1); this.playAudio(this.data.words_audio_url) ;
tweenChange(this.pic2, {x: this.pic2.x - moveLen}, 1, () => { return ;
this.canTouch = true;
this.curPic = this.pic2;
});
} }
pic1Clicked() { if (this.checkClickTarget(this.words_bg_right)) {
this.playAudio(this.data.audio_url); this.playAudio(this.data.words_two_audio_url) ;
return ;
} }
pic2Clicked() {
this.playAudio(this.data.audio_url_2); 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 ;
} }
}
if (this.checkClickTarget(this.listenPlayBtn) && !this.listenPlaying) {
this.listenPlayBtn.alpha = 0;
mapDown(event) { this.listenPauseBtn.alpha = 1;
if (!this.canTouch) { this.playAudio(this.data.listen_audio_url);
return;
}
if ( this.checkClickTarget(this.btnLeft) ) { this.listenPlaying = true;
this.btnLeftClicked();
return;
}
if ( this.checkClickTarget(this.btnRight) ) {
this.btnRightClicked();
return; return;
} }
if ( this.checkClickTarget(this.pic1) ) { if (this.checkClickTarget(this.listenPauseBtn) && this.listenPlaying) {
this.pic1Clicked();
return; this.listenPlayBtn.alpha = 1;
}
this.listenPauseBtn.alpha = 0;
this.pauseAudio(this.data.listen_audio_url);
this.listenPlaying = false;
if ( this.checkClickTarget(this.pic2) ) {
this.pic2Clicked();
return; return;
} }
......
...@@ -3,6 +3,8 @@ const res = [ ...@@ -3,6 +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"],
['play', "assets/play/play.png"]
// ['text_bg', "assets/play/text_bg.png"], // ['text_bg', "assets/play/text_bg.png"],
]; ];
...@@ -12,6 +14,7 @@ const res = [ ...@@ -12,6 +14,7 @@ const res = [
const resAudio = [ const resAudio = [
['click', "assets/play/music/click.mp3"], ['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