• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

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

wxml:

<canvas  canvas-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()

}

 })


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序-发送模板消息发布时间:2022-07-18
下一篇:
微信小程序之if操作发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap