Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
J
JM12
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
JM12
Commits
eb69f17c
Commit
eb69f17c
authored
Aug 19, 2021
by
liujiaxin
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
jm 12
parent
511e8287
Changes
7
Hide whitespace changes
Inline
Side-by-side
Showing
7 changed files
with
223 additions
and
14 deletions
+223
-14
app.module.ts
src/app/app.module.ts
+2
-0
scale-text.directive.ts
src/app/directives/scale-text.directive.ts
+47
-0
play.component.css
src/app/play/play.component.css
+39
-8
play.component.html
src/app/play/play.component.html
+5
-3
play.component.ts
src/app/play/play.component.ts
+31
-3
text.service.ts
src/app/services/text.service.ts
+99
-0
icon-correct.png
src/assets/play/icon-correct.png
+0
-0
No files found.
src/app/app.module.ts
View file @
eb69f17c
...
...
@@ -21,6 +21,7 @@ import { far } from '@fortawesome/free-regular-svg-icons';
import
{
ContentsPipe
}
from
'
./pipes/contents.pipe
'
;
// import { TouchStrategy } from './play/touch-strategy';
import
{
CustomScrollBarDirective
}
from
'
./play/scrollbar.directive
'
;
import
{
ScaleTextDirective
}
from
'
./directives/scale-text.directive
'
;
registerLocaleData
(
zh
);
...
...
@@ -34,6 +35,7 @@ registerLocaleData(zh);
ContentsPipe
,
TimePipe
,
CustomScrollBarDirective
,
ScaleTextDirective
,
],
imports
:
[
...
...
src/app/directives/scale-text.directive.ts
0 → 100644
View file @
eb69f17c
import
{
AfterContentInit
,
AfterViewInit
,
Directive
,
ElementRef
,
Input
,
OnInit
}
from
'
@angular/core
'
;
import
{
TextService
}
from
'
../services/text.service
'
;
/**
* yarn add better-scroll
*/
@
Directive
({
selector
:
'
[appScaleText]
'
,
providers
:[
TextService
]
})
export
class
ScaleTextDirective
implements
AfterViewInit
{
@
Input
()
offsetX
=
0
;
private
Element
:
any
;
private
textService
:
TextService
;
constructor
(
textService
:
TextService
,
Element
:
ElementRef
)
{
this
.
Element
=
Element
;
this
.
textService
=
textService
;
// console.log('textService', textService);
}
ngAfterViewInit
()
{
console
.
log
(
11111
);
const
txt
=
this
.
Element
.
nativeElement
.
textContent
;
if
(
!
txt
.
trim
())
{
return
;
}
const
s
=
window
.
getComputedStyle
(
this
.
Element
.
nativeElement
)
;
const
w
=
this
.
textService
.
textWidth
(
txt
,
{
style
:
s
.
fontStyle
,
variant
:
s
.
fontVariant
,
weight
:
s
.
fontWeight
,
size
:
s
.
fontSize
,
family
:
s
.
fontFamily
,
align
:
s
.
textAlign
,
baseline
:
'
alphabetic
'
});
console
.
log
(
w
)
}
}
src/app/play/play.component.css
View file @
eb69f17c
...
...
@@ -65,7 +65,7 @@
.lesson-text
{
font-family
:
ASans
;
font-size
:
22px
;}
.questions
{
flex
:
0
auto
;
height
:
28
0px
;
height
:
32
0px
;
margin-bottom
:
48px
;
}
:host
::ng-deep
.question-card-box
{
...
...
@@ -162,6 +162,7 @@
overflow
:
hidden
;
display
:
flex
;
flex-direction
:
column
;
padding-bottom
:
36px
;
}
.body-board-container
{
width
:
100%
;
...
...
@@ -303,6 +304,7 @@
font-size
:
22px
;
line-height
:
35px
;
font-family
:
'ABLACK'
;
position
:
relative
;
}
.q-answer.r
{
background
:
#007b3e
;
...
...
@@ -411,6 +413,9 @@
font-weight
:
400
;
flex
:
1
auto
;
font-family
:
'ASans'
;
word-break
:
break-all
;
height
:
100px
;
overflow
:
hidden
;
}
.question-answer
{
height
:
140px
;
...
...
@@ -430,17 +435,23 @@
position
:
relative
;
}
.btn-box
.option
{
background-image
:
url(../../assets/play/opt-bg.png)
;
background-repeat
:
no-repeat
;
background-size
:
contain
;
/*background-image: url(../../assets/play/opt-bg.png);*/
/*background-repeat: no-repeat;*/
/*background-size: contain;*/
width
:
100%
;
height
:
56px
;
line-height
:
44px
;
font-size
:
1
8
px
;
font-size
:
1
6
px
;
color
:
#fff
;
text-align
:
center
;
z-index
:
1
;
position
:
relative
;
border
:
6px
solid
#0079a6
;
border-radius
:
18px
;
background
:
#008cb9
;
height
:
50px
;
margin-bottom
:
6px
;
line-height
:
38px
;
}
.btn-box
.option
.lbl
{
background-image
:
url(../../assets/play/rectangle-56@3x.png)
;
...
...
@@ -457,9 +468,19 @@
color
:
#82d7ff
;
text-align
:
center
;
top
:
50%
;
transform
:
translateY
(
-50%
);
}
.btn-box.selected
.option
{
background-image
:
url(../../assets/play/opt-bg-sel.png)
;
/*background-image: url(../../assets/play/opt-bg-sel.png);*/
background
:
rgba
(
129
,
194
,
224
,
1.0
);
/*background: -webkit-radial-gradient(center, rgba(129, 194, 224, 1.0), rgba(0, 140, 185, 1.0));*/
/*background: -moz-radial-gradient(center, rgba(129, 194, 224, 1.0), rgba(0, 140, 185, 1.0));*/
background
:
radial-gradient
(
ellipse
at
center
,
rgba
(
129
,
194
,
224
,
1
),
rgba
(
0
,
140
,
185
,
1
));
background-size
:
100%
800%
;
background-position
:
center
;
top
:
8px
;
}
...
...
@@ -477,7 +498,7 @@
height
:
104px
;
z-index
:
0
;
position
:
absolute
;
height
:
7
2px
;
height
:
8
2px
;
z-index
:
0
;
left
:
50%
;
transform
:
translateX
(
-50%
);
...
...
@@ -559,12 +580,15 @@
.analysis
{
position
:
relative
;
width
:
100%
;
margin-bottom
:
32px
;
}
img
.c-icon
{
right
:
0px
;
top
:
4px
;
position
:
absolute
;
width
:
36px
;}
.analysis-content
{
background
:
#54c348
;
margin
:
8px
;
padding
:
12
px
;
padding
:
24
px
;
color
:
#fff
;
text-align
:
center
;
}
.analysis
:before
{
content
:
''
;
...
...
@@ -584,3 +608,10 @@
right
:
0
;
bottom
:
0
;
}
.q-qo
{
overflow
:
hidden
;
width
:
100%
;
height
:
100%
;
text-indent
:
-42px
;
padding-left
:
42px
;
}
src/app/play/play.component.html
View file @
eb69f17c
...
...
@@ -27,7 +27,7 @@
<img
class=
"shadow"
src=
"assets/play/blue-shadow.png"
alt=
""
>
<div
class=
"option"
>
<div
class=
"lbl"
>
{{o}}
</div>
<
span>
{{q['questionOption'+o]}}
</span
>
<
div
class=
"q-qo"
>
{{q['questionOption'+o]}}
</div
>
</div>
</div>
</ng-container>
...
...
@@ -66,12 +66,14 @@
<div
class=
"q-info"
>
<div
class=
"q-title"
>
{{i + 1}}. {{q.questionTitle}}
</div>
<div
class=
"q-answer"
[
ngClass
]="
q
.
questionAnswer =
=
userAnswers
[
i
]
?
'
r
'
:
'
w
'"
>
{{q.questionAnswer}}
<span>
{{userAnswers[i]}} .
</span>
<span
style=
"margin-left: 16px;"
*
ngIf=
"q.questionAnswer != userAnswers[i]"
>
{{q['questionOption'+userAnswers[i]]}}
</span>
<img
*
ngIf=
"q.questionAnswer == userAnswers[i]"
class=
"c-icon"
src=
"assets/play/icon-correct.png"
alt=
""
>
</div>
</div>
<div
class=
"q-explain"
>
<img
class=
"explain-bubble"
src=
"assets/play/explain-bubble.png"
alt=
""
>
<div>
{{q.questionAnswer}}. {{q['questionOption'+q.questionAnswer]}}
</div>
{{q.questionExplain}}
</div>
</div>
...
...
src/app/play/play.component.ts
View file @
eb69f17c
...
...
@@ -14,6 +14,7 @@ import TWEEN from '@tweenjs/tween.js';
import
{
NzCarouselComponent
}
from
'
ng-zorro-antd
'
;
import
Splide
from
'
@splidejs/splide
'
;
import
{
animate
,
state
,
style
,
transition
,
trigger
}
from
'
@angular/animations
'
;
import
{
TextService
}
from
'
../services/text.service
'
;
interface
QuestionType
{
questionAnswer
:
number
;
...
...
@@ -75,7 +76,7 @@ export class PlayComponent implements OnInit, OnDestroy {
splide
:
Splide
;
private
AudioEffect
:
{
[
key
:
string
]:
HTMLAudioElement
};
private
ss
:
(
el
)
=>
void
;
constructor
()
{
constructor
(
private
textService
:
TextService
)
{
window
.
addEventListener
(
'
message
'
,
(
e
)
=>
{
const
msgData
=
e
.
data
;
...
...
@@ -157,8 +158,35 @@ export class PlayComponent implements OnInit, OnDestroy {
left
:
'
11%
'
,
},
// fixedWidth: '80%',
}
).
mount
();
});
this
.
splide
.
on
(
'
ready
'
,
(
e
)
=>
{
return
const
qos
=
document
.
querySelectorAll
(
'
.q-qo
'
);
console
.
log
(
qos
);
qos
.
forEach
((
qo
:
HTMLElement
)
=>
{
const
txt
=
qo
.
textContent
;
if
(
!
txt
.
trim
())
{
return
;
}
const
s
=
window
.
getComputedStyle
(
qo
)
;
const
w
=
this
.
textService
.
textImage
(
txt
,
{
style
:
s
.
fontStyle
,
variant
:
s
.
fontVariant
,
color
:
s
.
color
,
weight
:
s
.
fontWeight
,
size
:
parseInt
(
s
.
fontSize
,
10
)
,
family
:
s
.
fontFamily
,
align
:
s
.
textAlign
,
baseline
:
'
alphabetic
'
});
console
.
log
(
qo
.
offsetWidth
,
w
);
const
img
=
document
.
createElement
(
'
img
'
);
img
.
src
=
w
;
qo
.
replaceWith
(
img
);
});
window
[
'
air
'
].
hideAirClassLoading
(
this
.
saveKey
,
this
.
data
);
});
this
.
splide
.
on
(
'
click
'
,
(
e
)
=>
{
if
(
this
.
splide
.
index
===
e
.
index
)
{
...
...
@@ -168,7 +196,7 @@ export class PlayComponent implements OnInit, OnDestroy {
console
.
log
(
'
click
'
,
e
);
this
.
splide
.
go
(
`>
${
e
.
index
}
`
);
});
window
[
'
air
'
].
hideAirClassLoading
(
this
.
saveKey
,
this
.
data
);
this
.
splide
.
mount
(
);
...
...
src/app/services/text.service.ts
0 → 100644
View file @
eb69f17c
import
{
Injectable
}
from
'
@angular/core
'
;
@
Injectable
({
providedIn
:
'
root
'
})
export
class
TextService
{
private
canvas
:
any
;
private
context
:
any
;
constructor
()
{
this
.
canvas
=
document
.
createElement
(
'
canvas
'
);
this
.
context
=
this
.
canvas
.
getContext
(
'
2d
'
);
this
.
context
.
textBaseline
=
'
baseline
'
;
this
.
context
.
fillStyle
=
'
rgba(0, 0, 0, 1)
'
;
}
textWidth
(
text
,
options
)
{
this
.
context
.
restore
();
this
.
context
.
save
();
this
.
context
.
clearRect
(
0
,
0
,
this
.
canvas
.
width
,
this
.
canvas
.
height
);
options
=
Object
.
assign
({
style
:
'
normal
'
,
variant
:
'
normal
'
,
weight
:
'
normal
'
,
size
:
'
medium
'
,
family
:
'
sans-serif
'
,
align
:
'
start
'
,
baseline
:
'
alphabetic
'
},
options
);
let
size
=
options
.
size
;
if
(
typeof
size
===
'
number
'
)
{
size
=
size
+
'
px
'
;
}
this
.
context
.
font
=
`
${
options
.
style
}
${
options
.
variant
}
${
options
.
weight
}
${
size
}
${
options
.
family
}
`
;
this
.
context
.
textAlign
=
options
.
align
;
this
.
context
.
textBaseline
=
options
.
baseline
;
return
this
.
context
.
measureText
(
text
).
width
;
}
textImage
(
text
,
options
)
{
this
.
context
.
clearRect
(
0
,
0
,
this
.
canvas
.
width
,
this
.
canvas
.
height
);
options
=
Object
.
assign
({
style
:
'
normal
'
,
variant
:
'
normal
'
,
weight
:
'
normal
'
,
size
:
'
medium
'
,
color
:
'
#000
'
,
family
:
'
sans-serif
'
,
align
:
'
start
'
,
baseline
:
'
alphabetic
'
},
options
);
let
size
=
options
.
size
;
if
(
typeof
size
===
'
number
'
)
{
size
=
(
size
)
+
'
px
'
;
}
this
.
context
.
fillStyle
=
options
.
color
;
this
.
context
.
font
=
`
${
options
.
style
}
${
options
.
variant
}
${
options
.
weight
}
${
size
}
${
options
.
family
}
`
;
this
.
context
.
textAlign
=
options
.
align
;
this
.
context
.
textBaseline
=
options
.
baseline
;
const
width
=
this
.
context
.
measureText
(
text
).
width
;
this
.
context
.
canvas
.
width
=
width
;
this
.
context
.
fillStyle
=
options
.
color
;
this
.
context
.
font
=
`
${
options
.
style
}
${
options
.
variant
}
${
options
.
weight
}
${
size
}
${
options
.
family
}
`
;
this
.
context
.
textAlign
=
options
.
align
;
this
.
context
.
textBaseline
=
options
.
baseline
;
// this.context.fillText(text, 0 , 0);
this
.
context
.
fillText
(
text
,
width
/
2
,
options
.
size
*
2
);
// this.context.fillText(text, width, 0);
return
this
.
context
.
canvas
.
toDataURL
(
'
image/png
'
);
const
image
=
this
.
context
.
getImageData
(
0
,
0
,
width
,
options
.
size
*
2
);
const
tempCanvas
=
document
.
createElement
(
'
canvas
'
);
const
tempCtx
=
tempCanvas
.
getContext
(
'
2d
'
);
// set the temp canvas size == the canvas size
tempCanvas
.
width
=
image
.
width
;
tempCanvas
.
height
=
image
.
height
;
// put the modified pixels on the temp canvas
tempCtx
.
putImageData
(
image
,
0
,
0
);
this
.
context
.
restore
();
return
tempCanvas
.
toDataURL
(
'
image/png
'
);
}
}
src/assets/play/icon-correct.png
0 → 100644
View file @
eb69f17c
9.65 KB
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