Skip to content

Commit

Permalink
Merge pull request #22 from langyuxiansheng/dev_v1.1.3
Browse files Browse the repository at this point in the history 
Dev v1.1.3
  • Loading branch information
@langyuxiansheng
langyuxiansheng authored Oct 23, 2020
2 parents cb0936f + 53c2e1b commit b4cd86d
Show file tree
Hide file tree
Showing 4 changed files with 101 additions and 51 deletions.
48 changes: 38 additions & 10 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@

#### ┭┮﹏┭┮ 因为 vue-sign-canvas 的包名被占用了,只好去掉一个前缀了.... 假如此轮子对你有帮助,请顺手star一下吧.o(*￣︶￣*)o

#### 更多文章和技术推文，请关注微信公众号"笔优站长",有问题也可以及时反馈哦！

## 开始使用! 下载安装npm包
```bash
npm i sign-canvas --save
Expand Down Expand Up @@ -49,12 +51,33 @@ components:{ SignCanvas }
</select>
</span>
</li>
<li class="li-c">
<span class="item-label">兼容高倍屏高清绘制:</span>
<span class="item-content">
<select name="isSign" v-model="options.isDpr">
<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.borderWidth" type="number">
</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">
<input v-model="options.imgType" type="text">
</span>
</li>
<li class="li-c">
<span class="item-label">线条的边缘类型:</span>
<span class="item-content">
Expand Down Expand Up @@ -97,26 +120,29 @@ components:{ SignCanvas }
</div>
</template>
<script>
import SignCanvas from '../packages';
export default {
components:{SignCanvas},
data(){
return {
value: null,
options:{
isDpr: false, //是否使用dpr兼容高倍屏 [Boolean] 可选
lastWriteSpeed: 1, //书写速度 [Number] 可选
lastWriteWidth: 2, //下笔的宽度 [Number] 可选
lineCap: 'round', //线条的边缘类型 [butt]平直的边缘 [round]圆形线帽 [square] 正方形线帽
lineJoin: 'round', //线条交汇时边角的类型 [bevel]创建斜角 [round]创建圆角 [miter]创建尖角。
canvasWidth: 600, //canvas宽高 [Number] 可选
canvasHeight: 600, //高度 [Number] 可选
lineJoin: 'bevel', //线条交汇时边角的类型 [bevel]创建斜角 [round]创建圆角 [miter]创建尖角。
canvasWidth: 350, //canvas宽高 [Number] 可选
canvasHeight: 370, //高度 [Number] 可选
isShowBorder: true, //是否显示边框 [可选]
bgColor: '#fcc', //背景色 [String] 可选 注:这背景色仅仅只是canvas背景,保存的图片仍然是透明的
bgColor: '#fcc', //背景色 [String] 可选
borderWidth: 1, // 网格线宽度 [Number] 可选
borderColor: "#ff787f", //网格颜色 [String] 可选
writeWidth: 5, //基础轨迹宽度 [Number] 可选
maxWriteWidth: 30, // 写字模式最大线宽 [Number] 可选
minWriteWidth: 5, // 写字模式最小线宽 [Number] 可选
writeColor: '#101010', // 轨迹颜色 [String] 可选
isSign: false, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框
isSign: true, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框
imgType:'png' //下载的图片格式 [String] 可选为 jpeg canvas本是透明背景的
}
}
Expand Down Expand Up @@ -223,21 +249,22 @@ props:{
1. 配置项 options 属性
```javascript
{
isDpr: false, //是否使用dpr兼容高倍屏 [Boolean] 可选
lastWriteSpeed: 1, //书写速度 [Number] 可选
lastWriteWidth: 2, //下笔的宽度 [Number] 可选
lineCap: 'round', //线条的边缘类型 [butt]平直的边缘 [round]圆形线帽 [square] 正方形线帽
lineJoin: 'round', //线条交汇时边角的类型 [bevel]创建斜角 [round]创建圆角 [miter]创建尖角。
canvasWidth: 600, //canvas宽高 [Number] 可选
canvasHeight: 600, //高度 [Number] 可选
isShowBorder: true, //是否显示边框 [可选] 当签名模式处于false的时候此选项才生效
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: false, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框
isSign: true, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框
imgType:'png' //下载的图片格式 [String] 可选为 jpeg canvas本是透明背景的
}
```
Expand Down Expand Up @@ -313,6 +340,7 @@ npm run lint

## 更新日志

> v1.1.3 功能更新：增加高倍屏下，绘制会模糊的适配方案，可以通过options.isDpr属性进行开启或者关闭，感谢网友“Wong-Harry”的建议与反馈。
> v1.1.2 优化部分逻辑代码.
Expand Down
16 changes: 16 additions & 0 deletions examples/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,21 @@
</select>
</span>
</li>
<li class="li-c">
<span class="item-label">兼容高分屏高清绘制:</span>
<span class="item-content">
<select name="isSign" v-model="options.isDpr">
<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.borderWidth" type="number">
</span>
</li>
<li class="li-c">
<span class="item-label">下笔宽度:</span>
<span class="item-content">
Expand Down Expand Up @@ -84,6 +99,7 @@ export default {
return {
value: null,
options:{
isDpr: false, //是否使用dpr兼容高分屏 [Boolean] 可选
lastWriteSpeed: 1, //书写速度 [Number] 可选
lastWriteWidth: 2, //下笔的宽度 [Number] 可选
lineCap: 'round', //线条的边缘类型 [butt]平直的边缘 [round]圆形线帽 [square] 正方形线帽
Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{
"name": "sign-canvas",
"version": "1.1.2",
"version": "1.1.3",
"author": "yxs",
"description": "一个基于canvas和vue的手写签名板,支持移动端和PC 可以直接下载图片和转成base64编码",
"description": "一个基于canvas和vue的手写签名板,支持移动端和PC可以直接下载图片和转成base64编码，支持高倍屏高清绘制",
"main":"lib/sign-canvas.umd.min.js",
"private": false,
"license": "MIT",
Expand Down
84 changes: 45 additions & 39 deletions packages/SignCanvas/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,9 @@ export default {
domId: `sign-canvas-${Math.random().toString(36).substr(2)}`, //生成唯一dom标识
canvas:null, //canvas dom对象
context:null, //canvas 画布对象
dpr: 1,
config: {
isDpr: false, //是否使用dpr兼容高分屏 [Boolean] 可选
lastWriteSpeed: 1, //书写速度 [Number] 可选
lastWriteWidth: 2, //下笔的宽度 [Number] 可选
lineCap: 'round', //线条的边缘类型 [butt]平直的边缘 [round]圆形线帽 [square] 正方形线帽
Expand Down Expand Up @@ -80,6 +82,7 @@ export default {
this.config[key] = options[key];
}
}
this.dpr = typeof window !== 'undefined' && this.config.isDpr ? window.devicePixelRatio || window.webkitDevicePixelRatio || window.mozDevicePixelRatio || 1 : 1;
this.canvas = document.getElementById(this.domId);
this.context = this.canvas.getContext("2d");
this.canvas.style.background = this.config.bgColor;
Expand All @@ -105,25 +108,45 @@ export default {
returnNum = returnNum.toFixed(2);
//写字模式和签名模式
if (this.config.isSign) {
this.context.lineWidth = this.config.writeWidth;
this.context.lineWidth = this.config.writeWidth * this.dpr;
} else {
this.context.lineWidth = this.config.lastWriteWidth = this.config.lastWriteWidth / 4 * 3 + returnNum / 4;
const lineWidth = this.config.lastWriteWidth = this.config.lastWriteWidth / 4 * 3 + returnNum / 4
this.context.lineWidth = lineWidth * this.dpr;
}
},
/**
* 写开始
*/
writeBegin (point) {
this.config.isWrite = true;
this.config.lastWriteTime = new Date().getTime();
this.config.lastPoint = point;
this.writeContextStyle();
},
/**
* 绘制轨迹
*/
writing (point) {
this.context.beginPath();
this.context.moveTo(this.config.lastPoint.x, this.config.lastPoint.y);
this.context.lineTo(point.x, point.y);
this.context.moveTo(this.config.lastPoint.x * this.dpr, this.config.lastPoint.y * this.dpr);
this.context.lineTo(point.x * this.dpr, point.y * this.dpr);
this.setLineWidth();
this.context.stroke();
this.config.lastPoint = point;
this.context.closePath();
},
/**
* 写结束
*/
writeEnd (point) {
this.config.isWrite = false;
this.config.lastPoint = point;
this.saveAsImg();
},
/**
* 轨迹样式
*/
Expand All @@ -134,56 +157,37 @@ export default {
this.context.lineJoin = this.config.lineJoin;
},
/**
* 写开始
*/
writeBegin (point) {
this.config.isWrite = true;
this.config.lastWriteTime = new Date().getTime();
this.config.lastPoint = point;
this.writeContextStyle();
},
/**
* 写结束
*/
writeEnd (point) {
this.config.isWrite = false;
this.config.lastPoint = point;
this.saveAsImg();
},
/**
* 清空画板
*/
canvasClear () {
this.context.save();
this.context.strokeStyle = this.config.writeColor;
this.context.clearRect(0, 0, this.config.canvasWidth, this.config.canvasHeight);
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.context.beginPath();
let size = this.config.borderWidth / 2;
this.context.lineWidth = this.config.borderWidth * this.dpr;
this.context.strokeStyle = this.config.borderColor;
let size = this.config.borderWidth / 2 * this.dpr;
if(this.config.isShowBorder){
//画外面的框
this.context.moveTo(size, size);
this.context.lineTo(this.config.canvasWidth - size, size);
this.context.lineTo(this.config.canvasWidth - size, this.config.canvasHeight - size);
this.context.lineTo(size, this.config.canvasHeight - size);
this.context.lineTo(this.canvas.width - size, size);
this.context.lineTo(this.canvas.width - size, this.canvas.height - size);
this.context.lineTo(size, this.canvas.height - size);
this.context.closePath();
this.context.lineWidth = this.config.borderWidth;
this.context.strokeStyle = this.config.borderColor;
this.context.stroke();
}
if (this.config.isShowBorder && !this.config.isSign) {
//画里面的框
this.context.moveTo(0, 0);
this.context.lineTo(this.config.canvasWidth, this.config.canvasHeight);
this.context.lineTo(this.config.canvasWidth, this.config.canvasHeight / 2);
this.context.lineTo(this.config.canvasWidth, this.config.canvasHeight / 2);
this.context.lineTo(0, this.config.canvasHeight / 2);
this.context.lineTo(0, this.config.canvasHeight);
this.context.lineTo(this.config.canvasWidth, 0);
this.context.lineTo(this.config.canvasWidth / 2, 0);
this.context.lineTo(this.config.canvasWidth / 2, this.config.canvasHeight);
this.context.lineTo(this.canvas.width, this.canvas.height);
this.context.lineTo(this.canvas.width, this.canvas.height / 2);
this.context.lineTo(0, this.canvas.height / 2);
this.context.lineTo(0, this.canvas.height);
this.context.lineTo(this.canvas.width, 0);
this.context.lineTo(this.canvas.width / 2, 0);
this.context.lineTo(this.canvas.width / 2, this.canvas.height);
this.context.stroke();
}
this.$emit('confirm', null);
Expand All @@ -204,8 +208,10 @@ export default {
* 初始化画板
*/
canvasInit () {
this.canvas.width = this.config.canvasWidth;
this.canvas.height = this.config.canvasHeight;
this.canvas.width = this.config.canvasWidth * this.dpr;
this.canvas.height = this.config.canvasHeight * this.dpr;
this.canvas.style.width = `${this.config.canvasWidth}px`;
this.canvas.style.height = `${this.config.canvasHeight}px`;
this.config.emptyCanvas = this.canvas.toDataURL(`image/${this.config.imgType}`);
},
Expand Down

0 comments on commit b4cd86d

Please sign in to comment.