Chinaunix首页 | 论坛 | 博客
  • 博客访问: 274670
  • 博文数量: 191
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 1824
  • 用 户 组: 普通用户
  • 注册时间: 2014-11-19 21:54
文章分类

全部博文(191)

文章存档

2018年(27)

2017年(5)

2016年(53)

2015年(89)

2014年(17)

分类: 其他平台

2018-11-09 17:07:17


点击(此处)折叠或打开

  1. <view class="box">
  2.   <canvas canvas-id="myCanvas" class="myCanvas"
  3.           disable-scroll="false"
  4.           bindtouchstart="touchStart"
  5.           bindtouchmove="touchMove"
  6.           bindtouchend="touchEnd"
  7.           style="width:100%;height:100%;background:url('{{img}}')center ">
  8.   </canvas>

  9. </view>


点击(此处)折叠或打开

  1. /* pages/gua/gua.wxss */
  2. .box{
  3.  width: 100%;
  4.  height: 300px;
  5.  background: red;
  6.  padding: 20rpx;
  7.  box-sizing: border-box;
  8. }
  9. .myCanvas{
  10.   width: 100%;
  11.   height: 100%;
  12. }


点击(此处)折叠或打开

  1. const ctx = wx.createCanvasContext("myCanvas");
  2. data: {
  3.     img:"/img/2.jpg",
  4.     stareX:'',
  5.     statrY:'',
  6.   },
  7. onReady: function () {
  8.     ctx.setFillStyle('#eee')
  9.     ctx.fillRect(0, 0, 400, 300)
  10.     ctx.draw()
  11.   },
  12. touchStart:function(e){
  13.     console.log(e)
  14.     var s_x = e.changedTouches[0].x;
  15.     var s_y = e.changedTouches[0].y
  16.     console.log(s_x, s_y);
  17.     ctx.save(); //保存当前坐标轴的缩放、旋转、平移信息
  18.     ctx.beginPath() //开始一个路径
  19.     ctx.clearRect(s_x, s_y, 10, 10);
  20.     ctx.restore(); //恢复之前保存过的坐标轴的缩放、旋转、平移信息
  21.   },
  22.   touchMove: function (e) {
  23.     var s_x = e.changedTouches[0].x
  24.     var s_y = e.changedTouches[0].y
  25.     ctx.save(); //保存当前坐标轴的缩放、旋转、平移信息
  26.     ctx.moveTo(this.startX, this.startY); //把路径移动到画布中的指定点,但不创建线条
  27.     ctx.clearRect(s_x, s_y, 10, 10); //添加一个新点,然后在画布中创建从该点到最后指定点的线条
  28.     ctx.restore() //恢复之前保存过的坐标轴的缩放、旋转、平移信息
  29.     this.startX = s_x;
  30.     this.startY = s_y;
  31.     //只是一个记录方法调用的容器,用于生成记录绘制行为的actions数组。context跟<canvas/>不存在对应关系,一个context生成画布的绘制动作数组可以应用于多个<canvas/>
  32.     wx.drawCanvas({
  33.       canvasId: 'myCanvas',
  34.       reserve: true,
  35.       actions: ctx.getActions() // 获取绘图动作数组
  36.     })
  37.   },

阅读(0) | 评论(0) | 转发(0) |
0

上一篇:小程序滑动删除

下一篇:没有了

给主人留下些什么吧!~~
评论热议
请登录后评论。

登录 注册