小程序海报生成工具，可视化编辑直接生成代码使用

背景

在做小程序时候，我们经常会有一个需求，需要将小程序分享到朋友圈，但是朋友圈是不允许直接分享小程序，那我们还有其他的办法解决吗?答案肯定是有的，即 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 + ←' 左移激活对象一像素
'ctrl + →' 右移激活对象一像素
'ctrl + ↑' 上移激活对象一像素
'ctrl + ↓' 下移激活对象一像素
'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（一定要看哦～）

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字段里

广州VI设计公司https://www.houdianzi.com

生成缩略图

刚开始我想在此工具中直接生成图片，但是由于浏览器图片跨域问题导致报错失败
所以请去小程序中生成保存图片，图片质量设置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支持
[ ] 缩放位置弹跳问题优化
[ ] 假如需求大的话，支持其他几款插件库代码的生成

posted @ 2020-11-23 17:06 浅笑· 阅读(598) 评论(0) 编辑收藏举报

刷新页面返回顶部

浅笑·