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
5 years ago
by
chaiyajie
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
首次提交
parent
a7e92ed4
Changes
7
Show 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;"
>
</div>
<div
nz-form
>
<input
type=
"text"
nz-input
[(
ngModel
)]="
item
.
text
"
(
blur
)="
save
()"
>
<div>
<nz-divider
nzText=
"课程标题"
nzOrientation=
"left"
></nz-divider>
<app-upload-image-with-preview
<nz-form-item>
[
picUrl
]="
item
.
pic_url
"
<nz-form-label
[
nzSpan
]="
3
"
nzFor=
"title_left"
>
标题左半部分
</nz-form-label>
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
'
pic_url
')"
<nz-form-control
[
nzSpan
]="
6
"
>
></app-upload-image-with-preview>
<input
nz-input
type=
"text"
id=
"title_left"
placeholder=
"C"
[(
ngModel
)]="
item
.
title_left
"
(
blur
)="
save
()"
>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label
[
nzSpan
]="
3
"
nzFor=
"title_right"
>
标题右半部分
</nz-form-label>
<nz-form-control
[
nzSpan
]="
6
"
>
<input
nz-input
type=
"text"
id=
"title_right"
placeholder=
"Listen write and read"
[(
ngModel
)]="
item
.
title_right
"
(
blur
)="
save
()"
>
</nz-form-control>
</nz-form-item>
<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
<app-audio-recorder
[
audioUrl
]="
item
.
audio_url
"
[
audioUrl
]="
item
.
title_audio_url
"
id=
"title_audio_url"
(
audioUploaded
)="
onAudioUploadSuccess
($
event
,
'
audio_url
')"
(
audioUploaded
)="
onAudioUploadSuccess
($
event
,
'
title_audio_url
')"
>
></app-audio-recorder>
</app-audio-recorder>
</nz-form-control>
</nz-form-item>
</div>
</div>
<div>
<nz-divider
nzText=
"字母(组合)"
nzOrientation=
"left"
></nz-divider>
<nz-form-item>
<div
style=
"position: absolute; left: 1000px; top: 100px; width: 300px;"
>
<nz-form-label
[
nzSpan
]="
3
"
nzFor=
"words"
>
字母组合
</nz-form-label>
<nz-form-control
[
nzSpan
]="
6
"
>
<input
type=
"text"
nz-input
[(
ngModel
)]="
item
.
text_2
"
(
blur
)="
save
()"
>
<input
nz-input
type=
"text"
id=
"words"
[(
ngModel
)]="
item
.
words
"
(
blur
)="
save
()"
>
</nz-form-control>
<app-upload-image-with-preview
</nz-form-item>
[
picUrl
]="
item
.
pic_url_2
"
<nz-form-item>
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
'
pic_url_2
')"
<nz-form-label
[
nzSpan
]="
3
"
nzFor=
"words_audio_url"
>
字母组合发音
</nz-form-label>
></app-upload-image-with-preview>
<nz-form-control
[
nzSpan
]="
6
"
>
<app-audio-recorder
<app-audio-recorder
[
audioUrl
]="
item
.
audio_url_2
"
[
audioUrl
]="
item
.
words_audio_url
"
id=
"words_audio_url"
(
audioUploaded
)="
onAudioUploadSuccess
($
event
,
'
audio_url_2
')"
(
audioUploaded
)="
onAudioUploadSuccess
($
event
,
'
words_audio_url
')"
>
></app-audio-recorder>
</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>
<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>
...
...
This diff is collapsed.
Click to expand it.
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%
;
}
This diff is collapsed.
Click to expand it.
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
;
}
}
}
This diff is collapsed.
Click to expand it.
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
'
;
...
...
This diff is collapsed.
Click to expand it.
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
)
{
//字母
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
);
}
const
pic1
=
new
MySprite
();
let
temp_startX
=
0
;
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
);
//设置所有字母的x坐标
this
.
pic1
=
pic1
;
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
;
}
const
label1
=
new
Label
();
word_bg
.
setSize
(
totalWidth
,
height
);
label1
.
text
=
this
.
data
.
text
;
// 设置不显示
label1
.
textAlign
=
'
center
'
;
// word_bg.alpha = 0;
label1
.
fontSize
=
50
;
// this.word_height = word_bg.height;
label1
.
fontName
=
'
BRLNSDB
'
;
this
.
word_arr_left
.
push
(
word_bg
);
label1
.
fontColor
=
'
#ffffff
'
;
this
.
renderArr
.
push
(
word_bg
)
;
// console.log('word_arr', this.word_arr) ;
pic1
.
addChild
(
label1
);
// 单词背景
let
word_bg_right
=
new
ShapeRect
();
word_bg_right
.
fillColor
=
'
transparent
'
;
word_bg_right
.
x
=
word_bg
.
x
+
200
;
word_bg_right
.
y
=
y
;
//单词
let
totalWidth_right
=
0
;
let
height_right
=
0
;
let
letter_spr_arr_right
=
[];
const
pic2
=
new
MySprite
();
for
(
let
i
=
0
;
i
<
word_content
.
right
.
letters
.
length
;
++
i
)
{
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
);
//字母
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
.
renderArr
.
push
(
pic2
);
// 设置单词未加截完
this
.
pic2
=
pic2
;
this
.
setWordLoad
(
index
,
String
(
i
),
false
,
letter_spr
)
;
this
.
curPic
=
pic1
;
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
;
...
...
This diff is collapsed.
Click to expand it.
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
"
]
];
];
...
...
This diff is collapsed.
Click to expand it.
src/assets/play/music/newpage.mp3
0 → 100644
View file @
68f7a736
File added
This diff is collapsed.
Click to expand it.
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