小程序海报生成神器之一Painter

Kujiale-Mobile/Painter 是一个用于生成小程序海报的工具，主要通过 JSON 配置方式来实现图片的绘制和分享。

Painter 的优势

• 功能全，支持文本、图片、矩形、qrcode 类型的 view 绘制

• 布局全，支持多种布局方式，如 align（对齐方式）、rotate（旋转）

• 支持圆角，其中图片，矩形，和整个画布支持 borderRadius 来设置圆角

• 支持边框，同时支持 solid、dashed、dotted 三种类型

• 支持渐变色，包括线性渐变与径向渐变。

• 支持 box-shadow 和 text-shadow，统一使用 shadow 表示。

• 支持文字背景、获取宽度、主动换行

• 支持自定义字体

• 支持图片 mode

• 支持元素的相对定位方法

• 杠杠的性能优化，我们对网络素材图片加载实现了一套 LRU 存储机制，不用重复下载素材图片。

• 杠杠的容错，因为某些特殊情况会导致 Canvas 绘图不完整。我们对此加入了对结果图片进行检测机制，如果绘图出错会进行重绘。

• 生成的图片支持分辨率调节

• 支持使用拖动等操作动态编辑绘制内容

以下是关于如何使用 Kujiale-Mobile/Painter 的详细步骤：

引入插件：

• 首先需要从 GitHub 上克隆项目代码：

git clone https://github.com/Kujiale-Mobile/Painter.git

• 在你的微信小程序项目中引入 painter 插件。可以在 pages.json  文件中添加以下配置：

{
    "using components": [
        "Kujiale-Mobile/Painter"
    ]
}

• 也可以在页面的 JavaScript 文件中直接引入 painter 插件。

配置画布：

• 使用 JSON 文件来配置画布的内容。你可以定义文本、图片、二维码等多种元素，并设置它们的位置、大小等属性。

• 例如，创建一个包含文本和图片的海报：

{
       "version": "1.0",
       "x": 0,
       "y": 0,
       "width": 500,
       "height": 800,
       "children": [
         {
           "type": "text",
           "x": 100,
           "y": 100,
           "content": "欢迎来到我的小程序",
           "font-size": 32,
           "color": "#333"
         },
         {
           "type": "image",
           "x": 200,
           "y": 200,
           "src": "path/to/your/image.jpg "
         }
       ]
     }

生成海报：

• 将上述 JSON 配置文件保存为 .json 文件，并在小程序中调用 painter 插件生成海报。

• 你可以在页面的 JavaScript 文件中调用 painter 方法，将 JSON 配置传递给它，生成最终的海报图片。