个人案例
- miaoui
miao, miao 的UI
miaoui扫码体验
- wAnimate
一套简化skyline worklet动画开发的动画库
wAnimate扫码体验
- 气氛高手计时器小工具
倒计时工具,秒表工具,组倒计时,组秒表
嘟嘟倒计时扫码体验
- [致富经]开发小程序月入100万,小程序如何让Ta逆袭的?
首先声明:本人与被曝光之人无任何利益关系,彼此不认识、没有任何经济关联。所收集资料均为网络公开资料。 最初注意到这个小程序黑产开发者,是看到了一个帖子:《小程序上线19日,日广告收入稳定在3000 +》,这让我很好奇,我们都知道流量是需要获取,获取流量是需要成本的,这位开发者身上一定有值得我们去学习的。但当我仔细查阅其小程序及运营手段后,令我震惊,这完全就是黑产,涉及的金额之大已经足以判刑。 1、以砍价手法吸引流量,拒绝发货直接退款。 其首次试水这种操作手法的小程序叫“铺子优品”,就是利用各种电子产品,如iPhone、小米;口号化妆品,如Dior、YSL等,以多少次砍价免费拿或低价拿吸引消费者进行转发砍价,转发砍价完成后以“无货”等理由拒绝发货并强制退款。消费者已经在多个平台进行曝光,目前这个小程序已经被微信官方封禁。投诉链接 [图片] [图片] [图片] 2、部分发货的,发的是假冒伪劣产品。 其中一小部分,例如YSL,直接发假到不能再假的仿品给消费者,消费者砍完价后付的钱可能还能买数根这样的假口红。如果第一条行为只是涉嫌不诚信,那么这一条行为,直接触犯“销售假冒伪劣产品罪”、“诈骗罪”。这样的行为,已经是属于黑产而非灰产。曝光链接 [图片] <以上两条,就是这名“开发者”的所作所为> 但是今天我想说的远不止这些,更让我震惊的是这位本能闷声赚大钱的骗子,竟然做出了以下不可思议的举动—— 1、贼喊捉贼,上官方社区说自己很冤,还妄图申诉小程序。 这名小骗子,在欺诈了数千甚至上万名消费者,遭到消费者大量投诉后,竟然到了官方社区,发帖《日流量3万人遇到用户恶意投诉该如何解决?@所有开发者》,不仅贼喊捉贼,还带上了@所有开发者,我想说的是,正因为你的这篇帖子,我今天才要扒你,我相信绝大多数的小程序开发者不屑与你为伍,你这种人渣,就应该去监狱里蹲着。 [图片] 2、开始出售教程,建立黑产产业链,意图扩散传播。 在官方明确拒绝申诉后,这名小骗子开始在官方社区发帖子《电商小程序月入50万》、《小程序上线19日,日广告收入稳定在3000+》,意图通过高额的利润驱动更多底层开发者去找他交学费、买课程,让这种毒瘤黑产蔓延整个小程序。现在暂不知道有多少人交了学费,开始了一样的行为,在此我还是郑重警告这些人——小程序都是实名的,进去是分分钟的! [图片] <以上为小骗子的迷之操作> 根据我的观察,这名小骗子很明显不懂法律,在屡屡犯罪后竟然还敢堂而皇之的出现,当然官方在迅速封禁其首个小程序后,也许也没想到这个人竟然敢继续大张旗鼓的推进。目前据测算,这个人从腾讯拿走的流量主分成应该在大几十万元,加上假冒伪劣产品收的电商支付金额,应该是超过百万元。在此我希望,微信官方以此人为反面教材,出动腾讯法务予以报案、立案,保障消费者权益,净化小程序环境。 我整理了小骗子目前使用的公司主体与新的小程序信息: 公司主体:贵州火马科技有限公司 目前仍在运营的类似小程序:19严选、十元铺、是心选(更多小程序官方请查询主体信息) 希望得到微信官方的重视,小程序的生态健康关乎着每一位开发者。 -------------------------------------------------------------- 另附上其社区主页:查看这个小骗子的社区主页 相关举报内容通过搜索引擎搜索“铺子优品”即可查看。 题外话:这个小骗子还是很聪明的,铺子优品舆论爆炸后,使用的小程序名称以大牌傍名为主,比如19严选的搜索引擎,出来的基本都是网易严选,这样更多人就发现不了其作恶的真相了。 -------------------------------更新于0714-------------------------------- 在阿拉丁小程序看到了其新小程序19严选和十元铺的卖量广告,日UV都是万起步的。此贴我会每日更新,记录诈骗生活~ [图片]
2020-07-14 - 小程序AR识别,三行代码实现Camera数据毫秒级转base64图片
关键词:小程序AR 图片 base64 相机 Camera onCameraFrame Canvas ArrayBuffer Uint8Array Uint8ClampedArray upng-js 核心步骤: 1 相机原始图像数据frame.data,即ArrayBuffer数组,转成Uint8Array数组 2 Uint8Array数组转成Uint8ClampedArray数组 3 wx.canvasPutImageData(Uint8ClampedArray) 详细流程如下: 最近因为项目需求,需要上传base64去做AR识别功能,和大家一起分享讨论下具体的实现方式。 首先说下实现原理,通过Camera的onCameraFrame获取实时帧数据,将实时帧数据添加到Canvas上,然后将Canvas保存为临时图片,再将临时图片转换为base64。 贴上核心实现代码: wxml: js: var nCounter = 0; openCamera: function (res) { var that = this var camera_ctx = wx.createCameraContext() listener = camera_ctx.onCameraFrame((frame) => { // nCounter等于30 是因为一开始相机会有一个对焦的过程,如果一开始获取数据,就是模糊的图片 if (nCounter == 30) { console.log(frame.data instanceof ArrayBuffer, frame.width, frame.height) var data = new Uint8Array(frame.data); var clamped = new Uint8ClampedArray(data); // 实时帧数据添加到Canvas上 wx.canvasPutImageData({ canvasId: 'myCanvas', x: 0, y: 0, width: frame.width, height: frame.height, data: clamped, success(res) { // 转换临时文件 wx.canvasToTempFilePath({ x: 0, y: 0, width: frame.width, height: frame.height, canvasId: 'myCanvas', fileType: 'jpg', destWidth: frame.width, destHeight: frame.height, // 精度修改 quality: 0.8, success(res) { // 临时文件转base64 wx.getFileSystemManager().readFile({ filePath: res.tempFilePath, //选择图片返回的相对路径 encoding: 'base64', //编码格式 success: res => { // 保存base64 that.data.mybase64 = res.data; } }) }, fail(res) { console.log(res); } }, that) } }) } nCounter++ // console.log(nCounter); if (nCounter >= 100) { nCounter = 0 } }) listener.start() } 目前网上有两种转换方式并对比下: 1:upng-js等第三方转码js库,将相机流转换成base64,一般需要1-2s左右 [图片] 2.使用canvas将相机流转变base64,都是使用js或者小程序官方的api进行转换,一般转换时间在1秒以下: [图片] 重点说明下: 如何使用wx.canvasPutImageData()将相机流添加canvas,我们查看该官方api,添加的data类型为:Uint8ClampedArray [图片] 而我们通过onCameraFrame获取的data类型为:ArrayBuffer [图片] 所有两者类型不一致,就需要转换,将ArrayBuffer=>Uint8Array=>Uint8ClampedArray var data = new Uint8Array(frame.data); var clamped = new Uint8ClampedArray(data); 成功的把onCameraFrame获取实时帧数据转换并canvasPutImageData在canvas上,并通过canvasToTempFilePath获取临时文件,如何获取临时文件getFileSystemManager转换为base64,传入云端进行AR识别,就大功告成! 技术分享来自于:北京晞翼科技有限公司 技术作者:le3d618、xiaoz0816 微信商务联系:le3d618
2020-04-30 - 【配置案例】通过调用API接口实现垃圾分类技能配置
在前两期的教学文章里我们分别介绍了简单问答型技能和复杂任务型技能的配置方法,本期我们将结合时下大热的“垃圾分类”,为大家讲解较为复杂任务型技能——“垃圾分类技能”的配置方法。 在此之前我们已经分别介绍过两种技能的创建方法,我们将不再赘述技能配置环节,直接进入“垃圾分类技能”的意图配置环节。 本文介绍的为“无激活词”垃圾分类技能的配置方法,“有激活词”的垃圾分类技能只需在创建技能—>开启设置【技能热词】—>配置唤醒热词—>配置【退出热词】即可实现配置。 意图配置 在垃圾分类查询的对话情景下,我们推测用户可能有下列几种意图: 1.询问“机器人”是否/能否可以进行“垃圾分类查询” 2.在一轮对话(查询)结束后选择继续追问查询 3.直接询问“某种垃圾是什么垃圾”,例:询问“苹果是什么垃圾” 对应上述三种情景我们需创建三种意图,下面我们将介绍配置这三种意图所用到的概念及配置方法。由于这三种意图的【机器人回答】配置都用到了同一种方法,我们将【机器人回答】的配置放在最后统一讲解。 [图片] 一、询问“机器人”是否/能否可以进行“垃圾分类查询”-----意图【垃圾分类-无语义槽】 用户问法:在第一期文章中我们介绍了用规则符号来泛化更多的用户问法,以提高配置效率。根据平台问法规则,我们可以配置以下用户问法: [图片] 语义槽设置及追问话术:配置如上图所示的用户问法后,我们已知用户想要进行垃圾分类查询的意图,但不能精准知道用户想要查询哪种垃圾。因此,我们需要了解【语义槽】、【词典】及【追问话术】等概念,来完善我们的配置。 【语义槽】是用户说法中所包含的关键字,语义槽可以帮助系统准确识别用户意图。如:“今天双子座的运势如何”中,语义槽为#时间#、#星座#及#运势#。语义槽通常与词典一起使用,一个语义槽可以同多个词典进行绑定,同样,一个词典也可以与不同的语义槽进行关联。【词典】是一个规范的自然语言短语集合,通常定义为应用所在领域的术语的集合,可用于用户说法中的关键信息提取和语义槽调用。例如“刮风”、“降雨”属于“天气”这个词典,“跑步”、“游泳”属于“运动”这个词典。每个词典均可在多个技能中重复使用。平台现支持的词典可分为两类:系统词典和自定义词典。自定义词典的创建方法可参考平台说明文档—基本概念—词典(https://developers.weixin.qq.com/doc/aispeech/DICT.html)。【追问话术】平台支持对语义槽设置“是否立即追问”。如果我们打开开启按钮,则需要给语义槽配置相应的追问话术(可配置多条,追问时随机选取)。当用户问法中没有提供对话所必须的语义槽值时,机器人会对其自动发起追问。例如,在【垃圾分类查询】技能下,若用户问法为“我要查询垃圾分类”,并没有给出具体的垃圾类型,该对话无法继续进行。此时,我们如果配置追问话术,系统会自动向用户发送追问语句以获取该语义槽值。[图片] (注:此处的语义槽“结果”,为API调用输出结果回填,API调用请参考后文【机器人回答】) 由于我们配置的用户问法中没有出现意图需要的语义槽信息【垃圾名称】,需要手动配置才能实现垃圾分类的查询,配置步骤如下: 点击添加一条语义槽,在语义槽弹窗处填写语义槽的名称-【垃圾名称】,点击确定后,语义槽设置中会显示语义槽的名称信息;在词典列,点击设置词典,在词典设置弹窗页勾选我们需要的词典-【垃圾名称】词典(该词典为自定义词典);[图片] 开启立即追问按钮,设置追问语句(可添加多条)。配置完成后,在用户问法没有获取到必需的“垃圾名称”信息后,系统会自动发出“请说出您要查询的垃圾名称”的追问。[图片] 二、在一轮对话(查询)结束后选择继续追问查询——意图【继续追问】 根据用户言语习惯,我们可知在完成一轮垃圾分类查询时,用户常使用反问句“那[垃圾名称](是什么垃圾)呢?”追问进行第二轮问答。在配置用户问法时,“那苹果呢”、“那土豆呢“为同一种句式,只不过句中的垃圾名称不一样。因此,我们可将如上句式中的关键词[垃圾名称]使用槽位代替,并配置以下用户问法: [图片] 在这里我们可以发现,如果在用户问法中添加了语义槽,语义槽设置中会自动出现该条语义槽的名称,这时候需要我们为语义槽关联上对应的词典,系统语义槽已自动关联词典,无需再配置,当然我们也可以根据需要修改关联的词典。 考虑到用户问法中已经明确引用语义槽【垃圾名称】,因此这个意图下的语义槽也就不需要配置【追问话术】了。 [图片] 三、直接询问“某种垃圾是什么垃圾”,例:询问“苹果是什么垃圾”——意图【垃圾分类-有语义槽】 这是一种较为完整、理想的用户表达方法,参考以上意图的配置方法和用户表达习惯,该意图下的用户问法可进行如下配置: [图片] 机器人回答 在前两篇文章中我们介绍了配置机器人回答的两种操作“不使用API资源”以及“机器人提问”。在本技能的机器人回答配置中,我们选用“调用API资源”的方式。这种配置操作适用于回复内容需要使用外部资源,或回复内容跟随用户语义槽的值而变动的情况。平台系统提供一些常用的API接口,如:地址查询、邮政编码查询、快递查询等,供开发者免费使用。例如:“垃圾分类”这个意图,就需要调用API接口,系统才能针对输入的不同类型垃圾进行分类,输出结果,给出明确的回复。 我们首先在回复类型处选择【服务接口调用】,下拉选择【垃圾分类】:[图片] 点击【接口配置】,将输入参数与语义槽对应起来,保持语义槽的传递。[图片] 这里的输出参数不需要开发者配置,系统会对其自动建槽,并关联接口回填词典。如果想要更改,我们也可以删除系统填写的语义槽名称,重新定义新的语义槽名称。点击确定后,语义槽设置中即会显示输出参数对应的语义槽名称。 设置好接口后,我们还可以在【API配置】中进行接口调试,查看API是否有效。在调试页面输入想要查询的垃圾名称,即可查看返回的结果状态。[图片] 完成配置后,我们就可以在返回的每个查询状态下,配置相应的回复结果。[图片] 如果系统API不能满足技能开发需要,平台也支持开发者上传自定义API。开发者可以点击【自定义接口】>>【创建自定义接口】,填写接口名称、URL、输入/输出参数、返回状态即可。 [图片] 多轮对话 如果用户问题、指令或请求较为复杂,需要进行多轮对话才能完成时,我们可以在配置完机器人回答后,通过【是否结束对话】-【不结束对话】-选择承接的意图(可选择多个),来实现意图之间的跳转。 例如:我们在配置“垃圾分类”技能下三个意图的【机器人回答】后,在【是否结束对话】下,选择跳转到“继续追问”这个意图,就组成了一个关于垃圾分类查询的多轮对话,第一轮对话为“请帮我查询XX是什么垃圾”,第二轮对话为“那XX(是什么垃圾)呢?”。 [图片] 同时为了保证与上下意图的衔接,开发者需要在跳转的意图上方选择【是否承接对话】-承接对话。开启【承接对话】的设置后,只有用户说法与上一轮意图吻合时,系统才会进入当前意图;否则意图问法将不能被系统语义解析。 [图片] 在最后进行【机器人调试】,配置完整的“垃圾分类技能”就可以同步发布至你的小程序及公众号了。” 到这里针对“普通技能”、“高级技能”这两大技能类型的配置方法基本上就为大家讲解完毕了,更多配置玩法在微信对话开放平台上(https://openai.weixin.qq.com/)等你发掘~
2020-07-31 - 别@官方了!云开发教你制作个性头像小程序,以后过节想加啥就加啥!
在国庆即将来临之际 朋友圈又兴起了一波 “@微信官方” 风! [图片] 网友的万千种呼唤中, 有像上方网友一样请官方为头像加上国旗的, 有硬核的同学直接表达了对暴富的强烈渴望: [图片] [图片] 更有请官方实现花式心愿的: [图片] 甚至… [图片] …… (微信官方:我太南了)、 [图片] 慢慢的, 这种起源于为头像加上国旗、圣诞帽等装饰的 “@官方” 体 演变成了 大型国民许愿池! 无数人在这里许下心愿、通过自嘲来缓解压力。 但是, 古往今来无数史实告诉我们, 求人不如求己! 这不, 云开发就来教你用代码轻松撸出个性头像了! 花式个性挂件想加就加不求人! 先来看看效果! [图片] 下面就上精华代码! [代码]wx.cloud.callFunction({ name:'image', data:{ avatar: e.detail.userInfo.avatarUrl, // 头像获取自 userInfo style: e.target.dataset.style // style 可以取值 1 ~ 4 } }) [代码] 通过完整代码配置好后 可以为你的头像加上任意喜欢的素材! 怎么样?是不是非常硬核! 求人不如求己,生活还需努力! 大家一起加油吧! (小编已经提前把圣诞帽的头像做好了嘻嘻) 源码链接 https://github.com/TencentCloudBase/tcb-demo-avatar 如果你想要了解更多关于云开发CloudBase相关的技术故事/技术实战经验,请扫码关注【腾讯云云开发】公众号~ [图片]
2019-09-25 - 小程序海报生成工具,可视化编辑直接生成代码使用,你的海报你自己做主
开门见山 工具地址 点我直达>>painter-custom-poster 由于挂载在github page上,打开速度会慢一些,请耐心等待或自行解决git网速问题 背景 在做小程序时候,我们经常会有一个需求,需要将小程序分享到朋友圈,但是朋友圈是不允许直接分享小程序,那我们还有其他的办法解决吗?答案肯定是有的,即 canvas 生成个性化海报分享图片到朋友圈 分析 小程序中有大量的生成图片需求,但是使用过 canvas 的人,都会发现一些难以预料的问题>>有关小程序的坑 直接在 canvas 上绘制图形,对于普通开发者来说代码会特别凌乱并且难以维护,经常会花费很久的时间去优化代码 不同的环境渲染问题,例如在开发者工具看起来好好的,一到 Android 真机,就出现图片不显示,位置不对应等等问题 解决 那可不可以开发一款生成海报的插件库呢? 首先,只需要提供一份简单的参数配置文件即可 解决掉小程序Canvas遇到的一些大大小小的坑 有严苛的测试环节,解决各种环境和各种机型遇到的问题,并提供稳定的线上版本 长期维护,并有专人更新迭代更新颖的功能 以上的要求当然是可以的,曾经的我也想尝试开发一款出来,但是后来尝试了几款现成的工具之后就放弃了,毕竟轮子这个东西,是需要不断维护更新的,另外已经有这么多优秀现成的插件了,我为何还要费力去写呢,贡献代码岂不更美哉,以下是我收集的几款 小程序生成图片库,轻松通过 json 方式绘制一张可以发到朋友圈的图片>>Painter 小程序组件-小程序海报组件>>wxa-plugin-canvas 微信小程序:一个 json 帮你完成分享朋友圈图片>>mp_canvas_drawer 我想干什么 唠了这么多,好像提供给大家插件就没我什么事情了…想走是不可能的 为了能够制作出更酷炫的海报,我思考了许久 虽然有了插件后,只需要提供配置代码就能够制作出一款海报来,但是我发现还是有些许问题 制作海报效率还是不够高,微调一个元素的大小和位置,就需要不断的修改保存代码,等待片刻,查看效果,真的烦 一个小小的位置调整可能就需要来回调整无数次,这种最简单的机械化劳动,这辈子是不可能的 拿着完美的稿子,递给设计师看,这个位置不对,这个线太粗,这个颜色太重…你信不信我打死你 对于一些精美复杂的海报,实现起来真的不太现实 那我需要怎么做呢,请点击这个链接体验>>painter-custom-poster 点击左侧例子展示中的任意一个例子,然后导入代码就能看到效果图,这下你应该能猜到了我的想法了 如何实现 刚开始我想用简单的html和css加拖动功能实现,通过简单尝试之后就放弃了,因为这个功能真的太复杂了,简单的工具肯定是不行的 中间这个计划停滞了很长时间,一度已经放弃 直到发现了这个库fabric.js,真的太太优秀了,赞美之词无以言表,唯一的缺点就是中文教程太少,必须生啃英文加谷歌翻译 fabric介绍,你可以很容易地创建任何一个简单的形状,复杂的形状,图像;将它们添加到画布中,并以任何你想要的方式进行修改:位置、尺寸、角度、颜色、笔画、不透明度等 How To Use 目前工具一共分成4部分 例子展示 用来将一些用户设计的精美海报显示出来,通过点击对应的例子并将代码导入画布中 画布区 显示真实的海报效果,画布里添加的元素,都可以直接用鼠标进行拖动,旋转,缩放操作 操作区 第一排四个按钮 复制代码 将画布的展示效果转化成小程序海报插件库所需要的json配置代码,目前我使用的是Painter库,默认会转化成这个插件的配置代码,将代码直接复制到card.js即可 查看代码 这个功能用不用无所谓,可以直观的看到生成的代码 导出json 将画布转化成fabric所需要的json代码,方便将自己设计的海报代码保存下来 导入json 将第3步导出的json代码导入,会在画布上显示已设计的海报样式 第二排五个按钮 画布 画布的属性参数 详解见下方 文字 添加文字的属性参数 详解见下方 矩形 添加矩形的属性参数 详解见下方 图片 添加图片的属性参数 详解见下方 二维码 添加二维码的属性参数 详解见下方 第三排 各种元素的详细设置参数 激活区 激活对象是指鼠标点击画布上的元素,该对象会被蓝色的边框覆盖,此时该对象被激活,可以执行拖动 旋转 缩放等操作 激活区只有对象被激活才会出来,用来设置激活对象的各种配置参数,修改value值后,实时更新当前激活对象的对应状态,点击其他区域,此模块将隐藏 快捷键 ‘←’ 左移一像素 ‘→’ 右移一像素 ‘↑’ 上移一像素 ‘↓’ 下移一像素 ‘ctrl + z’ 撤销 ‘ctrl + y’ 恢复 ‘delete’ 删除 ‘[’ 提高元素的层级 ‘]’ 降低元素的层级 布局属性 通用布局属性 属性 说明 默认 rotate 旋转,按照顺时针旋转的度数 0 width、height view 的宽度和高度 top、left 如 css 中为 absolute 布局时的作用 0 background 背景颜色 rgba(0,0,0,0) borderRadius 边框圆角 0 borderWidth 边框宽 0 borderColor 边框颜色 #000000 shadow 阴影 ‘’ shadow 可以同时修饰 image、rect、text 等 。在修饰 text 时则相当于 text-shadow;修饰 image 和 rect 时相当于 box-shadow 使用方法: [代码]shadow: 'h-shadow v-shadow blur color'; h-shadow: 必需。水平阴影的位置。允许负值。 v-shadow: 必需。垂直阴影的位置。允许负值。 blur: 必需。模糊的距离。 color: 必需。阴影的颜色。 举例: shadow:10 10 5 #888888 [代码] 渐变色支持 你可以在画布的 background 属性中使用以下方式实现 css 3 的渐变色,其中 radial-gradient 渐变的圆心为 中点,半径为最长边,目前不支持自己设置。 [代码]linear-gradient(-135deg, blue 0%, rgba(18, 52, 86, 1) 20%, #987 80%) radial-gradient(rgba(0, 0, 0, 0) 5%, #0ff 15%, #f0f 60%) [代码] !!!注意:颜色后面的百分比一定得写。 画布属性 属性 说明 默认 times 控制生成插件代码的宽度大小,比如画布宽100,times为2,生成的值为200 1 文字属性 属性名称 说明 默认值 text 字体内容 别跟我谈感情,谈感情伤钱 maxLines 最大行数 不限,根据 width 来 lineHeight 行高(上下两行文字baseline的距离) 1.3 fontSize 字体大小 30 color 字体颜色 #000000 fontWeight 字体粗细。仅支持 normal, bold normal textDecoration 文本修饰,支持none underline、 overline、 linethrough none textStyle fill: 填充样式,stroke:镂空样式 fill fontFamily 字体 sans-serif textAlign 文字的对齐方式,分为 left, center, right left 备注: fontFamily,工具中的第一个例子支持文字字体,但是导入小程序为什么看不到呢,小程序官网加载网络字体方法>> 加载字体教程>> 文字高度 是maxLines lineHeight2个字段一起计算出来的 图片属性 属性 说明 默认 url 图片路径 mode 图片裁剪、缩放的模式 aspectFill mode参数详解 scaleToFill 缩放图片到固定的宽高 aspectFill 图片裁剪显示对应的宽高 auto 自动填充 宽度全显示 高度自适应居中显示 Tips(一定要看哦~) 本工具不考虑兼容性,如发现不兼容请使用google浏览器 painter现在只支持这几种图形,所以暂不支持圆,线等 如果编辑过程,一个元素被挡住了,无法操作,请选择对象并通过[ ]快捷键提高降低元素的层级 文字暂不支持直接缩放操作,因为文字大小和元素高度不容易计算,可以通过修改激活栏目maxLines lineHeight fontSize值来动态改变元素 如发现导出的代码一个元素被另一个元素挡住了,请手动调整元素的位置,json数组中元素越往后层级显示就越高,由于painter没有提供层级参数,所以目前只能这样做 本工具导出代码全是以px为单位,为什么不支持rpx, 因为painter在rpx单位下,阴影和边框宽会出现大小计算问题,由于原例子没有提供px生成图片方案,可以下载我这里修改过的demo>>Painter即可解决 文本宽度随着字数不同而动态变化,想在文本后面加个图标根据文本区域长度布局, 请参考Painter文档这块教程直接修改源码 由于本工具开发有些许难度,如出现bug,建议或者使用上的问题,请提issue,源码地址>>painter-custom-poster 海报贡献 如果你设计的海报很好看,并且愿意开源贡献,可以贡献你的海报代码和缩略图,例子代码文件在example中,按顺序排列,例如现在库里例子是example2.js,那你添加example3.js和example3.jpg图片,事例可以参考一下文件夹中源码,然后在index.js中导出一下 导出代码 代码不要格式化,会报错,请原模原样复制到json字段里 生成缩略图 刚开始我想在此工具中直接生成图片,但是由于浏览器图片跨域问题导致报错失败 所以请去小程序中生成保存图片,图片质量设置0.2,并去tinypng压缩一下图片 找到painter.js,替换下边这个方法,可以生成0.2质量的图片,代码如下 [代码] saveImgToLocal() { const that = this; setTimeout(() => { wx.canvasToTempFilePath( { canvasId: 'k-canvas', fileType: 'jpg', quality: 0.2, success: function(res) { that.getImageInfo(res.tempFilePath); }, fail: function(error) { console.error(`canvasToTempFilePath failed, ${JSON.stringify(error)}`); that.triggerEvent('imgErr', { error: error }); } }, this ); }, 300); } [代码] TODO 颜色值选择支持调色板工具 文字padding支持 缩放位置弹跳问题优化 假如需求大的话,支持其他几款插件库代码的生成 ~ 创作不易,如果对你有帮助,请给个星星 star✨✨ 谢谢 ~
2019-09-27