<强>微信小程序帆布写字板效果及实例
写字板效果:书写文字,画板重置,导出图片、导出图片前判断是否书写内容
<强> app.json:
添加一个路由:“页面/帆布/画布”
{
“页面”:(
“页/索引/索引”,
“页面/日志/日志”,
“页面/帆布/画布”
),
"窗口":{
“navigationBarBackgroundColor”:“# ea6a46”,
“navigationBarTextStyle”:“白”,
:“navigationBarTitleText写字板”,
“backgroundTextStyle”:“黑暗”,
“写成backgroundColor”:“白”,
“enablePullDownRefresh”:“真正的”
}
}
然后就是:
<强> canvas.wxml:
& lt; !——页面/帆布/canvas.wxml——比;
& lt;帆布类=盎肌眎d=盎肌眂anvas-id=盎肌眃isable-scroll=" true " bindtouchstart=癱anvasStart bindtouchmove”=癱anvasMove bindtouchend=癱anvasEnd touchcancel”=癱anvasEnd”binderror=癱anvasIdErrorCallback祝辞& lt;/canvas>
& lt;按钮类型=澳稀眀indtap=癱leardraw”在清除画布& lt;/button>
& lt;按钮类型=澳稀眀indtap=癵etimg祝辞导出图片& lt;/button>
之前
<强> canvas.js:
//帆布全局配置
var上下文=零;//使用wx。createContext获取绘图上下文上下文
var isButtonDown=false;
var arrx=[];
var进行=[];
var arrz=[];
var canvasw=0;
var canvash=0;//获取系统信息
wx.getSystemInfo ({
成功:函数(res) {
canvasw=res.windowWidth;//设备宽度
canvash=res.windowWidth * 7/15;
}
});//注册页面
页面({
canvasIdErrorCallback:函数(e) {
console.error (e.detail.errMsg)
},
canvasStart:函数(事件){
isButtonDown=true;
arrz.push (0);
arrx.push (event.changedTouches[0]方式);
arry.push (event.changedTouches [0] .y);//context.moveTo (event.changedTouches [0]。x, event.changedTouches [0] .y);
},
canvasMove:函数(事件){
如果(isButtonDown) {
arrz.push (1);
arrx.push (event.changedTouches[0]方式);
arry.push (event.changedTouches [0] .y);//context.lineTo (event.changedTouches [0]。x, event.changedTouches [0] .y);//context.stroke ();//context.draw ()
};
(var=0;我& lt;arrx.length;我+ +){
如果(arrz[我]==0){
上下文。函数(arrx[我],进行[我])
其他}{
上下文。画线(arrx[我],进行[我])
};
};
上下文。clearRect (0, 0, canvasw canvash);
context.stroke ();
context.draw(真正的);
},
canvasEnd:函数(事件){
isButtonDown=false;
},
cleardraw:函数(){//清除画布
arrx=[];
进行=[];
arrz=[];
上下文。clearRect (0, 0, canvasw canvash);
context.draw(真正的);
},
getimg:函数(){
如果(arrx.length==0) {
wx.showModal ({
标题:“提示”,
内容:“签名内容不能为空! ",
showCancel:假
});
返回错误;
};//生成图片
wx.canvasToTempFilePath ({
canvasId:“画布”,
成功:函数(res) {
console.log (res.tempFilePath);//存入服务器
wx.uploadFile ({
url:“一个。php ',//接口地址
filePath: res.tempFilePath,
名称:“文件”,
formData: {//HTTP请求中其他额外的表单数据
“用户”:“测试”
},
成功:函数(res) {
console.log (res);
},
失败:函数(res) {
console.log (res);
},
完成:函数(res) {
}
});
}
})
},/* *
*页面的初始数据
*/数据:{
src:“”
},/* *
*生命周期函数——监听页面加载
*/onLoad:功能(选项){//使用wx。createContext获取绘图上下文上下文
上下文=wx.createCanvasContext(“画布”);
context.beginPath ()
context.setStrokeStyle (# 000000);
context.setLineWidth (4);
context.setLineCap(“圆”);
context.setLineJoin(“圆”);
}
})
之前
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
