Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Y
ym008
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
template admin
ym008
Commits
68f7a736
Commit
68f7a736
authored
Feb 16, 2020
by
chaiyajie
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
首次提交
parent
a7e92ed4
Changes
7
Hide whitespace changes
Inline
Side-by-side
Showing
7 changed files
with
827 additions
and
72 deletions
+827
-72
form.component.html
src/app/form/form.component.html
+226
-39
form.component.scss
src/app/form/form.component.scss
+4
-0
form.component.ts
src/app/form/form.component.ts
+77
-2
Unit.ts
src/app/play/Unit.ts
+76
-0
play.component.ts
src/app/play/play.component.ts
+443
-31
resources.js
src/app/play/resources.js
+1
-0
newpage.mp3
src/assets/play/music/newpage.mp3
+0
-0
No files found.
src/app/form/form.component.html
View file @
68f7a736
<div
class=
"model-content"
>
<div
class=
"model-content"
>
<div
nz-row
>
<div
nz-col
nzOffset=
'4'
><h1
nz-title
>
课程内容编辑
</h1></div>
<div
style=
"position: absolute; left: 200px; top: 100px; width: 300px;"
>
<input
type=
"text"
nz-input
[(
ngModel
)]="
item
.
text
"
(
blur
)="
save
()"
>
<app-upload-image-with-preview
[
picUrl
]="
item
.
pic_url
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
'
pic_url
')"
></app-upload-image-with-preview>
<app-audio-recorder
[
audioUrl
]="
item
.
audio_url
"
(
audioUploaded
)="
onAudioUploadSuccess
($
event
,
'
audio_url
')"
></app-audio-recorder>
</div>
</div>
<div
nz-form
>
<div>
<nz-divider
nzText=
"课程标题"
nzOrientation=
"left"
></nz-divider>
<div
style=
"position: absolute; left: 1000px; top: 100px; width: 300px;"
>
<nz-form-item>
<nz-form-label
[
nzSpan
]="
3
"
nzFor=
"title_left"
>
标题左半部分
</nz-form-label>
<input
type=
"text"
nz-input
[(
ngModel
)]="
item
.
text_2
"
(
blur
)="
save
()"
>
<nz-form-control
[
nzSpan
]="
6
"
>
<input
nz-input
type=
"text"
id=
"title_left"
placeholder=
"C"
[(
ngModel
)]="
item
.
title_left
"
(
blur
)="
save
()"
>
<app-upload-image-with-preview
</nz-form-control>
[
picUrl
]="
item
.
pic_url_2
"
</nz-form-item>
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
'
pic_url_2
')"
<nz-form-item>
></app-upload-image-with-preview>
<nz-form-label
[
nzSpan
]="
3
"
nzFor=
"title_right"
>
标题右半部分
</nz-form-label>
<nz-form-control
[
nzSpan
]="
6
"
>
<app-audio-recorder
<input
nz-input
type=
"text"
id=
"title_right"
placeholder=
"Listen write and read"
[(
ngModel
)]="
item
.
title_right
"
(
blur
)="
save
()"
>
[
audioUrl
]="
item
.
audio_url_2
"
</nz-form-control>
(
audioUploaded
)="
onAudioUploadSuccess
($
event
,
'
audio_url_2
')"
</nz-form-item>
></app-audio-recorder>
<nz-form-item>
<nz-form-label
[
nzSpan
]="
3
"
nzFor=
"title_color"
>
标题字体颜色
</nz-form-label>
<nz-form-control
[
nzSpan
]="
6
"
>
<nz-select
[(
ngModel
)]="
item
.
title_color
"
nzAllowClear
nzPlaceHolder=
"Please select the 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>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label
[
nzSpan
]="
3
"
nzFor=
"title_font_size"
>
标题字体大小
</nz-form-label>
<nz-form-control
[
nzSpan
]="
3
"
>
<nz-input-number
[(
ngModel
)]="
item
.
title_font_size
"
[
nzMin
]="
1
"
[
nzStep
]="
1
"
(
blur
)="
saveItem
()"
></nz-input-number>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label
[
nzSpan
]="
3
"
nzFor=
"title_audio_url"
>
标题发音
</nz-form-label>
<nz-form-control
[
nzSpan
]="
6
"
>
<app-audio-recorder
[
audioUrl
]="
item
.
title_audio_url
"
id=
"title_audio_url"
(
audioUploaded
)="
onAudioUploadSuccess
($
event
,
'
title_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
,
'
words_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
]="
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>
<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
class=
"border"
>
<h5
style=
"width: 100%; line-height: 40px; text-align: center;"
>
单词-{{i+1}}
</h5>
<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
)="
saveItem
()"
>
</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>-->
<!--<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>
<div
nz-col
[
nzSpan
]="
22
"
nzOffset=
"1"
>
<nz-table
#
lettersTable
[
nzData
]="
it
.
left
.
letters
"
[
nzHideOnSinglePage
]="
true
"
[
nzBordered
]="
true
"
>
<thead>
<tr>
<th>
序号
</th>
<th>
字母(组合)
</th>
<!--<th>发音</th>-->
<th>
颜色
</th>
<th>
操作
</th>
</tr>
</thead>
<tbody>
<tr
*
ngFor=
"let data of it.left.letters;let j = index"
>
<td>
{{j+1}}
</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>
<nz-select
[(
ngModel
)]="
data
.
letter_color
"
nzAllowClear
nzPlaceHolder=
"Please select the 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>
<a
(
click
)="
deleteLetterItem
(
it
.
left
.
letters
,
j
)"
>
delete
</a>
</td>
</tr>
</tbody>
</nz-table>
</div>
</nz-form-item>
</div>
<div
nz-form
>
<nz-form-item>
<nz-form-label
[
nzSpan
]="
6
"
nzFor=
"it.right.word_val"
>
单词
</nz-form-label>
<nz-form-control
[
nzSpan
]="
6
"
>
<input
type=
"text"
nz-input
placeholder=
"请录入单词"
[(
ngModel
)]="
it
.
right
.
word_val
"
(
blur
)="
saveItem
()"
>
</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
"
>
<app-audio-recorder
id=
"it.right.word_audio_url"
[
audioUrl
]="
it
.
right
.
word_audio_url
"
(
audioUploaded
)="
onAudioUploadSuccessByItem
($
event
,
it
.
right
,'
word_audio_url
')"
>
</app-audio-recorder>
</nz-form-control>
</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>
<div
nz-col
[
nzSpan
]="
22
"
nzOffset=
"1"
>
<nz-table
#
lettersTable
[
nzData
]="
it
.
right
.
letters
"
[
nzHideOnSinglePage
]="
true
"
[
nzBordered
]="
true
"
>
<thead>
<tr>
<th>
序号
</th>
<th>
字母(组合)
</th>
<!--<th>发音</th>-->
<th>
颜色
</th>
<th>
操作
</th>
</tr>
</thead>
<tbody>
<tr
*
ngFor=
"let data of it.right.letters;let j = index"
>
<td>
{{j+1}}
</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>
<nz-select
[(
ngModel
)]="
data
.
letter_color
"
nzAllowClear
nzPlaceHolder=
"Please select the 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>
<a
(
click
)="
deleteLetterItem
(
it
.
right
.
letters
,
j
)"
>
delete
</a>
</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>
</div>
</div>
</div>
</div>
</div>
...
...
src/app/form/form.component.scss
View file @
68f7a736
...
@@ -6,3 +6,7 @@
...
@@ -6,3 +6,7 @@
height
:
100%
;
height
:
100%
;
}
}
nz-select
{
width
:
100%
;
}
src/app/form/form.component.ts
View file @
68f7a736
...
@@ -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_00
11
"
;
saveKey
=
"
test_00
8
"
;
// 储存对象
// 储存对象
item
;
item
;
wordArr
=
[];
constructor
(
private
appRef
:
ApplicationRef
)
{
constructor
(
private
appRef
:
ApplicationRef
)
{
...
@@ -31,6 +32,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
...
@@ -31,6 +32,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
();
...
@@ -48,7 +53,12 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
...
@@ -48,7 +53,12 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
init
()
{
init
()
{
if
(
this
.
item
.
wordArr
)
{
this
.
wordArr
=
this
.
item
.
wordArr
;
}
else
{
this
.
wordArr
=
this
.
getDefaultWordArr
();
this
.
item
.
wordArr
=
this
.
wordArr
;
}
}
}
...
@@ -91,5 +101,70 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
...
@@ -91,5 +101,70 @@ 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
:
[]
},
right
:
{
word_val
:
''
,
word_audio_url
:
''
,
letters
:
[]
}
};
}
letterData
()
{
return
{
letter_val
:
''
,
letter_color
:
'
C04
'
};
}
saveItem
()
{
this
.
save
();
}
getDefaultWordArr
()
{
let
arr
=
[];
return
arr
;
}
}
}
src/app/play/Unit.ts
View file @
68f7a736
...
@@ -864,8 +864,84 @@ export class ShapeRect extends MySprite {
...
@@ -864,8 +864,84 @@ export class ShapeRect extends MySprite {
}
}
}
}
export
class
ShapeRectNew
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
'
;
...
...
src/app/play/play.component.ts
View file @
68f7a736
...
@@ -2,7 +2,7 @@ import {Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener
...
@@ -2,7 +2,7 @@ import {Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener
import
{
import
{
Label
,
Label
,
MySprite
,
tweenChange
,
MySprite
,
ShapeRect
,
ShapeRectNew
,
tweenChange
,
}
from
'
./Unit
'
;
}
from
'
./Unit
'
;
import
{
res
,
resAudio
}
from
'
./resources
'
;
import
{
res
,
resAudio
}
from
'
./resources
'
;
...
@@ -57,7 +57,7 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -57,7 +57,7 @@ export class PlayComponent implements OnInit, OnDestroy {
canvasLeft
;
canvasLeft
;
canvasTop
;
canvasTop
;
saveKey
=
'
test_00
11
'
;
saveKey
=
'
test_00
8
'
;
btnLeft
;
btnLeft
;
...
@@ -69,6 +69,103 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -69,6 +69,103 @@ export class PlayComponent implements OnInit, OnDestroy {
curPic
;
curPic
;
//单词画面数组
word_arr_left
=
[]
;
word_arr
=
[];
word_bg_x
;
word_height
;
all_words_loaded
=
false
;
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
();
...
@@ -86,7 +183,7 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -86,7 +183,7 @@ export class PlayComponent implements OnInit, OnDestroy {
if
(
data
&&
typeof
data
==
'
object
'
)
{
if
(
data
&&
typeof
data
==
'
object
'
)
{
this
.
data
=
data
;
this
.
data
=
data
;
}
}
//
console.log('data:' , data);
console
.
log
(
'
data:
'
,
data
);
// 初始化 各事件监听
// 初始化 各事件监听
this
.
initListener
();
this
.
initListener
();
...
@@ -101,6 +198,9 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -101,6 +198,9 @@ export class PlayComponent implements OnInit, OnDestroy {
// 开始预加载资源
// 开始预加载资源
this
.
load
();
this
.
load
();
// 加载完成播放音乐
this
.
playAudio
(
"
newpage
"
);
},
this
.
saveKey
);
},
this
.
saveKey
);
}
}
...
@@ -453,14 +553,27 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -453,14 +553,27 @@ export class PlayComponent implements OnInit, OnDestroy {
* 添加预加载音频
* 添加预加载音频
*/
*/
initAudio
()
{
initAudio
()
{
// 音频资源
this
.
addUrlToAudioObj
(
this
.
data
.
audio_url
);
this
.
addUrlToAudioObj
(
this
.
data
.
audio_url_2
);
// 音效
// 音效
this
.
addUrlToAudioObj
(
'
click
'
,
this
.
rawAudios
.
get
(
'
click
'
),
0.3
);
this
.
addUrlToAudioObj
(
'
click
'
,
this
.
rawAudios
.
get
(
'
click
'
),
0.3
);
this
.
addUrlToAudioObj
(
'
newpage
'
,
this
.
rawAudios
.
get
(
'
newpage
'
));
// 音频资源
this
.
addUrlToAudioObj
(
this
.
data
.
title_audio_url
);
this
.
addUrlToAudioObj
(
this
.
data
.
words_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
);
}
let
wordRight
=
this
.
data
.
wordArr
[
i
].
right
;
if
(
wordRight
.
word_audio_url
&&
wordRight
.
word_audio_url
!=
''
)
{
this
.
addUrlToAudioObj
(
wordRight
.
word_audio_url
);
}
}
}
}
...
@@ -480,8 +593,15 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -480,8 +593,15 @@ export class PlayComponent implements OnInit, OnDestroy {
this
.
renderArr
=
[];
this
.
renderArr
=
[];
this
.
word_arr_left
=
[]
;
this
.
word_arr
=
[];
this
.
word_bg_x
=
200
;
this
.
word_height
=
0
;
this
.
all_words_loaded
=
false
;
this
.
wordLoad
=
{};
}
}
...
@@ -527,43 +647,293 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -527,43 +647,293 @@ export class PlayComponent implements OnInit, OnDestroy {
initPic
()
{
initPic
()
{
const
maxW
=
this
.
canvasWidth
*
0.7
;
// 初始化单词显示
this
.
initWord
();
// const title_bg = new ShapeRectNew();
// title_bg.y = 0;
// title_bg.setSize(200,200,20) ;
// title_bg.setOutLine('#000000',2) ;
// this.renderArr.push(title_bg);
// const maxW = this.canvasWidth * 0.7;
//
// const pic1 = new MySprite();
// pic1.init(this.images.get(this.data.pic_url));
// pic1.x = this.canvasWidth / 2;
// pic1.y = this.canvasHeight / 2;
// pic1.setScaleXY(maxW / pic1.width);
//
// this.renderArr.push(pic1);
// this.pic1 = pic1;
//
//
// const label1 = new Label();
// label1.text = this.data.text;
// label1.textAlign = 'center';
// label1.fontSize = 50;
// label1.fontName = 'BRLNSDB';
// label1.fontColor = '#ffffff';
//
// pic1.addChild(label1);
// console.log('pic1:',pic1) ;
//
//
//
//
// const pic2 = new MySprite();
// pic2.init(this.images.get(this.data.pic_url_2));
// pic2.x = this.canvasWidth / 2 + this.canvasWidth;
// pic2.y = this.canvasHeight / 2;
// pic2.setScaleXY(maxW / pic2.width);
//
// this.renderArr.push(pic2);
// this.pic2 = pic2;
//
// this.curPic = pic1;
}
/**
* 初始化单词显示
*/
initWord
()
{
this
.
drawWordSprite
();
}
/**
* 绘画单词
*/
drawWordSprite
()
{
const
getWordSprite
=
(
index
,
x
,
y
)
=>
{
// 单词背景
let
word_bg
=
new
ShapeRect
();
word_bg
.
fillColor
=
'
transparent
'
;
word_bg
.
x
=
200
+
x
;
word_bg
.
y
=
y
;
let
start
=
new
Label
();
start
.
text
=
(
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
;
word_bg
.
addChild
(
start
)
;
//单词
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
)
{
const
pic1
=
new
MySprite
();
pic1
.
init
(
this
.
images
.
get
(
this
.
data
.
pic_url
));
pic1
.
x
=
this
.
canvasWidth
/
2
;
pic1
.
y
=
this
.
canvasHeight
/
2
;
pic1
.
setScaleXY
(
maxW
/
pic1
.
width
);
this
.
renderArr
.
push
(
pic1
);
//字母
this
.
pic1
=
pic1
;
let
letter
=
word_content
.
left
.
letters
[
i
];
console
.
log
(
'
letter:
'
,
letter
)
;
let
letter_spr
=
new
Label
();
letter_spr
.
text
=
letter
.
letter_val
;
letter_spr
.
textAlign
=
'
center
'
;
// letter_spr.fontSize = word_content.word_font_size ? word_content.word_font_size : 110;
letter_spr
.
fontSize
=
50
;
letter_spr
.
fontName
=
'
MMTextBookBold
'
;
letter_spr
.
fontColor
=
this
.
getColor
(
letter
.
letter_color
);
//设置不显示
letter_spr
.
visible
=
true
;
letter_spr
.
refreshSize
();
letter_spr_arr
.
push
(
letter_spr
);
//设置y坐标
letter_spr
.
y
=
letter_spr
.
height
/
2
;
height
=
letter_spr
.
height
;
if
(
index
===
0
){
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);
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.alpha = 0;
// this.word_height = word_bg.height;
this
.
word_arr_left
.
push
(
word_bg
);
this
.
renderArr
.
push
(
word_bg
)
;
// console.log('word_arr', this.word_arr) ;
const
label1
=
new
Label
();
// 单词背景
label1
.
text
=
this
.
data
.
text
;
let
word_bg_right
=
new
ShapeRect
();
label1
.
textAlign
=
'
center
'
;
word_bg_right
.
fillColor
=
'
transparent
'
;
label1
.
fontSize
=
50
;
word_bg_right
.
x
=
word_bg
.
x
+
200
;
label1
.
fontName
=
'
BRLNSDB
'
;
word_bg_right
.
y
=
y
;
label1
.
fontColor
=
'
#ffffff
'
;
pic1
.
addChild
(
label1
);
//单词
let
totalWidth_right
=
0
;
let
height_right
=
0
;
let
letter_spr_arr_right
=
[];
for
(
let
i
=
0
;
i
<
word_content
.
right
.
letters
.
length
;
++
i
)
{
const
pic2
=
new
MySprite
();
pic2
.
init
(
this
.
images
.
get
(
this
.
data
.
pic_url_2
));
pic2
.
x
=
this
.
canvasWidth
/
2
+
this
.
canvasWidth
;
pic2
.
y
=
this
.
canvasHeight
/
2
;
pic2
.
setScaleXY
(
maxW
/
pic2
.
width
);
this
.
renderArr
.
push
(
pic2
);
this
.
pic2
=
pic2
;
this
.
curPic
=
pic1
;
//字母
let
letter
=
word_content
.
right
.
letters
[
i
];
console
.
log
(
'
letter:
'
,
letter
)
;
let
letter_spr
=
new
Label
();
letter_spr
.
text
=
letter
.
letter_val
;
letter_spr
.
textAlign
=
'
center
'
;
// letter_spr.fontSize = word_content.word_font_size ? word_content.word_font_size : 110;
letter_spr
.
fontSize
=
50
;
letter_spr
.
fontName
=
'
MMTextBookBold
'
;
letter_spr
.
fontColor
=
this
.
getColor
(
letter
.
letter_color
);
//设置不显示
letter_spr
.
visible
=
true
;
letter_spr
.
refreshSize
();
letter_spr_arr_right
.
push
(
letter_spr
);
//设置y坐标
letter_spr
.
y
=
letter_spr
.
height
/
2
;
height_right
=
letter_spr
.
height
;
totalWidth_right
+=
letter_spr
.
width
;
if
((
i
+
1
)
<
word_content
.
right
.
letters
.
length
){
totalWidth_right
+=
0
;
}
// 设置单词未加截完
this
.
setWordLoad
(
index
,
String
(
i
),
false
,
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
===
'
a
'
||
letter_spr_arr_right
[
i
].
text
===
'
e
'
)
{
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.alpha = 0;
// this.word_height = word_bg.height;
this
.
word_arr
.
push
(
word_bg_right
);
this
.
renderArr
.
push
(
word_bg_right
)
;
};
//单词个数
let
wordNum
=
this
.
data
.
wordArr
.
length
;
let
line
=
wordNum
%
2
==
0
?
wordNum
/
2
:
Math
.
ceil
(
wordNum
/
2
)
;
console
.
log
(
'
line:
'
,
line
)
;
for
(
let
i
=
0
;
i
<
wordNum
;
++
i
)
{
if
(
i
<=
line
-
1
){
getWordSprite
(
i
,
0
,
this
.
word_height
*
i
*
1.3
);
}
else
{
getWordSprite
(
i
,
500
,
this
.
word_height
*
(
i
-
line
)
*
1.3
);
}
}
}
}
/**
* 根据颜色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
;
}
return
color
;
}
btnLeftClicked
()
{
btnLeftClicked
()
{
...
@@ -625,6 +995,48 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -625,6 +995,48 @@ export class PlayComponent implements OnInit, OnDestroy {
return
;
return
;
}
}
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
))
{
console
.
log
(
'
this word left:
'
,
this
.
data
.
wordArr
[
i
])
;
this
.
playAudio
(
this
.
data
.
wordArr
[
i
].
left
.
word_audio_url
);
return
;
}
}
for
(
let
i
=
0
;
i
<
this
.
word_arr
.
length
;
++
i
){
let
word
=
this
.
word_arr
[
i
];
console
.
log
(
'
word
'
,
word
)
;
if
(
this
.
checkClickTarget
(
word
))
{
// 获取是否加载完成
let
loaded
=
this
.
getWordLoaded
(
String
(
i
));
// 未加载,不触发音效,加载单词
if
(
!
loaded
)
{
let
letters
=
this
.
getLetterSpriteFromWordLoaded
(
String
(
i
));
for
(
let
key
in
letters
)
{
let
loaded
=
letters
[
key
].
loaded
;
let
letter_spr
=
letters
[
key
].
letter
;
//加载完成,跳过
if
(
loaded
){
continue
;
}
//设置显示
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
);
return
;
}
}
if
(
this
.
checkClickTarget
(
this
.
btnLeft
)
)
{
if
(
this
.
checkClickTarget
(
this
.
btnLeft
)
)
{
this
.
btnLeftClicked
();
this
.
btnLeftClicked
();
return
;
return
;
...
...
src/app/play/resources.js
View file @
68f7a736
...
@@ -12,6 +12,7 @@ const res = [
...
@@ -12,6 +12,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
"
]
];
];
...
...
src/assets/play/music/newpage.mp3
0 → 100644
View file @
68f7a736
File added
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment