Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Y
YM5-6
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
YM5-6
Commits
988b1d92
Commit
988b1d92
authored
Jan 19, 2021
by
李维
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Add background
parent
80983b9b
Changes
8
Show whitespace changes
Inline
Side-by-side
Showing
8 changed files
with
258 additions
and
10 deletions
+258
-10
app.module.ts
src/app/app.module.ts
+2
-2
background-upload.component.html
...common/background-upload/background-upload.component.html
+56
-0
background-upload.component.scss
...common/background-upload/background-upload.component.scss
+8
-0
background-upload.component.ts
...p/common/background-upload/background-upload.component.ts
+39
-0
form.component.html
src/app/form/form.component.html
+18
-2
form.component.scss
src/app/form/form.component.scss
+46
-0
form.component.ts
src/app/form/form.component.ts
+17
-0
play.component.ts
src/app/play/play.component.ts
+72
-6
No files found.
src/app/app.module.ts
View file @
988b1d92
...
...
@@ -27,7 +27,7 @@ import { far } from '@fortawesome/free-regular-svg-icons';
import
{
CoursewareFolderTableComponent
}
from
'
./common/courseware-folder-table/courseware-folder-table.component
'
;
import
{
CustomHotZone2Component
}
from
'
./common/custom-hot-zone-2/custom-hot-zone-2.component
'
;
// import { ImageChildrenEditorComponent } from './common/image-children-editor/image-children-editor.component';
import
{
BackgroundUploadComponent
}
from
'
./common/background-upload/background-upload.component
'
;
registerLocaleData
(
zh
);
...
...
@@ -45,7 +45,7 @@ registerLocaleData(zh);
UploadVideoComponent
,
CustomHotZoneComponent
,
BackgroundUploadComponent
,
CoursewareFolderTableComponent
,
CustomHotZone2Component
,
// ImageChildrenEditorComponent,
...
...
src/app/common/background-upload/background-upload.component.html
0 → 100644
View file @
988b1d92
<div
class=
"content-border"
>
<nz-form-item>
<div
nz-col
nzSpan=
"22"
></div>
<div
nz-col
nzSpan=
"2"
>
<button
nz-button
nzType=
"danger"
(
click
)="
cleanAll
()"
>
清空背景
</button>
</div>
</nz-form-item>
<nz-form-item>
<nz-form-label
[
nzSpan
]="
1
"
>
左上
</nz-form-label>
<nz-form-control
[
nzSpan
]="
7
"
>
<app-upload-image-with-preview
style=
"width: 100%"
[
picUrl
]="
items
.
leftTop
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
items
,
'
leftTop
')"
></app-upload-image-with-preview>
</nz-form-control>
<nz-form-label
[
nzSpan
]="
1
"
>
中上
</nz-form-label>
<nz-form-control
[
nzSpan
]="
7
"
>
<app-upload-image-with-preview
style=
"width: 100%"
[
picUrl
]="
items
.
middleTop
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
items
,
'
middleTop
')"
></app-upload-image-with-preview>
</nz-form-control>
<nz-form-label
[
nzSpan
]="
1
"
>
右上
</nz-form-label>
<nz-form-control
[
nzSpan
]="
7
"
>
<app-upload-image-with-preview
style=
"width: 100%"
[
picUrl
]="
items
.
rightTop
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
items
,
'
rightTop
')"
></app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label
[
nzSpan
]="
1
"
>
左中
</nz-form-label>
<nz-form-control
[
nzSpan
]="
7
"
>
<app-upload-image-with-preview
style=
"width: 100%"
[
picUrl
]="
items
.
leftMiddle
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
items
,
'
leftMiddle
')"
></app-upload-image-with-preview>
</nz-form-control>
<div
nz-col
nzSpan=
"8"
></div>
<nz-form-label
[
nzSpan
]="
1
"
>
右中
</nz-form-label>
<nz-form-control
[
nzSpan
]="
7
"
>
<app-upload-image-with-preview
style=
"width: 100%"
[
picUrl
]="
items
.
rightMiddle
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
items
,
'
rightMiddle
')"
></app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label
[
nzSpan
]="
1
"
>
左下
</nz-form-label>
<nz-form-control
[
nzSpan
]="
7
"
>
<app-upload-image-with-preview
style=
"width: 100%"
[
picUrl
]="
items
.
leftBottom
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
items
,
'
leftBottom
')"
></app-upload-image-with-preview>
</nz-form-control>
<nz-form-label
[
nzSpan
]="
1
"
>
中下
</nz-form-label>
<nz-form-control
[
nzSpan
]="
7
"
>
<app-upload-image-with-preview
style=
"width: 100%"
[
picUrl
]="
items
.
middleBottom
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
items
,
'
middleBottom
')"
></app-upload-image-with-preview>
</nz-form-control>
<nz-form-label
[
nzSpan
]="
1
"
>
右下
</nz-form-label>
<nz-form-control
[
nzSpan
]="
7
"
>
<app-upload-image-with-preview
style=
"width: 100%"
[
picUrl
]="
items
.
rightBottom
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
items
,
'
rightBottom
')"
></app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
</div>
\ No newline at end of file
src/app/common/background-upload/background-upload.component.scss
0 → 100644
View file @
988b1d92
.content-border
{
width
:
100%
;
height
:
100%
;
border-radius
:
0
.5rem
;
min-width
:
1200px
;
border
:
2px
solid
#ddd
;
padding
:
5px
;
}
\ No newline at end of file
src/app/common/background-upload/background-upload.component.ts
0 → 100644
View file @
988b1d92
import
{
Component
,
EventEmitter
,
Input
,
Output
}
from
'
@angular/core
'
;
@
Component
({
selector
:
'
app-background-upload
'
,
templateUrl
:
'
./background-upload.component.html
'
,
styleUrls
:
[
'
./background-upload.component.scss
'
]
})
export
class
BackgroundUploadComponent
{
@
Input
()
items
=
{
"
leftTop
"
:
''
,
"
middleTop
"
:
''
,
"
rightTop
"
:
''
,
"
leftMiddle
"
:
''
,
"
rightMiddle
"
:
''
,
"
leftBottom
"
:
''
,
"
middleBottom
"
:
''
,
"
rightBottom
"
:
''
};
@
Output
()
change
=
new
EventEmitter
();
constructor
(
)
{
}
onImageUploadSuccess
(
e
,
items
,
key
)
{
items
[
key
]
=
e
.
url
;
this
.
change
.
emit
(
items
)
}
cleanAll
()
{
if
(
confirm
(
"
确定清空所有背景吗?
"
))
{
this
.
items
[
"
leftTop
"
]
=
""
;
this
.
items
[
"
middleTop
"
]
=
""
;
this
.
items
[
"
rightTop
"
]
=
""
;
this
.
items
[
"
leftMiddle
"
]
=
""
;
this
.
items
[
"
rightMiddle
"
]
=
""
;
this
.
items
[
"
leftBottom
"
]
=
""
;
this
.
items
[
"
middleBottom
"
]
=
""
;
this
.
items
[
"
rightBottom
"
]
=
""
;
this
.
change
.
emit
(
this
.
items
)
}
}
deletePic
(
key
)
{
this
.
items
[
key
]
=
""
this
.
change
.
emit
(
this
.
items
)
}
}
src/app/form/form.component.html
View file @
988b1d92
...
...
@@ -60,7 +60,7 @@
<input
nz-input
type=
"text"
id=
"t_val2"
[(
ngModel
)]="
saveData
.
title
.
t_val2
"
(
blur
)="
save
()"
>
</nz-form-control>
</nz-form-item>
<
!-- <
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
]="
saveData
.
title
.
t_audio_url
"
id=
"t_audio_url"
...
...
@@ -68,7 +68,7 @@
</app-audio-recorder>
</nz-form-control>
</nz-form-item>
<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)]="saveData.title.t_font_size" [nzMin]="1" [nzStep]="1" (nzBlur)="save()">
...
...
@@ -324,4 +324,20 @@
</nz-form-item>
</div>
</div>
<div
class=
"card-config"
>
<div
class=
"card-item"
>
<div
class=
"card-item-content"
style=
"margin-top: 10px;"
>
<div
class=
"title"
>
背景 设置
</div>
<div
class=
"section"
>
<app-background-upload
[
items
]="
bgImages
"
(
change
)="
backgroundImageChanged
($
event
)"
>
</app-background-upload>
</div>
</div>
</div>
</div>
</div>
src/app/form/form.component.scss
View file @
988b1d92
...
...
@@ -11,6 +11,52 @@
}
.card-config
{
width
:
100%
;
height
:
100%
;
display
:
flex
;
flex-wrap
:
wrap
;
box-sizing
:
border-box
;
flex-direction
:column
;
.card-item
{
flex
:
1
;
margin
:
1rem
;
.card-item-content
{
.title
{
font-size
:
24px
;
width
:
100%
;
text-align
:
center
;
}
.section
{
border-top
:
1px
solid
;
padding
:
10px
0
;
.section-title
{
font-size
:
24px
;
width
:
100%
;
}
.section-content
{
display
:
flex
;
margin
:
5px
0
10px
0
;
}
}
.pic-sound-box
{
width
:
50%
;
display
:
flex
;
flex-direction
:
column
;
}
.add-btn-box
{
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
height
:
20vw
;
padding
:
10px
;
padding-top
:
5vw
;
}
}
}
}
nz-select
{
width
:
100%
;
}
...
...
src/app/form/form.component.ts
View file @
988b1d92
...
...
@@ -64,6 +64,12 @@ constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDete
recordingIndex
=
[]
listOfOption
=
[
'
1
'
,
'
2
'
,
'
3
'
,
'
4
'
];
indexAudio
=
[];
bgImages
:
Object
=
{
leftTop
:
""
,
middleTop
:
""
,
rightTop
:
""
,
leftMiddle
:
""
,
rightMiddle
:
""
,
leftBottom
:
""
,
middleBottom
:
""
,
rightBottom
:
""
};
backgroundImageChanged
(
e
)
{
this
.
save
()
}
onAudioUploadSuccessByItem_new
(
e
,
key
,
item
?)
{
if
(
item
){
item
[
key
]
=
e
.
url
;
...
...
@@ -103,6 +109,10 @@ constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDete
this
.
saveData
.
indexAudio
=
[]
}
if
(
!
this
.
saveData
.
bgImages
)
{
this
.
saveData
.
bgImages
=
{
leftTop
:
""
,
middleTop
:
""
,
rightTop
:
""
,
leftMiddle
:
""
,
rightMiddle
:
""
,
leftBottom
:
""
,
middleBottom
:
""
,
rightBottom
:
""
};
}
if
(
!
this
.
saveData
.
recordingIndex
)
{
this
.
saveData
.
recordingIndex
=
[]
}
...
...
@@ -159,6 +169,13 @@ constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDete
this
.
indexAudio
=
[
""
,
""
,
""
,
""
]
this
.
saveData
.
indexAudio
=
this
.
indexAudio
}
if
(
this
.
saveData
.
bgImages
)
{
this
.
bgImages
=
this
.
saveData
.
bgImages
}
else
{
this
.
bgImages
=
{
leftTop
:
""
,
middleTop
:
""
,
rightTop
:
""
,
leftMiddle
:
""
,
rightMiddle
:
""
,
leftBottom
:
""
,
middleBottom
:
""
,
rightBottom
:
""
};
}
}
...
...
src/app/play/play.component.ts
View file @
988b1d92
...
...
@@ -223,7 +223,7 @@ export class PlayComponent implements OnInit, OnDestroy {
}
else
{
this
.
saveData
=
defaultData
.
contentObj
.
data
;
}
// console.log('data:' ,
d
ata);
// console.log('data:' ,
this.saveD
ata);
// 初始化 各事件监听
this
.
initListener
();
...
...
@@ -653,6 +653,11 @@ export class PlayComponent implements OnInit, OnDestroy {
initImg
()
{
this
.
addUrlToImages
(
this
.
saveData
.
pic_url
);
this
.
addUrlToImages
(
this
.
saveData
.
pic_url_2
);
for
(
let
key
in
this
.
saveData
.
bgImages
)
{
if
(
this
.
saveData
.
bgImages
[
key
])
{
this
.
addUrlToImages
(
this
.
saveData
.
bgImages
[
key
]);
}
}
}
/**
...
...
@@ -725,6 +730,7 @@ export class PlayComponent implements OnInit, OnDestroy {
initView
()
{
this
.
initPic
();
this
.
initBottomPart
();
this
.
initBackgroundSide
()
}
initBottomPart
()
{
...
...
@@ -827,7 +833,7 @@ export class PlayComponent implements OnInit, OnDestroy {
word_bg_group
.
x
=
x
;
word_bg_group
.
y
=
y
;
word_bg_group
.
fillColor
=
"
#FFFF00
"
word_bg_group
.
alpha
=
1
;
word_bg_group
.
alpha
=
0
;
let
startWidth
=
80
;
//单词
...
...
@@ -1094,8 +1100,8 @@ export class PlayComponent implements OnInit, OnDestroy {
word
.
wordLoaded
=
true
;
this
.
stopAllAudio
()
this
.
playAudio
(
"
sm-choice-correct
"
,
false
,
()
=>
{
this
.
stopAllAudio
()
this
.
playAudio
(
this
.
saveData
.
wordArr
[
option
[
"
index
"
]].
word_audio_url
);
//
this.stopAllAudio()
//
this.playAudio(this.saveData.wordArr[option["index"]].word_audio_url);
})
}
else
{
...
...
@@ -1175,10 +1181,10 @@ export class PlayComponent implements OnInit, OnDestroy {
this
.
underLine
[
i
].
forEach
(
element
=>
{
element
.
alpha
=
0
;
});
}
this
.
stopAllAudio
()
this
.
playAudio
(
this
.
saveData
.
wordArr
[
i
].
word_audio_url
);
}
}
return
;
}
}
...
...
@@ -1269,6 +1275,66 @@ export class PlayComponent implements OnInit, OnDestroy {
}
calcPosition
(
position
,
width
,
height
)
{
let
map
=
{
leftTop
:
{
x
:
0
,
y
:
0
},
middleTop
:
{
x
:
this
.
canvasWidth
/
2
,
y
:
0
},
rightTop
:
{
x
:
this
.
canvasWidth
,
y
:
0
},
leftMiddle
:
{
x
:
0
,
y
:
this
.
canvasHeight
/
2
},
rightMiddle
:
{
x
:
this
.
canvasWidth
,
y
:
this
.
canvasHeight
/
2
},
leftBottom
:
{
x
:
0
,
y
:
this
.
canvasHeight
},
middleBottom
:
{
x
:
this
.
canvasWidth
/
2
,
y
:
this
.
canvasHeight
},
rightBottom
:
{
x
:
this
.
canvasWidth
,
y
:
this
.
canvasHeight
}
}
switch
(
position
)
{
case
"
leftTop
"
:
map
[
"
leftTop
"
].
x
+=
width
*
this
.
mapScale
/
2
,
map
[
"
leftTop
"
].
y
+=
height
*
this
.
mapScale
/
2
;
return
map
[
"
leftTop
"
];
case
"
middleTop
"
:
map
[
"
middleTop
"
].
y
+=
height
*
this
.
mapScale
/
2
;
return
map
[
"
middleTop
"
];
case
"
rightTop
"
:
map
[
"
rightTop
"
].
x
-=
width
*
this
.
mapScale
/
2
,
map
[
"
rightTop
"
].
y
+=
height
*
this
.
mapScale
/
2
;
return
map
[
"
rightTop
"
];
case
"
leftMiddle
"
:
map
[
"
leftMiddle
"
].
x
+=
height
*
this
.
mapScale
/
2
;
return
map
[
"
leftMiddle
"
];
case
"
rightMiddle
"
:
map
[
"
rightMiddle
"
].
x
-=
height
*
this
.
mapScale
/
2
;
return
map
[
"
rightMiddle
"
];
case
"
leftBottom
"
:
map
[
"
leftBottom
"
].
x
+=
width
*
this
.
mapScale
/
2
,
map
[
"
leftBottom
"
].
y
-=
height
*
this
.
mapScale
/
2
;
return
map
[
"
leftBottom
"
];
case
"
middleBottom
"
:
map
[
"
middleBottom
"
].
y
-=
height
*
this
.
mapScale
/
2
;
return
map
[
"
middleBottom
"
];
case
"
rightBottom
"
:
map
[
"
rightBottom
"
].
x
-=
width
*
this
.
mapScale
/
2
,
map
[
"
rightBottom
"
].
y
-=
height
*
this
.
mapScale
/
2
;
return
map
[
"
rightBottom
"
];
}
}
initBackgroundSide
()
{
for
(
let
key
in
this
.
saveData
.
bgImages
)
{
if
(
!
this
.
saveData
.
bgImages
[
key
])
{
continue
}
let
sp
=
new
MySprite
()
sp
.
init
(
this
.
images
.
get
(
this
.
saveData
.
bgImages
[
key
]))
sp
.
scaleX
=
this
.
mapScale
;
sp
.
scaleY
=
this
.
mapScale
;
let
pos
=
this
.
calcPosition
(
key
,
sp
.
width
,
sp
.
height
);
sp
.
x
=
pos
.
x
;
sp
.
y
=
pos
.
y
;
this
.
renderArr
.
push
(
sp
)
}
}
}
...
...
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