小程序开发小程序要做

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

2019-09-25  本文已影响0人  志军_39e2

开门见山

工具地址 点我直达>>painter-custom-poster

由于挂载在github page上，打开速度会慢一些，请耐心等待或自行解决git网速问题

背景

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

分析

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

解决

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

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

我想干什么

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

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

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

如何实现

How To Use

目前工具一共分成4部分

例子展示

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

画布区

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

操作区

第一排四个按钮

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

第二排五个按钮

  1. 画布 画布的属性参数 详解见下方
  2. 文字 添加文字的属性参数 详解见下方
  3. 矩形 添加矩形的属性参数 详解见下方
  4. 图片 添加图片的属性参数 详解见下方
  5. 二维码 添加二维码的属性参数 详解见下方

第三排

各种元素的详细设置参数

激活区

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

快捷键

布局属性

通用布局属性

属性 说明 默认
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

备注:

图片属性

属性 说明 默认
url 图片路径
mode 图片裁剪、缩放的模式 aspectFill

mode参数详解

Tips（一定要看哦～）

海报贡献

如果你设计的海报很好看，并且愿意开源贡献，可以贡献你的海报代码和缩略图，例子代码文件在example中，按顺序排列，例如现在库里例子是example2.js，那你添加example3.js和example3.jpg图片，事例可以参考一下文件夹中源码，然后在index.js中导出一下

导出代码

代码不要格式化，会报错，请原模原样复制到json字段里

生成缩略图

  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

~
创作不易，如果对你有帮助，请给个星星 star✨✨ 谢谢
~

上一篇下一篇

猜你喜欢

热点阅读