Commit 1266ad0b authored by liujiangnan's avatar liujiangnan

完善效果

parent f36e4df5
...@@ -30,23 +30,33 @@ ...@@ -30,23 +30,33 @@
<img id="card-image" v-if="imageUrl" :src="imageUrl" class="avatar"> <img id="card-image" v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i> <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload> </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>
</div>
<br> <br>
<el-input v-model="imgText" placeholder="请输入内容"></el-input> <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-select v-model="cardSize" placeholder="请选择尺寸" style="margin-top: 10px;"> <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 v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option> </el-option>
</el-select> </el-select>
<el-button type="primary" @click="handleView" style="width: 50%; margin-top: 10px;">预览</el-button> <el-button type="primary" @click="handleView" style="width: 50%; margin-top: 10px;">预览</el-button>
</template> </template>
...@@ -80,6 +90,9 @@ new Vue({ ...@@ -80,6 +90,9 @@ new Vue({
//字体加粗 //字体加粗
textStrong: false, textStrong: false,
//字体样式
textStyle: '',
//控制字体大小 //控制字体大小
showSize: false, showSize: false,
textsize: 15, textsize: 15,
...@@ -102,6 +115,11 @@ new Vue({ ...@@ -102,6 +115,11 @@ new Vue({
}; };
}, },
methods: { methods: {
handleTextStyle(val){
this.textStyle = val;
this.showColor = false;
this.showSize = false;
},
hidePlay(){ hidePlay(){
let ctx = this.play.getContext("2d"); let ctx = this.play.getContext("2d");
let cSize = this.cardSize.split("×"); let cSize = this.cardSize.split("×");
...@@ -112,6 +130,8 @@ new Vue({ ...@@ -112,6 +130,8 @@ new Vue({
}, },
handleTextStrong(){ handleTextStrong(){
this.textStrong = !this.textStrong; this.textStrong = !this.textStrong;
this.showColor = false;
this.showSize = false;
}, },
handleTextSize(){ handleTextSize(){
this.showColor = false; this.showColor = false;
...@@ -122,10 +142,14 @@ new Vue({ ...@@ -122,10 +142,14 @@ new Vue({
this.showColor = true; this.showColor = true;
}, },
handleView(){ handleView(){
if(!this.imageUrl){
this.$message.error('请选择图片!');
return;
}
if(!this.cardSize){ if(!this.cardSize){
this.$message.error('请选择尺寸!'); this.$message.error('请选择尺寸!');
return; return;
} }
let cSize = this.cardSize.split("×"); let cSize = this.cardSize.split("×");
let cardWidth = cSize[0]; let cardWidth = cSize[0];
let cardHeight = cSize[1]; let cardHeight = cSize[1];
...@@ -141,8 +165,8 @@ new Vue({ ...@@ -141,8 +165,8 @@ new Vue({
ctx.fillRect(0,0,cardWidth,cardHeight); ctx.fillRect(0,0,cardWidth,cardHeight);
let img = new Image(); let img = new Image();
img.onload = ()=>{ img.onload = ()=>{
ctx.drawImage(img ,0,0,cardWidth, cardHeight-this.textsize-20); ctx.drawImage(img ,0,0,cardWidth, cardHeight-this.textsize-30);
ctx.font=`${this.textsize}px Arial`; ctx.font=`${this.textsize}px ${this.textStyle||'Arial'}`;
ctx.fillStyle = this.textcolor; ctx.fillStyle = this.textcolor;
ctx.textAlign='center'; ctx.textAlign='center';
ctx.fillText(this.imgText,cardWidth/2,cardHeight-20); ctx.fillText(this.imgText,cardWidth/2,cardHeight-20);
...@@ -189,6 +213,18 @@ new Vue({ ...@@ -189,6 +213,18 @@ new Vue({
width: 100%; width: 100%;
display: block; 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{ .img-text{
padding-top: 10px; padding-top: 10px;
text-align: center; text-align: center;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment