时间: 2019-10-11阅读: 137标签: 海报背景

时间: 2019-09-24阅读: 143标签: 海报背景

由于我们无法将小程序直接分享到朋友圈,但分享到朋友圈的需求又很多,业界目前的做法是利用小程序的
Canvas
功能生成一张带有二维码的图片,然后引导用户下载图片到本地后再分享到朋友圈。而小程序
Canvas 功能是很难用的,往往为了绘制一张简单图片,就得写上一堆
boilerplate code ,而且一不小心还会踩到 Canvas
的各种彩蛋(坑)。我想此时你的心情肯定是这样的。

在做小程序时候,我们经常会有一个需求,需要将小程序分享到朋友圈,但是朋友圈是不允许直接分享小程序,那我们还有其他的办法解决吗?答案肯定是有的,即
canvas 生成个性化海报分享图片到朋友圈

分析

分析小程序中有大量的生成图片需求,但是使用过 canvas
的人,都会发现一些难以预料的问题有关小程序的坑直接在 canvas
上绘制图形,对于普通开发者来说代码会特别凌乱并且难以维护,经常会花费很久的时间去优化代码不同的环境渲染问题,例如在开发者工具看起来好好的,一到
Android 真机,就出现图片不显示,位置不对应等等问题解决

想到小程序中有如此大量的生成图片需求,而 Canvas
生成方法又是如此难用和坑爹。那我们就想到可不可以做一款可以很方便生成图片,并且还能屏蔽掉直接使用
Canvas 的一些坑的库呢?所以我们发起了 “画家计划— 通过 json
数据形式,来进行动态渲染并绘制出图片”。 Painter 库的整体架构如下:

那可不可以开发一款生成海报的插件库呢?

首先,我们定义了一套绘图 JSON 规范,开发者可以根据需求构建生成图片的
Palette(调色板),然后在程序运行过程中把调色板传入给
Painter(画家)。Painter 会调用 Pen(画笔),根据 Palette
内容绘制出对应的图片后返回。

首先,只需要提供一份简单的参数配置文件即可解决掉小程序Canvas遇到的一些大大小小的坑有严苛的测试环节,解决各种环境和各种机型遇到的问题,并提供稳定的线上版本长期维护,并有专人更新迭代更新颖的功能

解决问题

以上的要求当然是可以的,曾经的我也想尝试开发一款出来,但是后来尝试了几款现成的工具之后就放弃了,毕竟轮子这个东西,是需要不断维护更新的,另外已经有这么多优秀现成的插件了,我为何还要费力去写呢,贡献代码岂不更美哉,以下是我收集的几款

那可不可以开发一款生成海报的插件库呢?

小程序生成图片库,轻松通过 json
方式绘制一张可以发到朋友圈的图片Painter小程序组件-小程序海报组件wxa-plugin-canvas微信小程序:一个
json 帮你完成分享朋友圈图片mp_canvas_drawer我想干什么

首先,只需要提供一份简单的参数配置文件即可解决掉小程序Canvas遇到的一些大大小小的坑有严苛的测试环节,解决各种环境和各种机型遇到的问题,并提供稳定的线上版本长期维护,并有专人更新迭代更新颖的功能隆重介绍

唠了这么多,好像提供给大家插件就没我什么事情了…想走是不可能的
为了能够制作出更酷炫的海报,我思考了许久
虽然有了插件后,只需要提供配置代码就能够制作出一款海报来,但是我发现还是有些许问题

Painter 的优势

制作海报效率还是不够高,微调一个元素的大小和位置,就需要不断的修改保存代码,等待片刻,查看效果,真的烦一个小小的位置调整可能就需要来回调整无数次,这种最简单的机械化劳动,这辈子是不可能的拿着完美的稿子,递给设计师看,这个位置不对,这个线太粗,这个颜色太重…你信不信我打死你对于一些精美复杂的海报,实现起来真的不太现实

功能全,支持文本、图片、矩形、qrcode 类型的 view
绘制布局全,支持多种布局方式,如
align(对齐方式)、rotate(旋转)支持渐变色,阴影,配置简单,容易上手,兼容性好支持圆角,其中图片,矩形,和整个画布支持
borderRadius 来设置圆角杠杠的性能优化,我们对网络素材图片加载实现了一套
LRU 存储机制,不用重复下载素材图片。杠杠的容错,因为某些特殊情况会导致
Canvas
绘图不完整。我们对此加入了对结果图片进行检测机制,如果绘图出错会进行重绘。How
To Use运行例子

那我需要怎么做呢,请点击这个链接体验painter-custom-poster点击左侧例子展示中的任意一个例子,然后导入代码就能看到效果图,这下你应该能猜到了我的想法了

git clone-Mobile/Painter.git

如何实现刚开始我想用简单的html和css加拖动功能实现,通过简单尝试之后就放弃了,因为这个功能真的太复杂了,简单的工具肯定是不行的中间这个计划停滞了很长时间,一度已经放弃直到发现了这个库fabric.js,真的太太优秀了,赞美之词无以言表,唯一的缺点就是中文教程太少,必须生啃英文加谷歌翻译fabric介绍,你可以很容易地创建任何一个简单的形状,复杂的形状,图像;将它们添加到画布中,并以任何你想要的方式进行修改:位置、尺寸、角度、颜色、笔画、不透明度等How
To Use

代码下载后,用小程序 IDE 打开后即可使用。

js9905com金沙网站 ,目前工具一共分成4部分

注:请选择小程序项目,非小游戏,例子中无
appid,所以无法在手机上运行,如果需要真机调试,请在打开例子时,填上自己的小程序
id

例子展示

具体详细使用教程 GitHub地址-Mobile/Painter

用来将一些用户设计的精美海报显示出来,通过点击对应的例子并将代码导入画布中

扩展工具

画布区

由于编写配置再加上调试还是有些麻烦,故制作一款可视化编辑工具,直接拖动编辑元素即可生成海报可视化编辑拖拽直接生成painter代码

显示真实的海报效果,画布里添加的元素,都可以直接用鼠标进行拖动,旋转,缩放操作

工具体验地址-custom-poster/工具使用文档

操作区

第一排四个按钮

复制代码
将画布的展示效果转化成小程序海报插件库所需要的json配置代码,目前我使用的是Painter库,默认会转化成这个插件的配置代码,将代码直接复制到card.js即可查看代码
这个功能用不用无所谓,可以直观的看到生成的代码导出json
将画布转化成fabric所需要的json代码,方便将自己设计的海报代码保存下来导入json
将第3步导出的json代码导入,会在画布上显示已设计的海报样式

第二排五个按钮

画布 画布的属性参数 详解见下方文字 添加文字的属性参数 详解见下方矩形
添加矩形的属性参数 详解见下方图片 添加图片的属性参数 详解见下方二维码
添加二维码的属性参数 详解见下方

第三排

各种元素的详细设置参数

激活区

激活对象是指鼠标点击画布上的元素,该对象会被蓝色的边框覆盖,此时该对象被激活,可以执行拖动
旋转 缩放等操作
激活区只有对象被激活才会出来,用来设置激活对象的各种配置参数,修改value值后,实时更新当前激活对象的对应状态,点击其他区域,此模块将隐藏

快捷键’←’ 左移一像素’→’ 右移一像素’↑’ 上移一像素’↓’ 下移一像素’ctrl + z’
撤销’ctrl + y’ 恢复’delete’ 删除'[‘ 提高元素的层级’]’
降低元素的层级布局属性通用布局属性

属性

说明

默认

rotate旋转,按照顺时针旋转的度数0width、heightview
的宽度和高度top、left如 css 中为 absolute
布局时的作用0background背景颜色rgba(0,0,0,0)borderRadius边框圆角0borderWidth边框宽0borderColor边框颜色#000000shadow阴影”shadow

可以同时修饰 image、rect、text 等 。在修饰 text 时则相当于
text-shadow;修饰 image 和 rect 时相当于 box-shadow