小程序-涂鸦画笔(案例-集福)

不同的项目总是要求不同的需求在下面的代码中，我自码了画福的canvas代码，及橡皮檫的代码；

下面的图中也需实现背景图的点击切换取，点击画图完毕按钮，就实现了内容的提交

wxml:

<canvas canvas-id="myCanvas" class="myCanvas" style="width:{{Cwidth1}}px;height:{{Cheight1}}px;top:{{Ctop1}}px;left:{{Cleft1}}px

disable-scroll="false"

bindtouchstart="touchStart"

bindtouchmove="touchMove"

bindtouchend="touchEnd">

</canvas>

<view class="box box5" bindtap="clearCanvas"></view> //橡皮檫按钮

js:

var canvasC ; //声明一个全局变量，用于橡皮檫

Page({

onLoad: function () {

var that = this;

wx.getSystemInfo({

success: function (res) {

W = res.windowWidth;

H = res.windowHeight;

that.setData({

Cwidth: W,

Cheight: H / 1.7,

Cwidth1: W,

Cheight1: H / 1.7,

Ctop1: 0,

Cleft1: 0

})

startX : 0; //保存X坐标轴变量

startY : 0; //保存Y坐标轴变量

//手指触摸动作开始

touchStart:function(e){

//得到触摸点的坐标

this.startX = e.changedTouches[0].x

this.startY = e.changedTouches[0].y

this.context = wx.createCanvasContext("myCanvas")

canvasC = this.context; //将画布保存进全局变量

新添2018-3-6

this.context.setStrokeStyle("#ff0000") //设置笔触颜色

this.context.setLineWidth(10) //设置笔触粗细

this.context.setLineCap("round") //设置笔触线条圆润

this.context.beginPath()

}

//手指触摸后移动

touchMove:function(e){

var startX1 = e.changedTouches[0].x

var startY1 = e.changedTouches[0].y

this.context.moveTo(this.startX,this.startY)

this.context.lineTo(startX1,startY1)

this.context.stroke()

this.startX = startX1;

this.startY = startY1;

wx.drawCanvas({

canvasId:"myCanvas",

reserve:true,

actions:this.context.getActions() //获取绘图动作数组

})

}，

// 点击橡皮檫全部清除

clearCanvas:function(){

canvasC.clearRect(0,0,w,H/1.7);

canvasC.draw()

}

})

转载于:https://www.cnblogs.com/liuqingxia/p/8440618.html

小程序-涂鸦画笔(案例-集福)相关推荐

微信小程序入门教程+案例demo
微信小程序入门教程+案例demo 尊重原创,转载请注明出处:原文查看惊喜更多 http://blog.csdn.net/qq137722697 首先摆在好姿态,--微信小程序开发也就那么回事.你只需要 ...
10组小程序界面设计案例分享
10组小程序界面设计分享而对于设计师来说,小程序的设计也相对 APP 简单和直接,在这里分享给大家一些小程序界面设计案例,包含多种类别:出游旅行类.电商购物类.电商家居类.生活社区类.快递物流类.智 ...
微信小程序源码-合集6，0积分下载
下载地址:https://download.csdn.net/download/qq_41570658/15766712 写在最后: 微信小程序源码-合集6 https://blog.csdn.ne ...
3000字详解，“会裂变”的小程序产品设计案例
在互联网流量越来越贵的今天,获取精准用户或种子用户成了产品经理或运营同学最渴望不可求的事.近期带着团队做了几次裂变案例后,发现裂变不仅是针对于社群,针对小程序这样的产品若在设计考虑了裂变机制,则可以借 ...
image 微信小程序flex_微信小程序flex布局案例(1)
微信小程序 flex 布局案例一前言最近在学习微信小程序时,看到很多布局都用到了 flex 布局,其实 flex 布局学习过好多东西不用就忘记了,这次用上就只得再去看了,争取学会.下面是我做的简单 ...
微信小程序AR应用案例盘点（时尚行业）
在上一篇微信小程序AR行业应用分析中,我对快消行业的微信小程序AR经典案例与解决的痛点问题,结合目前新扩展的微信小程序AR能力进行了盘点. 今天我们则集中在另一个把视觉呈现做到极致的行业--时尚行业, ...
微信小程序调查问卷案例
微信小程序调查问卷案例通过开发一个"调查问卷"的案例来掌握常用表单组件的使用,以及如何收集用户填写的表单信息提交给服务器和从服务器获取数据后显示在表单中.参考界面如图1所示. 步 ...
支付宝集福攻略，作为程序员的你集福了么？
哇哦一年一度的支付宝集五福活动又双叒上线啦~ 2022年的支付宝集五福在1月19日零点已经正式开始最终在除夕夜也就是1月31日22点18分开奖合成五福可以获得红包奖励虽然去年我只拿到了2 ...
php 涂鸦,微信小程序涂鸦功能的实现
本文主要介绍了微信小程序实现的涂鸦功能,涉及微信小程序事件响应及画笔的相关操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下,希望能帮助到大家. 先来看看运行效果: 布局文件index.wxml ...
[微信小程序系列] 动画案例之圆点沿着圆圈运动
作者:滴滴公共前端团队 - Tawnia 滴滴作为第一批的小程序开发者,我们也大量地用到了动画,积累了一些经验,由于市面上的小程序动画案例很少,我们也分享一部分我们做过的案例: 首先用 wx.crea ...

小程序-涂鸦画笔(案例-集福)

小程序-涂鸦画笔(案例-集福)相关推荐

最新文章

热门文章