zan-poster v1.0.67

概述

通过json直接在canvas上绘制图像, 基于 cax 画图框架开发, 改进优化自 json2canvas

🦖 小程序组件

小程序使用npm安装第三方包，详见 npm 支持

项目配置

zan-poster安装后大小41kb, 如果小程序主包超出2M，可采用分包异步化方案

1. npm i zan-poster
2. 微信开发者工具 -> 工具 -> 构建npm
3. app.json配置中引入Component

{
  "usingComponents": {
    "zan-poster": "/miniprogram_npm/zan-poster/index"
  }
}

组件使用

方式一: props和事件

<zan-poster painting="{{painting}}" bind:change="onChange" />

Page({
  data: {
    painting: {}
  },
  ready() {
    // 设置画图数据
    this.setData({
      painting: {}
    })
  },
  methods: {
    onChange(array) {
      // 接收画图数据
      console.log(array)
      // [{ tempFilePath: 'xxx', errMsg: 'drawer:ok' }]
    }
  }
})

属性

事件

方式二: 模板引用

组件对外提供draw回调方法画图

<zan-poster id="myPoster" />

Page({
  data: {
    // Object | Array
    painting: {}
  },
  ready() {
    const poster = this.selectComponent('#myPoster')

    // 1: 回调
    poster.draw({
      // 设置画图数据
      painting: this.data.painting,
      success(array) {
        // 接收画图数据
        console.log(array)
        // [{ tempFilePath: 'xxx', errMsg: 'drawer:ok' }]
      },
      fail() {}
    })

    // 2: 回调 (异步画图)
    poster.draw({
      // 设置画图数据
      painting: this.data.painting,
      // 异步画图设置
      sync: false,
      success(array) {
        // 接收单次绘制完成全量数据 (未绘制的图像值为空白base64格式图)
        // 如果是多图绘制，则回调函数会被执行多次，将每一次最新数据返回
        console.log(array)
        // [{ tempFilePath: 'xxx', errMsg: 'drawer:ok' }]
      },
      fail() {}
    })

    // 3: promise
    poster.draw({
      // 设置画图数据
      painting: this.data.painting
    }).then((array) => {
      // 接收画图数据
      console.log(array)
      // [{ tempFilePath: 'xxx', errMsg: 'drawer:ok' }]
    }).catch(console.log)
  }
})

🐮 web组件

web端组件采用浏览器原生web component开发，顾使用者浏览器需支持web component特性 (移动端完全支持)

通过npm或CDN引用

NPM

npm i zan-poster

CDN

• https://cdn.jsdelivr.net/npm/zan-poster/dist/zan-component/zan-component.esm.js
• https://unpkg.com/zan-poster@latest/dist/zan-component/zan-component.esm.js

使用

vue2

main.js中引入及配置

import Vue from 'vue'
import 'zan-poster/dist/zan-component/zan-component.esm'

Vue.config.ignoredElements = [/^zan-/]

vue3

main.js中引入及配置

import Vue from 'vue'
import 'zan-poster/dist/zan-component/zan-component.esm'

const app = Vue.createApp({ /* ... */ })
app.config.isCustomElement = tag => tag.startsWith('zan-')

web

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/zan-poster/dist/zan-component/zan-component.esm.js"
></script>

页面或模板中使用

组件props，参考小程序组件说明，web端尽量使用draw回调方法画图

<zan-poster></zan-poster>

// 画图数据
const painting = {}

async function createPoster() {
  await customElements.whenDefined('zan-poster')
  const ZanPoster = document.querySelector('zan-poster')

  ZanPoster.draw({
    painting
  }).then((array) => {
    // 接收画图数据
    console.log(array)
    // [{ tempFilePath: 'xxx', errMsg: 'drawer:ok' }]
  })
}
createPoster()

🦉 画图数据类型及属性参照表

Canvas（画布）

容器 (container)

实现一列或多列排版，画板高度将根据容器高度自动改变；且容器children一级子元素只接受type=group类型，否则无效

Group（组）

Text（文本）

Image（图片）

Circle（圆）

Rect（矩形）

🦨 画图数据示例

系统字体参考: https://segmentfault.com/a/1190000011827800

{
  "width": 750,
  "height": 1370,
  "fillStyle": "#FFFFFF",
  "children": [
    {
      "type": "group",
      "width": 600,
      "height": 460,
      "x": 0,
      "y": 0,
      "children": [
        {
          "type": "text",
          "text": "内容",
          "maxWidth": 580,
          "lineHeight": 40,
          "textAlign": "right",
          "font": "30px BlinkMacSystemFont",
          "color": "#333333",
          "height": "auto",
          "uiHeight": 200,
          "x": 30,
          "y": 30
        },
        {
          "type": "image",
          "width": 100,
          "height": 200,
          "x": 30,
          "y": 260,
          "url": "https://image.jbzyun.cn/9538/2024/material/image/0ed8ce48e3b24ab5a18f4e36ea69af00.png",
          "isCircular": true,
          "r": 10
        }
      ]
    }
  ]
}

😇 说明

此版本只提供画图能力, 交互及动画都已去除

• 升级小程序canvas API
• 图片、字体预加载
• 增加自定义字体
• 自适应高度
• 横竖平铺排版
• 容器内单列、多列排版
• 修复了图片容器若干问题
• 集成阿里和七牛裁图能力
• 文字划线(支持多行)
• 容器垂直排版
• 图片默认webp格式