Need help with canvas-draw?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

Louiszhai
483 Stars 133 Forks MIT License 19 Commits 5 Opened issues

Description

使用canvas手写签名或绘图--支持pc和mobile端、支持横屏

Services available

!
?

Need anything else?

Contributors list

canvas-draw

License MIT

demo 微信中签名并分享请戳 sign demo

use canvas to draw

Clone

git clone [email protected]:Louiszhai/canvas-draw.git

Build Setup

# install dependencies
npm install

serve with hot reload at localhost:9588

npm run dev

build for production with minification

npm run build

build for production and view the bundle analyzer report

npm run build --report

How to use

canvas-draw基于vue-cli搭建,支持pc和mobile端。其核心代码为src/utils/draw.js,使用方法请参考src/components/Canvas.vue

以下是详细介绍。

支持mobile端时,由于手机尺寸限制,画布甚至包含画布的父级容器往往需要旋转至横屏展示,旋转角度通常有如下三种:

0° 正常
90°    顺时针旋转90°
180°   顺时针旋转180°
-90°   逆时针旋转90°

第一步,旋转画布或其父级容器。

getStyle() {
  const d = document;
  const w = window.innerWidth || d.documentElement.clientWidth || d.body.clientWidth;
  const h = window.innerHeight || d.documentElement.clientHeight || d.body.clientHeight;
  let length = (h - w) / 2;
  let width = w;
  let height = h;

switch (this.degree) { case -90: length = -length; case 90: width = h; height = w; break; default: length = 0; } return { transform: rotate(${this.degree}deg) translate(${length}px,${length}px), // rotate后需要translate以适应新的宽高 width: ${width}px, height: ${height}px, transformOrigin: 'center center', // 指定旋转的中心 }; },

以上,获取了画布或其父级容器的样式,degree是旋转度数,默认为0。请注意,旋转只是视觉变化,此时canvas的坐标系并没有变化,依然是标准坐标系。因此需要重置画布坐标系。

第二步,初始化canvas画布,支持手写,并重置坐标系。

import Draw from '../utils/draw';
initCanvas() {
  const canvas = document.querySelector('canvas');
  this.draw = new Draw(canvas, -this.degree);
},

接下来就可以尝试手写了,由于画布可能旋转,并且坐标系可能被重置,因此擦除画布内容参考如下。

clear() {
  this.draw.clear();
},

绘画好的内容,需要这么下载(由于移动端webview限制,现仅支持PC端下载)。

download() {
  this.draw.downloadPNGImage(this.draw.getPNGImage());
},

当然,你可以将内容上传至服务器,参考如下。

upload() {
  const image = this.draw.getPNGImage();
  const blob = this.draw.dataURLtoBlob(image);

const url = ''; // 此处替换为你的远程服务器上传地址 const successCallback = (response) => { console.log(response); }; const failureCallback = (error) => { console.log(error); }; this.draw.upload(blob, url, successCallback, failureCallback); },

除此之外,canvas-draw还内置了

scale
rotate
方法,你可以更灵活地调整画布大小、处理图片旋转等问题,祝使用愉快。

More detail

最后,奉上canvas-draw的实现细节:匠心打造canvas签名组件

License

Released under MIT LICENSE。

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.