电子商城网站开发对接,装修公司排名榜十大品牌,做外贸应该去什么网站,沈阳做手机网站的公司Painter是由酷家乐移动前端团队打造的一款小程序绘图组件。
原项目地址#xff1a;https://github.com/Kujiale-Mobile/Painter
新版地址#xff1a;https://github.com/shesw/Painter
这款交互版原来是为了针对业务中的新需求而由我自己开发的#xff0c;后来需求改动https://github.com/Kujiale-Mobile/Painter
新版地址https://github.com/shesw/Painter
这款交互版原来是为了针对业务中的新需求而由我自己开发的后来需求改动所以并没有用上。组里大佬考虑种种原因主要是项目没用上0让我先在自己的github上开源。这版painter与原版的区别在于
添加了交互事件。Painter本质是以canvas为基础的小程序的canvas有许多限制。允许canvas上元素的交互点击事件可以实现更为便捷的功能比如原来需要在canvas上添加功能按钮现在可以直接画在canvas上添加拖拽元素的功能。目前这个功能没有完善好因为它的滑动动作会与小程序的全屏滑动事件冲突因此拖拽功能在固定的页面上效果才好如在拖拽时设置overflow: hidden等。
这里将新版的Painter称为dancing-painter。引入方式请参考readme和demo。
演示 主要功能
指原版的painter的功能。这些功能依然是本项目的主(实)要(用)功能。
简介
原版的使用简介请参见 https://juejin.im/post/5b40b158e51d4518f543c7b0
简单来讲使用过程如下图所示可以结合demo来看 距离首次开源Painter库已经有一段时间了这期间获益于各路道友的帮助和提点Painter进行了几波更新原项目地址)
新增特性
增加align属性可以使任意元素可以实现左中右对齐。加入文字换行的能力。对一段文字设置width或者maxLines都有可能触发文字的换行。添加文字的一些属性fontWeight, textDecoration, textStyel(fill, stroke), maxLines, lineHeight图片mode属性实现图片裁剪、缩放默认为aspectFill图片不设置width, heighti属性使用默认宽高left, right, top, bottom对负数的支持
修复问题
某些机型上切边会出现黑线。安卓机型上圆角无法显示使用文件前检查文件是否正常二维码大小显示异常
交互功能
这一版的特色主要是具备元素的点击事件实现以及拖拽功能做出来以后因为项目上暂时用不上所以感觉功能上可能比较鸡肋。不过还蛮好玩的?
在demo中称之为dancing-painter。
**强调**要使用交互功能有一下两点需要注意
导入palette时使用绝对路径方法导入palette类以module.exports输出。
原因小程序页面向组件传值时会把对象参数做一个类似于JSON.parse(JSON.stringfy())的拷贝导致对象中的函数在传递后丢失。因此在dancing-painter中选择讲palette即生成图片的json代码的路径传递给painter组件在组件内require到这个文件再合成所需的json数据。
导入代码如下 //直接导入数据// const template new DCard().palette(); //导入绝对路径const template {path: /palette/dancing-card.js,data: {},};this.setData({template: template,});palette
//位于/palette/dancing-card.js
class PaletteCard {context {}constructor(data) {this.data data;}palette() {return{...}}
}
module.exports PaletteCard;实现点击效果
Painter的元素绘制是以json的形式给出的其交互行为和拖拽效果也定义在相应的json文件里。
在需要设定某一个元素的点击事件的时候只需要在其相应的json代码里加入methods属性即可。该属性支持一下几种点击方式
namedescriptiontap点击longpress长按touchstart开始触摸touchmove移动touchend触摸结束
每一个方法可以返回一个boolean值以表示是否拦截该事件。在dancing-painter中如果在页面上元素有重叠则方法的传递默认是由下而上的在任意一个元素的methods方法中可以返回true来拦截该事件。
使用拖拽功能
使用animation属性目前只支持拖拽能力。由于存在与屏幕的滑动冲突如果有大神知道怎么截获屏幕的滑动事件如长页面的滚动请千万不吝赐教告诉我哈需要在使用时固定住整个页面如设置overflow: hidden。
使用设置animation:{drag:true}
示例
{width: 700rpx,height: 1000rpx,background: #eee,views: [{type: qrcode,content: https://github.com/Kujiale-Mobile/Painter,css: {top: 40rpx,left: 180rpx,color: red,borderWidth: 10rpx,borderColor: blue,width: 120rpx,height: 120rpx,align: center,},methods: {tap() {console.log(qrcode);},}},{type: rect,css: {top: 40rpx,left: 180rpx,color: green,borderRadius: 20rpx,borderWidth: 10rpx,width: 120rpx,height: 120rpx,},methods: {tap() {// 调用当前页面的function方法const pages this.getCurrentPages();const currentPage pages[pages.length-1];currentPage.function();},},animation: {drag: true,},}]
}事件冒泡
事件默认是冒泡传递的。示例如下
上面的代码中是两个部分重叠的二维码和方形 点击二者的重合部分控制台输出 性能
拖拽功能是一种动画现象涉及到canvas的重绘。经过测试在IDE上重绘速度很快在真机上有数量级的差别。
动画效果的连贯性主要是由canvas.draw()的速度决定的。
下图展示了在demo主页上canvas.draw()方法在ide和真机上运行的时间差别单位ms
IDE: 真机华为荣耀8 结语
感谢大佬在开发中对我的无限帮助。
感谢 demi520 的 wxapp-qrcode 库Painter 中二维码绘制部分使用了该库的部分代码并做了些修改。
另外这里有一篇wiki简单介绍了怎样在mpvue中使用Painter。
坑mpvue在更新某一个页面元素的值的时候会同时把所有data中存在的元素都更新一遍。
这就造成了这个问题Painter绘制完成后会触发onImgOK函数传出图片的url。这时将该url传入某image的src中去同时就会触发Painter的template的再赋值从而导致无限重绘。
最后作为程序员届的新手和菜鸟诚邀各路大神用issue和建议砸死我?
最后作为程序员届的新手和菜鸟诚邀各路大神用issue和建议砸死我?
最后作为程序员届的新手和菜鸟诚邀各路大神用issue和建议砸死我?
demo传送门https://github.com/shesw/Painter
使用参考原版 https://juejin.im/post/5b40b158e51d4518f543c7b0
