Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
O
omt-flash-card
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
omt-flash-card
Commits
1266ad0b
Commit
1266ad0b
authored
Jan 06, 2020
by
liujiangnan
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
完善效果
parent
f36e4df5
Changes
1
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
51 additions
and
15 deletions
+51
-15
index.html
index/index.html
+51
-15
No files found.
index/index.html
View file @
1266ad0b
...
...
@@ -30,19 +30,29 @@
<img
id=
"card-image"
v-if=
"imageUrl"
:src=
"imageUrl"
class=
"avatar"
>
<i
v-else
class=
"el-icon-plus avatar-uploader-icon"
></i>
</el-upload>
<div
class=
"img-text"
:style=
"{fontSize: textsize + 'px', color: textcolor, 'font-weight': textStrong?'800':'100'
}"
>
{{imgText}}
</div>
<div
class=
"img-text"
:style=
"{fontSize: textsize + 'px', color: textcolor, 'font-weight': textStrong?'800':'100'
, 'font-family': textStyle
}"
>
{{imgText}}
</div>
<br>
<div
v-if=
"imgText"
align=
"center"
>
<el-button-group>
<el-button
size=
"small"
type=
"primary"
@
click=
"handleTextStrong"
>
字体加粗
</el-button>
<el-button
size=
"small"
type=
"primary"
@
click=
"handleTextSize"
>
字体大小
</el-button>
<el-button
size=
"small"
type=
"primary"
@
click=
"handleTextColor"
>
字体颜色
</el-button>
</el-button-group>
<el-slider
v-if=
"showSize"
v-model=
"textsize"
:min=
"13"
></el-slider>
<el-color-picker
v-if=
"showColor"
v-model=
"textcolor"
></el-color-picker>
<el-input
v-model=
"imgText"
placeholder=
"请输入内容"
></el-input>
<div
v-if=
"imgText"
align=
"left"
style=
"position: relative;top: 2px;"
>
<el-dropdown
trigger=
"click"
@
command=
"handleTextStyle"
>
<el-button
size=
"small"
type=
"primary"
>
Aa字体
<i
class=
"el-icon-arrow-down el-icon--right"
></i>
</el-button>
<el-dropdown-menu
slot=
"dropdown"
>
<el-dropdown-item
command=
"Arial"
>
Arial
</el-dropdown-item>
<el-dropdown-item
command=
"Microsoft YaHei"
>
Microsoft YaHei
</el-dropdown-item>
<el-dropdown-item
command=
"SimHei"
>
黑体
</el-dropdown-item>
<el-dropdown-item
command=
"SimSun"
>
宋体
</el-dropdown-item>
<el-dropdown-item
command=
"sans-serif"
>
sans-serif
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-button
size=
"small"
type=
"primary"
@
click=
"handleTextSize"
>
Tt字号
</el-button>
<el-button
size=
"small"
type=
"primary"
@
click=
"handleTextStrong"
><span
style=
"font-weight: 800;"
>
B
</span></el-button>
<el-button
size=
"small"
type=
"primary"
@
click=
"handleTextColor"
>
颜色
</el-button>
<el-color-picker
v-if=
"showColor"
v-model=
"textcolor"
size=
"mini"
>
</el-color-picker>
</div>
<el-slider
v-if=
"showSize"
v-model=
"textsize"
:min=
"13"
></el-slider>
<br>
<el-input
v-model=
"imgText"
placeholder=
"请输入内容"
></el-input>
<el-select
v-model=
"cardSize"
placeholder=
"请选择尺寸"
style=
"margin-top: 10px;"
>
<el-option
v-for=
"item in options"
:key=
"item.value"
:label=
"item.label"
:value=
"item.value"
>
</el-option>
...
...
@@ -80,6 +90,9 @@ new Vue({
//字体加粗
textStrong
:
false
,
//字体样式
textStyle
:
''
,
//控制字体大小
showSize
:
false
,
textsize
:
15
,
...
...
@@ -102,6 +115,11 @@ new Vue({
};
},
methods
:
{
handleTextStyle
(
val
){
this
.
textStyle
=
val
;
this
.
showColor
=
false
;
this
.
showSize
=
false
;
},
hidePlay
(){
let
ctx
=
this
.
play
.
getContext
(
"
2d
"
);
let
cSize
=
this
.
cardSize
.
split
(
"
×
"
);
...
...
@@ -112,6 +130,8 @@ new Vue({
},
handleTextStrong
(){
this
.
textStrong
=
!
this
.
textStrong
;
this
.
showColor
=
false
;
this
.
showSize
=
false
;
},
handleTextSize
(){
this
.
showColor
=
false
;
...
...
@@ -122,6 +142,10 @@ new Vue({
this
.
showColor
=
true
;
},
handleView
(){
if
(
!
this
.
imageUrl
){
this
.
$message
.
error
(
'
请选择图片!
'
);
return
;
}
if
(
!
this
.
cardSize
){
this
.
$message
.
error
(
'
请选择尺寸!
'
);
return
;
...
...
@@ -141,8 +165,8 @@ new Vue({
ctx
.
fillRect
(
0
,
0
,
cardWidth
,
cardHeight
);
let
img
=
new
Image
();
img
.
onload
=
()
=>
{
ctx
.
drawImage
(
img
,
0
,
0
,
cardWidth
,
cardHeight
-
this
.
textsize
-
2
0
);
ctx
.
font
=
`
${
this
.
textsize
}
px
Arial
`
;
ctx
.
drawImage
(
img
,
0
,
0
,
cardWidth
,
cardHeight
-
this
.
textsize
-
3
0
);
ctx
.
font
=
`
${
this
.
textsize
}
px
${
this
.
textStyle
||
'
Arial
'
}
`
;
ctx
.
fillStyle
=
this
.
textcolor
;
ctx
.
textAlign
=
'
center
'
;
ctx
.
fillText
(
this
.
imgText
,
cardWidth
/
2
,
cardHeight
-
20
);
...
...
@@ -189,6 +213,18 @@ new Vue({
width
:
100%
;
display
:
block
;
}
.el-color-picker
{
position
:
absolute
;
top
:
0px
;
margin-left
:
2px
;
}
.el-button
{
background-color
:
#52c8a0
;
border
:
#fff
;
}
.el-button
+
.el-button
{
margin-left
:
0px
;
}
.img-text
{
padding-top
:
10px
;
text-align
:
center
;
...
...
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