【微信小程序之画布】四:手指触摸绘波浪线
微信小程序开发交流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)},
})
相关文章:

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, 无法根据手机屏幕自适应 达到的效果: 让画布,动画在不同分辨…

网易新闻首页实现
http://www.2cto.com/kf/201409/330299.html IOS后台运行机制详解(二) http://blog.csdn.net/enuola/article/details/9148691转载于:https://www.cnblogs.com/itlover2013/p/4403061.html

阿联酋gitex_航空公司网站不在乎您的隐私后续行动:阿联酋航空以以下方式回应我的文章:...
阿联酋gitexby Konark Modi通过Konark Modi 航空公司网站不在乎您的隐私后续行动:阿联酋航空对我的文章进行了全面否认 (Airline websites don’t care about your privacy follow-up: Emirates responds to my article with full-on denial) Yesterday, The Regis…

微信小程序把缓存的数组动态渲染到页面
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文: 代码实现的目的:当页面销毁的时候,页面的参数状态还是能够保存。 show_img函数实现: 创建一个数组保存到缓存,遍历缓存的list_stutas对…

Find Minimumd in Rotated Sorted Array
二分搜索查最小数,from mid to分别为区间的第一个,中位数,和最后一个数 if(from<mid&&mid<to)//顺序,第一个即为最小值 return from; if(from>mid)//发现逆序,则最小值在这个区间,2分搜索…

在DataTable中更新、删除数据
在DataTable中选择记录 /*在DataTable中选择记录*//* 向DataTable中插入记录如上,更新和删除如下:* ----但是在更新和删除前,首先要找出要更新和删除的记录。* 一种方法是遍历DataRow,搜索想要的记录,* --〉然而更聪明的办法是使用…

使用TensorFlow进行机器学习即服务
by Kirill Dubovikov通过基里尔杜博维科夫(Kirill Dubovikov) 使用TensorFlow进行机器学习即服务 (Machine Learning as a Service with TensorFlow) Imagine this: you’ve gotten aboard the AI Hype Train and decided to develop an app which will analyze the effective…
浏览器加载、解析、渲染的过程
最近在学习性能优化,学习了雅虎军规 ,可是觉着有点云里雾里的,因为里面有些东西虽然自己也一直在使用,但是感觉不太明白所以然,比如减少DNS查询,css和js文件的顺序。所以就花了时间去了解浏览器的工作&…

《转》java设计模式--工厂方法模式(Factory Method)
本文转自:http://www.cnblogs.com/archimedes/p/java-factory-method-pattern.html 工厂方法模式(别名:虚拟构造) 定义一个用于创建对象的接口,让子类决定实例化哪一个类。Factory Method使一个类的实例化延迟到其子类…

微信小程序去除左上角返回的按钮
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文: 解决方法有两种; 1.把该页面设置为tab页面或者主页 ; 2.进入该页面使用 wx.reLaunch(); 示例 wx.reLaunch({url: ../detail/detail,}) 这样有一个弊端,就是…

我的第一个web_登陆我的第一个全栈Web开发人员职位
我的第一个webby Robert Cooper罗伯特库珀(Robert Cooper) 登陆我的第一个全栈Web开发人员职位 (Landing My First Full Stack Web Developer Job) This is the story of the steps I took to get my first job as a full stack web developer. I think it’s valuable to sha…

HTTP请求报文和HTTP响应报文(转)
原文地址:http://blog.csdn.net/zhangliang_571/article/details/23508953 HTTP报文是面向文本的,报文中的每一个字段都是一些ASCII码串,各个字段的长度是不确定的。HTTP有两类报文:请求报文和响应报文。 HTTP请求报文 一个HTTP请…

微信小程序用户未授权bug解决方法,微信小程序获取用户信息失败解决方法
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文: bug示例图: 导致这个bug的原因是 wx.getUserInfo(OBJECT) 接口做了调整; 请看官方文档的描述: wx.getUserInfo(OBJECT) 注意:此接口有…

格式化json日期'/Date(-62135596800000)/'
日期经过json序列化之后,变成了/Date(-62135596800000)/字符串,在显示数据时,我们需要解释成正常的日期。 Insus.NET和js库中,写了一个jQuery扩展方法: $.extend({JsonDateParse: function (value) {if (value /Date(…

aws lambda使用_使用AWS Lambda安排Slack消息
aws lambda使用Migrating to serverless brings a lot of questions. How do you do some of the non-serverless tasks, such as a cronjob in a serverless application?迁移到无服务器带来了很多问题。 您如何执行一些非无服务器的任务,例如无服务器应用程序中的…

微信小程序模块化开发 include与模板开发 template
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文: 1. include 是引用整个wxml文件,我通常会配合js,css一起使用; 使用场景,需要封装事件和微信 api 的公共模块。 2.template ÿ…

winform解析json
在使用C#开发爬虫程序时,会遇到需要解析json字符串的情况。对于json字符串可以使用正则表达式的形式进行解析,更为方便的方法是使用Newtonsoft.Json来实现。 Nuget添加应用包 在工程上右键——【管理Nuget程序包】浏览找到要安装的程序包Newtonsoft.Jso…

Oracle11g密码忘记处理方法
c:\>sqlplus /nolog sql>connect / as sysdba sql>alter user 用户名 identified by 密码;(注意在这里输入的密码是区分大小写的) 改完之后你可以输入 sql>connect 用户名/密码 as sysdba进行验证 转载于:https://www.cnblogs.com/imhuanxi…

hic染色体构想_了解微服务:从构想到起点
hic染色体构想by Michael Douglass迈克尔道格拉斯(Michael Douglass) 了解微服务:从构想到起点 (Understanding Microservices: From Idea To Starting Line) Over the last two months, I have invested most of my free time learning the complete ins-and-outs…

[python]关于字符串查找和re正则表达式的效率对比
最近需要在python中做大日志文件中做正则匹配 开始直接在for in 中每行做re.findall,后来发现,性能不行,就在re前面做一个基本的字符串包含判断 (str in str),如果不包含直接continue 效率对比: 1、只做一次包含判断&a…

微信小程序客服功能 把当前页面的信息卡片发送给客服
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文: 需求:微信小程序客服带详情页 , 场景:一个人通过微信小程序接入微信客服,聊天后带上入口链接 效果图: 写法: …

phpcms标签大全V9
转自:http://blog.csdn.net/cloudday/article/details/7343448调用头部 尾部{template "content","header"} 、 {template "content","footer"}{siteurl($siteid)} 首页链接地址 <a href"{siteurl($siteid)}/&q…