用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

531

主题

909

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
12271
2019-9-26 16:21:47 Rolan 管理员 楼主 11044
开门见山工具地址 点我直达>>painter-custom-poster
由于挂载在github page上,打开速度会慢一些,请耐心等待或自行解决git网速问题
背景在做小程序时候,我们经常会有一个需求,需要将小程序分享到朋友圈,但是朋友圈是不允许直接分享小程序,那我们还有其他的办法解决吗?答案肯定是有的,即 canvas 生成个性化海报分享图片到朋友圈
分析
  • 小程序中有大量的生成图片需求,但是使用过 canvas 的人,都会发现一些难以预料的问题>>有关小程序的坑
  • 直接在 canvas 上绘制图形,对于普通开发者来说代码会特别凌乱并且难以维护,经常会花费很久的时间去优化代码
  • 不同的环境渲染问题,例如在开发者工具看起来好好的,一到 Android 真机,就出现图片不?#20801;荊?#20301;置不对应等等问题
解决那可不可以开发一款生成海报的插件库呢?
  • 首先,只需要提供一份简单的?#38382;?#37197;置文件即可
  • 解决掉小程序Canvas遇到的一些大大小小的坑
  • 有严苛的测试?#26041;冢?#35299;决各?#21482;?#22659;和各?#21482;?#22411;遇到的问题,并提供稳定?#21335;?#19978;版本
  • 长期维护,并有专人更新迭代更新颖的功能
以上的要求当然是可以的,曾经的我也想尝试开发一款出来,但是后来尝试了几款现成的工具之后就放弃了,毕竟轮子这个东西,是需要不断维护更新的,另外已经有这么多优秀现成的插件了,我为?#20301;挂?#36153;力去写呢,?#27605;?#20195;码岂不更美哉,以下是我收集的几款
  • 小程序生成图片库,轻松通过 json 方式绘制一张可以发到朋友圈的图片>>Painter
  • 小程序组件-小程序海报组件>>wxa-plugin-canvas
  • 微信小程序:一个 json 帮你完成分享朋友圈图片>>mp_canvas_drawer
我想干什么唠了这么多,好像提供给大家插件就没我什么事情了...想走是不可能的为了能够制作出更酷炫的海报,我思考了许?#30431;?#28982;有了插件后,只需要提供配置代码就能够制作出一款海报来,但是我发?#21482;?#26159;有些许问题
  • 制作海报效率还是不够高,微调一个元素的大小和位置,就需要不断的修改保存代码,等待片刻,查看效果,真的烦
  • 一个小小的位置调整可能就需要来回调整无数次,这种最简单的机械化劳动,这辈子是不可能的
  • 拿着完美的稿子,递给设计师看,这个位置不对,这个线太粗,这个颜色太重...你信不信我打死你
  • 对于一些精美复杂的海报,实现起来真的不太现实
那我需要怎么做呢,请点击这个链接体验>>painter-custom-poster点击左侧例子展示中的任意一个例子,然后导入代码就能看到效果图,这下你应该能猜到了我?#21335;?#27861;了
如?#38382;?#29616;
  • 刚开始我想用简单的html和css加拖动功能实现,通过简单尝试之后就放弃了,因为这个功能真的太复杂了,简单的工具肯定是不行的
  • 中间这个计划停滞了很长时间,一度已经放弃
  • 直到发现了这个库fabric.js,真的太太优秀了,赞?#20048;?#35789;无以?#21592;恚?#21807;一的缺点就是中文教程太少,必须生啃英文加谷歌翻译
  • fabric介绍,你可?#38498;?#23481;易地创建任何一个简单的形状,复杂的形状,图像;将它们添加到画布中,并以任?#25991;?#24819;要的方式进行修?#27169;?#20301;置、尺寸、角度、颜色、笔画、不透明度等
How To Use目前工具一共分成4部分
例子展示用来将一些用户设计的精美海报?#20801;?#20986;来,通过点击对应的例子并将代码导入画布中
画布区?#20801;?#30495;实的海报效果,画布里添加的元素,都可以直接用鼠标进行拖动,旋转,缩放操作
操作区第一排四个按钮
  • 复制代码 将画布的展示效果转化成小程序海报插件库所需要的json配置代码,目前我使用的是Painter库,默认会转化成这个插件的配置代码,将代码直接复制到card.js即可
  • 查?#21019;?#30721;  这个功能用不用无所谓,可以直观的看到生成的代码
  • 导出json 将画布转化成fabric所需要的json代码,方便将自己设计的海报代码保存下来
  • 导入json 将第3步导出的json代码导入,会在画布上?#20801;?#24050;设计的海报样式
第二排五个按钮
  • 画布 画布的属性?#38382;?详解见下方
  • 文字 添加文字的属性?#38382;?详解见下方
  • 矩形 添加矩形的属性?#38382;?详解见下方
  • 图片 添加图片的属性?#38382;?详解见下方
  • 二维码 添加二维码的属性?#38382;?详解见下方
第三排
各种元素?#21335;?#32454;设置?#38382;?br /> 激活区激活对象是指鼠标点击画布上的元素,该对象会被蓝色的边框覆盖,此时该对象被激活,可以执行拖动 旋转 缩放等操作激活区只有对象被激活才会出来,用来设置激活对象的各种配置?#38382;?#20462;改value值后,实时更新当前激活对象的对应状态,点击其他区域,此模块将隐藏
快捷键
  • '←'  左移一像素
  • '→'  右移一像素
  • '↑'  上移一像素
  • '↓'  下移一像素
  • 'ctrl + z'  撤销
  • 'ctrl + y'  ?#25351;?li>'delete'    ?#22659;?li>'[' 提高元素的层级
  • ']' 降低元素的层级
布局属性通用布局属性属性说明默认
rotate旋转,按照顺时针旋转的度数0
width、heightview 的宽?#32676;?#39640;度
top、left如 css 中为 absolute 布局时的作用0
background背景颜色rgba(0,0,0,0)
borderRadius边框?#27493;?
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 渐变的圆心为 中点,半径为最长边,目?#23433;恢?#25345;自己设置。
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%)复制代码!!!注意:颜色后面的百分比一定得?#30784;?/strong>
画布属性属性说明默认
times控制生成插件代码的宽度大小,?#28909;?#30011;布宽100,times为2,生成的值为2001文字属性属性名称说明默?#29616;?br /> text字体内容别跟我谈感情,谈感情伤钱
maxLines最大行数不限,根据 width 来
lineHeight行高(上下两行文字baseline的距离)1.3
fontSize字体大小30
color字体颜色#000000
fontWeight字体粗?#28014;?#20165;支持 normal, boldnormal
textDecoration文本修饰,支持none  underline、 overline、 linethroughnone
textStylefill: 填充样式,stroke:镂空样式fill
fontFamily字体sans-serif
textAlign文字的?#20113;?#26041;式,分为 left, center, rightleft备注:
图片属性属性说明默认
url图片路径
mode图片裁剪、缩放的模式aspectFillmode?#38382;?#35814;解
  • scaleToFill 缩放图片到固定的宽高
  • aspectFill 图片裁剪?#20801;?#23545;应的宽高
  • auto 自动填充 宽?#28909;允?高度自?#35270;?#23621;中?#20801;?br />
Tips(一定要看哦~)
  • 本工具不考虑兼容性,如发现不兼容请使用google浏览器
  • painter现在只支持这几种图形,所以暂不支持圆,线等
  • 如果编辑过程,一个元素被挡住了,无法操作,请选择对象并通过[ ]快捷键提高降低元素的层级
  • 文字暂不支?#31181;?#25509;缩放操作,因为文字大小和元素高度不容易计算,可以通过修改激活?#25913;縨axLines lineHeight fontSize值来动态改变元素
  • 如发现导出的代码一个元素被另一个元素挡住了,请手动调整元素的位置,json数组中元素越往后层级?#20801;?#23601;越高,由于painter没有提供层级?#38382;?#25152;?#38405;?#21069;只能这样做
  • 本工具导出代码全是以px为单位,为什么不支持rpx, 因为painter在rpx单位下,阴影和边框宽会出现大小计算问题,由于原例?#29992;?#26377;提供px生成图片方案,可以下载我这里修改过的demo>>Painter即?#23665;?#20915;
  • 文本宽?#20154;?#30528;字数不同而动态变化,想在文本后面加个图标根据文本区域长度布局, 请参考Painter文档这块教程直?#26377;?#25913;源码
  • 由于本工具开发有些许?#35759;齲?#22914;出现bug,建议或者使用上的问题,请提issue,源码地址>>painter-custom-poster
海报?#27605;?/strong>如果你设计的海报很好看,并?#20197;?#24847;开?#22402;毕祝?#21487;以?#27605;?#20320;的海报代码?#36864;?#30053;图,例子代码文件在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支持
  • 缩放位置弹跳问题优化
  • 假如需求大的话,支?#21046;?#20182;几款插件库代码的生成
~创作不易,如果?#38405;?#26377;帮助,请给个?#20999;?star?? 谢谢~


作者:成风
链接:https://juejin.im/post/5d8b20ba51882509615bca09



分享至 : QQ空间
1 人收藏
有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
还可以加QQ交流群咨询:536592077。
?#34892;?#20998;享
发新帖
您需要登录后才可以回帖 登录 | 立即注册
不朽的浪漫援彩金
梦幻西游赚钱技巧2018 贵州时时彩开奖号码 17140大乐透复式推荐号码 亲朋手游下载官网 双色球单式投和复式投注 赚钱鹊桥 浙江十一选五前组选 山东11选5走势一定牛 大话西游2老区什么职业赚钱 宁夏十一选五派彩 五分彩怎么稳赚不亏 卖顾家家居赚钱吗 浙江飞鱼今天开奖结果 股票涨跌的依据 极速飞艇官网开奖 刷单子赚钱