【微信小程序之画布】四：手指触摸绘波浪线

微信小程序开发交流qq群 173683895

承接微信小程序开发。扫码加微信。

正文：

功能：根据手指触摸绘画一条直线路径--> 起点为手指开始触摸时的坐标，终点为手指触摸结束时的坐标

效果图：

上代码：

<canvas class='myCanvas' canvas-id="myCanvas" bindtouchstart='EventHandleStart' bindtouchend='EventHandle' style="border: 1px solid;" />

// pages/test/test.js
var strat_x, strat_y, ent_x, ent_y, beginPath;
var ctx = wx.createCanvasContext('myCanvas');
Page({data: {_num:1},onLoad: function () {var that = this;var query = wx.createSelectorQuery();//选择idquery.select('.myCanvas').boundingClientRect()query.exec(function (res) {that.setData({img_Width: res[0].width,img_Height: res[0].height})//res就是 该元素的信息 数组ctx.drawImage('/image/txt.jpg', 0, 0, res[0].width, res[0].height)ctx.draw()})},// 触摸事件EventHandleStart: function (event) {strat_x = event.touches[0].x;strat_y = event.touches[0].y;},// 结束触摸事件EventHandle: function (event) {var that = this;ent_x = event.changedTouches[0].x;ent_y = event.changedTouches[0].y;ctx.setLineWidth(2); // 设置线宽ctx.setStrokeStyle('red')ctx.beginPath(); //创建路径ctx.moveTo(strat_x, strat_y); // 设置路径起点坐标ctx.setLineDash();var xxx = ent_x - strat_x;var num = 5for (var i = 0; i < xxx; i++) {if (i == num && strat_x + 5 < ent_x) {num = num + 5ctx.moveTo(strat_x, strat_y);ctx.bezierCurveTo(strat_x, strat_y + 2, strat_x + 5, strat_y + 2, strat_x + 5, strat_y)strat_x = strat_x + 5ctx.moveTo(strat_x, strat_y);ctx.bezierCurveTo(strat_x, strat_y - 2, strat_x + 5, strat_y - 2, strat_x + 5, strat_y)strat_x = strat_x + 5}}ctx.stroke();//画出当前路径的边框。默认颜色色为黑色。ctx.setFontSize(20)ctx.setFillStyle('red')ctx.draw(true)},
})

【微信小程序之画布】四：手指触摸绘波浪线相关推荐

微信小程序之画布绘制并管理多张图片
在微信小程序的画布绘制多张图片,很简单,只需要调用drawImage就可以,但是如果要做一个图片编辑的小程序,肯定要对绘制上去的图片.文字等等进行操作,比如移动一下,旋转一下或者缩放等等.但普通的画布 ...
微信小程序把玩（四十）animation API
原文:微信小程序把玩(四十)animation API 动画水还是比较深的,这里只是简单介绍下小程序中动画的一些属性和注意事项,做动画前一定要整理好思路将动画一步步分解,再进行组合!这里只做引入. w ...
微信小程序开发的四种文件
最近在弄一个微信小程序,将看到的内容记录一下: 微信小程序中就四种类型的文件: js ---------- JavaScrip文件 json -------- 项目配置文件,负责窗口颜色等等 wxml ...
微信小程序快速入门+四个实战小程序（一）——入门准备
一)系列达成目标介绍二)小程序创建的准备 1)注册开发者账号 2)下载编译器 ------------------------------------------------------ 一)系列达 ...
微信小程序学习（四）：微信小程序连接云数据库
微信小程序学习(四):微信小程序连接云数据库我今天就只是初步的连接了数据库,我就说一下我的基础代码,和我整了好久才整完的问题这里有个初始化,非常重要!非常重要!非常重要!!! 是放在app.js里 ...
【微信小程序之画布】三：手指触摸绘画椭圆
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 功能:根据手指触摸绘画一个椭圆路径--> 起点为手指开始触摸时的坐标,终点为手指触摸结束时的坐标 ...
【微信小程序之画布】终：手指触摸画板实现
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 先看效果图: wxml <!--pages/shouxieban/shouxieban.wxml ...
【微信小程序之画布】一：canvas组件
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 此文章主要是对canvas组件的介绍与基本的使用.在组件中绘画了一条固定的直线. 我们先了解一下can ...
微信小程序实现画布自适应各种手机尺寸
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 解决的问题: 画布,动画等js里面的操作,默认是px而不是rpx, 无法根据手机屏幕自适应达到的效 ...

【微信小程序之画布】四：手指触摸绘波浪线

承接微信小程序开发。扫码加微信。

正文：

【微信小程序之画布】四：手指触摸绘波浪线相关推荐

最新文章

热门文章