【微信小程序之画布】三：手指触摸绘画椭圆
微信小程序开发交流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.这个值可以根据你的需求调整。
相关文章：
ACdream 1099——瑶瑶的第K大——————【快排舍半，输入外挂】
瑶瑶的第K大Time Limit:2000MS Memory Limit:128000KB 64bit IO Format:%lld & %llu Submit Status Practice ACdream 1099Description 一天，萌萌的妹子--瑶瑶(tsyao)很无聊，就来找你玩。可是你们都不知道玩什么。。。尴尬了一阵子ÿ…
开源贡献 计算_如何克服恐惧并为开源做贡献
开源贡献 计算Are you a new developer? Or maybe even just an old-timer who has been in a company for ten years, working on an in-house project, and now you’re thinking, “Hey, I’ve been in my box a long time. What’s new out there?” I have been like th…
Android学习笔记进阶十一图片动画播放（AnimationDrawable）
大家平时见到的最多的可能就是Frame动画了，Android中当然也少不了它。它的使用更加简单，只需要创建一个 AnimationDrawabledF对象来表示Frame动画，然后通过addFrame 方法把每一帧要显示的内容添加进去，并设置播放间隔时间…
JS 把url的参数解析成对象
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文： 实现思路：请看log和打印结果 // url参数解析 function getUrlkey(url) {var params {};var urls url.split("?"); console.log(1_分割url:,…
Objective-C代码的文件扩展名
转载于:https://www.cnblogs.com/123qw/p/4375299.html
公司成立两周年感言_对我的副项目成立一周年的一些反思
公司成立两周年感言by Will Abramson威尔艾布拉姆森(Will Abramson) 对我的副项目成立一周年的一些反思 (Some reflections on my side project’s first anniversary) My side project turns one this month. It has been a real learning roller coaster.我的副业这个月变成…
2017.4.18 静态代码分析工具sonarqube+sonar-runner的安装配置及使用
配置成功后的代码分析页面： 可以看到对复杂度、语法使用、重复度等等都做了分析，具体到了每一个方法和每一句代码。 四种使用方式： sonarqube sonar-runnersonarqube mavensonarqube eclipsesonarqube IDE IntelliJ使用方式1 ：…
c中结构体的4种定义
1、常规的标准方式： 1 #include <stdio.h> 2 3 struct student{ 4 int age; 5 float score; 6 char sex; 7 }; 8 9 int main(int argc, char **argv) 10 { 11 struct student studenta { 12 30, 13 79.5, 14 …
js 时间戳与日期处理集合
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文： 一：获取当前日期 使用方式：console.log(util.formatTime()) 打印结果：2018/04/24 11:06:45 // 获取当前日期 function formatTime() {var date…
超赞网站推荐_字体（更多）超赞-标志性发明
超赞网站推荐by Pubudu Dodangoda通过Pubudu Dodangoda 字体(更多)超赞-标志性发明 (Font (More) Awesome — an iconic invention) Whether you are building a website, a mobile app, or even a standalone app, there are few things you can never escape. The proper us…
JAVA中的垃圾回收机制以及其在android开发中的作用
http://blog.csdn.net/xieqibao/article/details/6707519 这篇文章概述了JAVA中运行时数据的结构，以及垃圾回收机制的作用。在后半部分，描述了如何检测和定位ANDROID程序是否内存溢出。转载于:https://www.cnblogs.com/u3shadow/p/4379336.html
微信小程序把后台传过来的数组坐标展示在地图上
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文： 功能实现： 1. 根据后台传递过来的数据，包括地址名字，经纬度坐标等都展示在map组件上； 2. 点击相应地址实现用户当前位置导航至点击的…
Flask-login Question
1 未登录访问鉴权页面如何处理？ 如果未登录访问了一个作了 login_required 限制的 view，那么 Flask-Login 会默认 flash一条消息，并且将重定向到login_view，如果你没有指定login_view，那么 Flask-Login 将会抛出一个 4…
愉快的舞会c++_如何在5分钟内建立一个令人愉快的加载屏幕
愉快的舞会cFirst, here is what we will build. Set your timer!首先，这是我们将要建立的。 设置您的计时器！ Does this look familiar?这看起来很熟悉吗？ If yes, that’s because you’ve seen this somewhere — Slack!如果是…
有关C/C++中，表达式计算顺序的问题，以及表达式内部变量“副作用”问题（转）...
经常可以在一些讨论组里看到下面的提问：“谁知道下面C语句给n赋什么值？”m 1; n mm;最近有位不相识的朋友发email给我，问为什么在某个C系统里，下面表达式打印出两个4，而不是4和5：a 4; cout << a &…
HDU 3001
题目中说明每个城市至少要走一次，至多走2次，因此要用到三进制压缩，然后就是状态转移方程了。 这道题就处理三进制的地方麻烦一点。同时注意，在选择最小长度时，一定是要每一个点都经过至少一次的，即是状态的…
微信小程序 侧滑效果实现
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文： 先看效果图： 源码： <view wx:if{{if_show}} class{{show_centent?"show":"hide"}} /> <button bindtapbtn>展示 or 隐藏&l…
im和音视频开发哪个更好_如何阅读成为更好的开发者的方式
im和音视频开发哪个更好by nolan grace通过诺兰格雷斯 如何阅读成为更好的开发者的方式 (How to read your way to becoming a better developer) If you want to get better at programming, there are two things you need to do:如果您想提高编程水平，则需要做两…
MVC3学习 四 EF删除操作
由于EF的框架是4.1的，所以现在如果想更新部分字段的话，只能从数据库中查出一次数据（不用查的方法还没找到，需要继续研究），不能像5.1的版本可以不用查。 更新的Action需要用到[HttpGet]和[HttpPost]…
ThinkPHP5.0中Redis的使用和封装(原创)
Redis是一种常用的非关系型数据库,主要用作数据缓存,数据保存形式为key-value,键值相互映射.它的数据存储跟MySQL不同,它数据存储在内存之中,所以数据读取相对而言很快,用来做高并发非常不错. ThinkPhP5.0自带了Redis扩展,在使用之前先下载php_redis.dll 网址 http://windows.p…
【微信小程序之画布】四：手指触摸绘波浪线
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文： 功能：根据手指触摸绘画一条直线路径--> 起点为手指开始触摸时的坐标，终点为手指触摸结束时的坐标 效果图： 上代码： <canvas clas…
saas的计费数据库设计_如何构建和扩展SaaS计费解决方案
saas的计费数据库设计您需要的最低可行产品 (What you need for a Minimum Viable Product) When you are building your Software as a Service (Saas) Minimum Viable Product (MVP), there is a lot of work that needs to be done. It can be difficult to balance this wo…
关于一对多，多对多的多表查询的控制
一、一对多 以班级Classes和学生Student为例：回忆sql语句://内链接,两种方式效果一样,查询的是两边都有的数据SELECT c.*,s.* FROM classes c,student s WHERE s.cidc.cid;SELECT c.cname,s.sname FROM classes c INNER JOIN student s ON s.cidc.cid;//左外连接&am…
JavaScript对象，方括号和算法
by Dmitri Grabov德米特里格拉波夫(Dmitri Grabov) JavaScript对象，方括号和算法 (JavaScript Objects, Square Brackets and Algorithms) One of the most powerful aspects of JavaScript is being able to dynamically refer to properties of objects. In this…
《Java 8 实战》（二）—— Lambda
Lambda表达式可以理解为简洁地表示可传递的匿名函数的一种方式：它没有名称，但它有参数列表/函数主体/返回类型，可能还有一个可以抛出的异常列表。 Lambda表达式由参数/箭头和主体组成： (Apple a1, Apple a2) -> a1.getWeight(…
c++回调函数 callback
（1）Callback方式Callback的本质是设置一个函数指针进去，然后在需要需要触发某个事件时调用该方法, 比如Windows的窗口消息处理函数就是这种类型。比如下面的示例代码，我们在Download完成时需要触发一个通知外面的事件：…
【微信小程序之画布】终：手指触摸画板实现
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文： 先看效果图： wxml <!--pages/shouxieban/shouxieban.wxml--> <view class"container"><view>手写板（请在下方区域手写内容&…
Android开发中应避免的重大错误
by Varun Barad由Varun Barad Android开发中应避免的重大错误 (Critical mistakes to avoid in Android development) As many pioneers and leaders in different fields have paraphrased:正如许多不同领域的开拓者和领导人所说： In any endeavor, it is import…
机房收费系统（VB.NET）——超具体的报表制作过程
之前做机房收费系统用的报表是GridReport，这次VB.NET重构中用到了VisualStudio自带的报表控件。刚開始当然对这块功能非常不熟悉，只是探究了一段时间后还是把它做出来了。 以下把在VisualStudio（我用的是VisualStudio2013，假设与您…
微信小程序实现画布自适应各种手机尺寸
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文： 解决的问题： 画布，动画等js里面的操作，默认是px而不是rpx, 无法根据手机屏幕自适应 达到的效果： 让画布，动画在不同分辨…