【微信小程序之画布】三：手指触摸绘画椭圆

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

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

正文：

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

效果图：

组件属性的描述在上一节中描述过了，这里不再赘述。

<canvas class='myCanvas' canvas-id="myCanvas" bindtouchstart='EventHandleStart' bindtouchend='EventHandle' binderror="canvasIdErrorCallback" />

.myCanvas{border: 1px solid;margin: 0 auto;
}

本节重点在 bezierCurveTo -->创建三次方贝塞尔曲线路径。在最下方会有详细描述

var my_carvas,strat_x,strat_y,end_x,end_y;Page({data: {},onLoad: function () {},onReady:function(){my_carvas = wx.createCanvasContext('myCanvas', this) //1.创建carvas实例对象，方便后续使用。},// 手指触摸事件EventHandleStart:function(e){console.log(e)strat_x = e.touches[0].x; // 手指开始触摸时的x轴 x轴--->相对于画布左边的距离strat_y = e.touches[0].y;// 手指开始触摸时的y轴 y轴--->相对于画布顶部的距离},//手指触摸结束时的事件EventHandle: function (e) {console.log(e)end_x = e.changedTouches[0].x; // 手指结束触摸时的x轴 x轴--->相对于画布左边的距离end_y = e.changedTouches[0].y;// 手指结束触摸时的y轴 y轴--->相对于画布顶部的距离my_carvas.beginPath(); //创建一条路径  my_carvas.setStrokeStyle('red');  //设置边框为红色my_carvas.moveTo(strat_x,strat_y) //描述路径的起点为手指触摸的x轴和y轴my_carvas.bezierCurveTo(strat_x, strat_y + 20, end_x, end_y + 20, end_x, end_y) my_carvas.moveTo(strat_x, strat_y); //描述路径的起点为手指触摸的x轴和y轴my_carvas.bezierCurveTo(strat_x, strat_y - 20, end_x, end_y - 20, end_x, end_y)my_carvas.stroke() //画出当前路径的边框my_carvas.draw() //将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。}})

官方文档 bezierCurveTo 是这么描述的：

参数

参数	类型	说明
cp1x	Number	第一个贝塞尔控制点的 x 坐标
cp1y	Number	第一个贝塞尔控制点的 y 坐标
cp2x	Number	第二个贝塞尔控制点的 x 坐标
cp2y	Number	第二个贝塞尔控制点的 y 坐标
x	Number	结束点的 x 坐标
y	Number	结束点的 y 坐标

针对 moveTo(20, 20) bezierCurveTo(20, 100, 200, 100, 200, 20) 的三个关键坐标如下：

红色：起始点(20, 20)
蓝色：两个控制点(20, 100) (200, 100)
绿色：终止点(200, 20)

我对 bezierCurveTo 的理解：

1.通过 bezierCurveTo 可以画出一条两端对称的弧线；

2.前四个数分别是左边和右边的坐标

3.可以确定的是第一个蓝点的X坐标和第二个蓝点的X坐标分别对应的是起点和终点的X坐标

4.那么还有最后的两个点，也就是官方描述中的两个100，它们为什么要是100呢？我们应该这样理解它们。它们分别应该是起点的Y坐标和终点的Y坐标往上或者往下的弧度。例如我文中写的起点坐标+20 和终点坐标+20，含义就是往上弧度为20.这个值可以根据你的需求调整。

【微信小程序之画布】三：手指触摸绘画椭圆相关推荐

微信小程序之画布绘制并管理多张图片
在微信小程序的画布绘制多张图片,很简单,只需要调用drawImage就可以,但是如果要做一个图片编辑的小程序,肯定要对绘制上去的图片.文字等等进行操作,比如移动一下,旋转一下或者缩放等等.但普通的画布 ...
微信小程序把玩（三十五）Video API
原文:微信小程序把玩(三十五)Video API 电脑端不能测试拍摄功能只能测试选择视频功能,好像只支持mp4格式,值得注意的是成功之后返回的临时文件路径是个列表tempFilePaths而不是tem ...
黯然微信小程序杂记（三）：微信小程序实现倒计时功能附讲解教学附源码
黯然微信小程序杂记(三):微信小程序实现倒计时功能附超详细注释附源码一.功能描述二.界面展示三.test.wxml代码四.test.js代码(注释很详细很易懂) CSDN私信我,有关微信 ...
微信小程序把玩（三十二）Image API
原文:微信小程序把玩(三十二)Image API 选择图片时可设置图片是否是原图,图片来源.这用的也挺常见的,比如个人中心中设置头像,可以与wx.upLoadFile()API使用主要方法: wx. ...
微信小程序把玩（三十三）Record API
微信小程序把玩(三十三)Record API 原文:微信小程序把玩(三十三)Record API 其实这个API也挺奇葩的,录音结束后success不走,complete不走,fail也不走, 不知道 ...
微信小程序学习（三）：在微信开发者工具中，使用WeUI前端美化框架，微信小程序
微信小程序学习(三):在微信开发者工具中,使用WeUI 这里就是将WeUI导入到微信开发者工具中,我并没有使用多少样式,这里只是展示了一下怎么引用网上有很多的方法,我绝大多数都没看懂,这里就是最简单 ...
微信小程序开发的三种模式
摘要:截止到2018年6月底,正式上线发布的微信小程序已超过100万个.而越来越多的公司也已经在做微信小程序开发,许多人会觉得"微信小程序开发是开发者们的专利".答案是否定的,今天 ...
【微信小程序之画布】四：手指触摸绘波浪线
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 功能:根据手指触摸绘画一条直线路径--> 起点为手指开始触摸时的坐标,终点为手指触摸结束时的坐标 ...
【微信小程序之画布】终：手指触摸画板实现
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 先看效果图: wxml <!--pages/shouxieban/shouxieban.wxml ...

【微信小程序之画布】三：手指触摸绘画椭圆

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

正文：

参数

【微信小程序之画布】三：手指触摸绘画椭圆相关推荐

最新文章

热门文章