微信小程序学习用demo推荐：微信涂鸦：canvas学习-白红宇

强烈建议你试试无所不能的chatGPT，快点击我

微信小程序学习用demo推荐：微信涂鸦：canvas学习

阅读量：4085 次

发布时间：2019-05-25

本文共 3377 字，大约阅读时间需要 11 分钟。

这个demo，应该是作者的练习demo，表面上并没有展示完全；结构图：

其中微信涂鸦部分预览图：

示例代码：

[AppleScript]

纯文本查看

复制代码

                                     
Page
(
{ 
  
data
:
{ 
    
pen 
:
 3
,
 /
/
画笔粗细默认值
    
color 
:
 '
#cc0033' //画笔颜色默认值
  
}
,
  
startX
:
 0
,
 /
/
保存X坐标轴变量
  
startY
:
 0
,
 /
/
保存Y坐标轴变量
  
isClear 
:
 false
,
 /
/
是否启用橡皮擦标记
  
/
/
手指触摸动作开始
  
touchStart
:
 function 
(
e
)
 { 
      
/
/
得到触摸点的坐标
      
this.startX 
=
 e.changedTouches[
0
].x
      
this.startY 
=
 e.changedTouches[
0
].y
      
this.
context
 =
 wx.createContext
(
)
      
if
(
this.isClear
)
{ 
 /
/
判断是否启用的橡皮擦功能  ture表示清除  
false
表示画画
         
this.
context
.setStrokeStyle
(
'
#FFFFFF') //设置线条样式 此处设置为画布的背景颜色  橡皮擦原理就是：利用擦过的地方被填充为画布的背景颜色一致 从而达到橡皮擦的效果 
         
this.
context
.setLineCap
(
'
round
'
)
 /
/
设置线条端点的样式
         
this.
context
.setLineJoin
(
'
round
'
)
 /
/
设置两线相交处的样式
         
this.
context
.setLineWidth
(
20
)
 /
/
设置线条宽度
         
this.
context
.
save
(
)
;  
/
/
保存当前坐标轴的缩放、旋转、平移信息
         
this.
context
.beginPath
(
)
 /
/
开始一个路径 
         
this.
context
.arc
(
this.startX
,
this.startY
,
5
,
0
,
2
*
Math.PI
,
true
)
;  
/
/
添加一个弧形路径到当前路径，顺时针绘制  这里总共画了
360
度  也就是一个圆形 
         
this.
context
.fill
(
)
;  
/
/
对当前路径进行填充
         
this.
context
.restore
(
)
;  
/
/
恢复之前保存过的坐标轴的缩放、旋转、平移信息
      
}
else
{ 
         
this.
context
.setStrokeStyle
(
this.
data
.color
)
         
this.
context
.setLineWidth
(
this.
data
.pen
)
         
this.
context
.setLineCap
(
'
round
'
)
 /
/
 让线条圆润 
         
this.
context
.beginPath
(
)
        
      
}
  
}
,
  
/
/
手指触摸后移动
  
touchMove
:
 function 
(
e
)
 { 
      
      
var startX
1
 =
 e.changedTouches[
0
].x
      
var startY
1
 =
 e.changedTouches[
0
].y
      
if
(
this.isClear
)
{ 
 /
/
判断是否启用的橡皮擦功能  ture表示清除  
false
表示画画
        
this.
context
.
save
(
)
;  
/
/
保存当前坐标轴的缩放、旋转、平移信息
        
this.
context
.moveTo
(
this.startX
,
this.startY
)
;  
/
/
把路径移动到画布中的指定点，但不创建线条
        
this.
context
.lineTo
(
startX
1
,
startY
1
)
;  
/
/
添加一个新点，然后在画布中创建从该点到最后指定点的线条
        
this.
context
.stroke
(
)
;  
/
/
对当前路径进行描边
        
this.
context
.restore
(
)
 /
/
恢复之前保存过的坐标轴的缩放、旋转、平移信息
          
        
this.startX 
=
 startX
1
;
        
this.startY 
=
 startY
1
;
       
      
}
else
{ 
        
this.
context
.moveTo
(
this.startX
,
 this.startY
)
        
this.
context
.lineTo
(
startX
1
,
 startY
1
)
        
this.
context
.stroke
(
)
        
this.startX 
=
 startX
1
;
        
this.startY 
=
 startY
1
;
        
      
}
      
/
/
只是一个记录方法调用的容器，用于生成记录绘制行为的actions数组。
context
跟
<
canvas
/
>
不存在对应关系，一个
context
生成画布的绘制动作数组可以应用于多个
<
canvas
/
>
      
wx.drawCanvas
(
{ 
         
canvasId
:
 'myCanvas'
,
         
reserve
:
 true
,
         
actions
:
 this.
context
.getActions
(
)
 /
/
 获取绘图动作数组
      
}
)
  
}
,
  
/
/
手指触摸动作结束
  
touchEnd
:
 function 
(
)
 { 
      
  
}
,
  
/
/
启动橡皮擦方法
  
clearCanvas
:
 function
(
)
{ 
      
if
(
this.isClear
)
{ 
        
this.isClear 
=
 false
;
      
}
else
{ 
        
this.isClear 
=
 true
;
      
}
  
}
,
  
penSelect
:
 function
(
e
)
{ 
 /
/
更改画笔大小的方法
    
console.
log
(
e.currentTarget
)
;
    
this.setData
(
{ 
pen
:
parseInt
(
e.currentTarget.dataset.param
)
}
)
;
    
this.isClear 
=
 false
;
  
}
,
  
colorSelect
:
 function
(
e
)
{ 
 /
/
更改画笔颜色的方法
    
console.
log
(
e.currentTarget
)
;
    
this.setData
(
{ 
color
:
e.currentTarget.dataset.param
}
)
;
    
this.isClear 
=
 false
;
  
}
,
  
/
/
 下拉刷新
  
onPullDownRefresh
:
 function
(
)
{ 
    
wx.stopPullDownRefresh
(
)
  
}
,
  
/
/
 页面分享
  
onShareAppMessage
:
 function 
(
)
 { 
    
return
 { 
      
title
:
 '微信小程序'
,
      
desc
:
 '这是微信小程序的分享功能'
,
      
path
:
 '
/
page
/
canvas'
    
}
  
}
}
)
            
          

项目地址及下载：

本帖隐藏的内容

https://github.com/pencil2014/wx_lite

(60.31 KB, 下载次数: 3)

转载地址：http://ashni.baihongyu.com/

你可能感兴趣的文章

debounce与throttle区别

js中Dom操作的个人总结

React Native 图片组件的一些常见问题汇总

React Native性能优化

CSS 实现隐藏滚动条同时又可以滚动

webpack4.0各个击破（5）—— Module篇

webpack4.0各个击破（6）—— Loader篇

React性能优化

vue.js将px转化为rem

vue如何在手机中通过本机IP地址访问webApp

fastClick的300ms延迟解决方案

Rem.js 适配不同分辨率终端设置

Vue自定义指令封装节流函数

vue局部组建和全局组卷

webpack4.0各个击破（7）—— plugin篇

关于Vue.js 使用v-cloak后仍显示变量的解决方法

webpack4.0各个击破（10）—— Integration篇

ReactNative页面跳转与事件监听

Flutter布局基础

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！

当前时间: 2024-09-20 10:37:28 当前IP: 3.149.245.187 联系邮箱:javaeecc@qq.com Copyright © 2020 - 2022 baihongyu.com 京ICP备2021015314号-2

强烈建议你试试无所不能的CHAT-GPT，快点击我

强烈建议你试试无所不能的CHAT-GPT，快点击我