Skip to content

Commit

Permalink
Merge pull request #17 from langyuxiansheng/dev_v1.1.0
Browse files Browse the repository at this point in the history 
更新和优化
  • Loading branch information
@langyuxiansheng
langyuxiansheng authored Aug 5, 2020
2 parents 1459f44 + 8331235 commit a86bd09
Show file tree
Hide file tree
Showing 8 changed files with 305 additions and 126 deletions.
109 changes: 103 additions & 6 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@ import SignCanvas from 'sign-canvas';
Vue.use(SignCanvas);

//局部注册
import SC from 'sign-canvas';
import SignCanvas from 'sign-canvas';

components:{ SignCanvas:SC.SignCanvas }
components:{ SignCanvas }

```

Expand All @@ -26,8 +26,69 @@ components:{ SignCanvas:SC.SignCanvas }
```html
<template>
<div id="app">
<h2 class="title">Vue Sign Canvas 电子签名板</h2>
<sign-canvas class="sign-canvas" ref="SignCanvas" :options="options" v-model="value"/>
<img v-if="value" class="view-image" :src="value" width="150" height="150">
<div class="config">
<ul class="ul-config">
<li class="li-c">
<span class="item-label">书写速度:</span>
<span class="item-content">
<select name="isSign" v-model="options.isSign">
<option :value="true">签名</option>
<option :value="false">写字</option>
</select>
</span>
</li>
<li class="li-c">
<span class="item-label">显示边框/网格:</span>
<span class="item-content">
<select name="isSign" v-model="options.isShowBorder">
<option :value="true">显示</option>
<option :value="false">不显示</option>
</select>
</span>
</li>
<li class="li-c">
<span class="item-label">下笔宽度:</span>
<span class="item-content">
<input v-model="options.writeWidth" type="number">
</span>
</li>
<li class="li-c">
<span class="item-label">线条的边缘类型:</span>
<span class="item-content">
<select name="lineCap" v-model="options.lineCap">
<option value="butt">平直的边缘</option>
<option value="round">圆形线帽</option>
<option value="square">正方形线帽</option>
</select>
</span>
</li>
<li class="li-c">
<span class="item-label">线条交汇时边角的类型:</span>
<span class="item-content">
<select name="lineCap" v-model="options.lineJoin">
<option value="bevel">创建斜角</option>
<option value="round">创建圆角</option>
<option value="miter">创建尖角</option>
</select>
</span>
</li>
<li class="li-c">
<span class="item-label">画笔颜色:</span>
<span class="item-content">
<input type="color" v-model="options.writeColor">
</span>
</li>
<li class="li-c">
<span class="item-label">背景色:</span>
<span class="item-content">
<input type="color" v-model="options.bgColor">
</span>
</li>
</ul>
</div>
<div class="sign-btns">
<span id="clear" @click="canvasClear()">清空</span>
<span id="save" @click="saveAsImg()">保存</span>
Expand All @@ -41,10 +102,22 @@ export default {
return {
value: null,
options:{
lastWriteSpeed: 1, //书写速度 [Number] 可选
lastWriteWidth: 2, //下笔的宽度 [Number] 可选
lineCap: 'round', //线条的边缘类型 [butt]平直的边缘 [round]圆形线帽 [square] 正方形线帽
lineJoin: 'bevel', //线条交汇时边角的类型 [bevel]创建斜角 [round]创建圆角 [miter]创建尖角。
canvasWidth: 350, //canvas宽高 [Number] 可选
canvasHeight: 370, //高度 [Number] 可选
isShowBorder: true, //是否显示边框 [可选]
bgColor: '#fcc', //背景色 [String] 可选
borderWidth: 1, // 网格线宽度 [Number] 可选
borderColor: "#ff787f", //网格颜色 [String] 可选
writeWidth: 5, //基础轨迹宽度 [Number] 可选
maxWriteWidth: 30, // 写字模式最大线宽 [Number] 可选
minWriteWidth: 5, // 写字模式最小线宽 [Number] 可选
writeColor: '#101010', // 轨迹颜色 [String] 可选
isSign: true, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框
isShowBorder: false, //是否显示边框 [可选]
imgType:'png' //下载的图片格式 [String] 可选为 jpeg canvas本是透明背景的
}
}
},
Expand Down Expand Up @@ -80,25 +153,44 @@ export default {
margin: 0;
padding: 0;
}
.title{
padding: 20px;
text-align: center;
}
.sign-canvas{
display: block;
margin: 20px auto;
border: 1px dashed #f00;
}
.view-image{
display: block;
margin: 20px auto;
}
.config{
width: 350px;
margin: 20px auto;
.ul-config{
.li-c{
display: flex;
align-items: center;
padding: 4px 10px;
.item-label{
font-size: 14px;
}
.item-content{
margin-left: 10px;
}
}
}
}
.sign-btns{
margin: 0 auto;
display: flex;
justify-content: space-between;
#clear,
#clear1,
#save {
display: inline-block;
padding: 5px 10px;
width: 100px;
width: 76px;
height: 40px;
line-height: 40px;
border: 1px solid #eee;
Expand Down Expand Up @@ -221,6 +313,11 @@ npm run lint

## 更新日志

> v1.1.0 本次更新调整较大,内容如下:
- 调整局部组件注册的逻辑,全局使用的不收影响,如果有局部注册的朋友请调整一下.
- 调整demo样式,增加动态配置项,属性支持动态响应了;
- 修复滚动距离导致画点偏移的bug,优化核心代码,感谢网友“Jayj1997”的建议和反馈。

> v1.0.7 修复定位下的轨迹偏移,受position属性的影响的bug。感谢网友“gexiaoyun” 和 “xingguyue”的反馈。
> v1.0.6 修复多个canvas无法同时存在的bug,修复移动端滚动后影响绘制轨迹的bug。感谢网友“hytao2017”的反馈。
Expand Down
104 changes: 93 additions & 11 deletions examples/App.vue
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,68 @@
<template>
<div id="app">
<h2 class="title">Vue Sign Canvas</h2>
<h2 class="title">Vue Sign Canvas 电子签名板</h2>
<sign-canvas class="sign-canvas" ref="SignCanvas" :options="options" v-model="value"/>
<!-- <div class="sign-box">
<sign-canvas class="sign-canvas" ref="SignCanvas" :options="options" v-model="value"/>
</div> -->
<img v-if="value" class="view-image" :src="value" width="150" height="150">
<div class="config">
<ul class="ul-config">
<li class="li-c">
<span class="item-label">书写速度:</span>
<span class="item-content">
<select name="isSign" v-model="options.isSign">
<option :value="true">签名</option>
<option :value="false">写字</option>
</select>
</span>
</li>
<li class="li-c">
<span class="item-label">显示边框/网格:</span>
<span class="item-content">
<select name="isSign" v-model="options.isShowBorder">
<option :value="true">显示</option>
<option :value="false">不显示</option>
</select>
</span>
</li>
<li class="li-c">
<span class="item-label">下笔宽度:</span>
<span class="item-content">
<input v-model="options.writeWidth" type="number">
</span>
</li>
<li class="li-c">
<span class="item-label">线条的边缘类型:</span>
<span class="item-content">
<select name="lineCap" v-model="options.lineCap">
<option value="butt">平直的边缘</option>
<option value="round">圆形线帽</option>
<option value="square">正方形线帽</option>
</select>
</span>
</li>
<li class="li-c">
<span class="item-label">线条交汇时边角的类型:</span>
<span class="item-content">
<select name="lineCap" v-model="options.lineJoin">
<option value="bevel">创建斜角</option>
<option value="round">创建圆角</option>
<option value="miter">创建尖角</option>
</select>
</span>
</li>
<li class="li-c">
<span class="item-label">画笔颜色:</span>
<span class="item-content">
<input type="color" v-model="options.writeColor">
</span>
</li>
<li class="li-c">
<span class="item-label">背景色:</span>
<span class="item-content">
<input type="color" v-model="options.bgColor">
</span>
</li>
</ul>
</div>
<div class="sign-btns">
<span id="clear" @click="canvasClear()">清空</span>
<span id="save" @click="saveAsImg()">保存</span>
Expand All @@ -14,15 +71,29 @@
</div>
</template>
<script>
import SignCanvas from '../packages';
export default {
components:{SignCanvas},
data(){
return {
value: null,
options:{
lastWriteSpeed: 1, //书写速度 [Number] 可选
lastWriteWidth: 2, //下笔的宽度 [Number] 可选
lineCap: 'round', //线条的边缘类型 [butt]平直的边缘 [round]圆形线帽 [square] 正方形线帽
lineJoin: 'bevel', //线条交汇时边角的类型 [bevel]创建斜角 [round]创建圆角 [miter]创建尖角。
canvasWidth: 350, //canvas宽高 [Number] 可选
canvasHeight: 370, //高度 [Number] 可选
isShowBorder: true, //是否显示边框 [可选]
bgColor: '#fcc', //背景色 [String] 可选
borderWidth: 1, // 网格线宽度 [Number] 可选
borderColor: "#ff787f", //网格颜色 [String] 可选
writeWidth: 5, //基础轨迹宽度 [Number] 可选
maxWriteWidth: 30, // 写字模式最大线宽 [Number] 可选
minWriteWidth: 5, // 写字模式最小线宽 [Number] 可选
writeColor: '#101010', // 轨迹颜色 [String] 可选
isSign: true, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框
isShowBorder: false, //是否显示边框 [可选]
imgType:'png' //下载的图片格式 [String] 可选为 jpeg canvas本是透明背景的
}
}
},
Expand Down Expand Up @@ -62,20 +133,31 @@ export default {
padding: 20px;
text-align: center;
}
// .sign-box{
// position: absolute;
// top: 300px;
// left: 30px;
// }
.sign-canvas{
display: block;
margin: 20px auto;
border: 1px dashed #f00;
}
.view-image{
display: block;
margin: 20px auto;
}
.config{
width: 350px;
margin: 20px auto;
.ul-config{
.li-c{
display: flex;
align-items: center;
padding: 4px 10px;
.item-label{
font-size: 14px;
}
.item-content{
margin-left: 10px;
}
}
}
}
.sign-btns{
display: flex;
justify-content: space-between;
Expand Down
4 changes: 2 additions & 2 deletions examples/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import Vue from 'vue';
import App from './App.vue';
import SignCanvas from '../packages';
Vue.use(SignCanvas);
// import SignCanvas from '../packages';
// Vue.use(SignCanvas);
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "sign-canvas",
"version": "1.0.7",
"version": "1.1.0",
"author": "yxs",
"description": "一个基于canvas和vue的手写签名板,支持移动端和PC 可以直接下载图片和转成base64编码",
"main":"lib/sign-canvas.umd.min.js",
Expand Down
7 changes: 0 additions & 7 deletions packages/SignCanvas/index.js
View file

This file was deleted.

Loading

0 comments on commit a86bd09

Please sign in to comment.