❤
npm
Sign UpSign In

zan-poster
TypeScript icon, indicating that this package has built-in type declarations

1.0.57 • Public • Published

概述

通过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' }]
    }
  }
})

属性

名称 类型 默认值 必填 说明
painting Object、Array {} 是 画图数据, 以数组的形式传入多组画图数据实现多张海报绘制 (回调方式绘制与此一致)
showCanvas Boolean false 否 是否显示画板
preload Boolean false 否 图片、字体预加载(注意：预加载完成后，开始启动画图需设置为false，否则画图将不会启动)
showLoading Boolean true 否 是否显示画图loading进度状态，且无法穿透(H5不支持)
sync Boolean true 否 是否同步画图; false时为异步, 支持success回调函数和change事件接收单次绘制完成全量数据 (未绘制的图像值为空白base64格式图, promise风格只能接收全部绘制完成数据)

事件

名称 类型 必填 返回类型 说明
change Function 否 [{tempFilePath: string, errMsg: string}] 完成画图触发事件

方式二: 模板引用

组件对外提供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

使用

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（画布）

属性 类型 默认值 必填 说明
width Number 是 画布宽度
height Number 是 画布高度
x Number 0 否 相对于画布左侧的距离
y Number 0 否 相对于画布顶部的距离
fillStyle String 否 背景色，十六进制，例："#ffffff"
url String 否 背景图，支持本地和网络图片，注意https
children Array 否 子元素数组
fonts Array 否 字体列表, [{family: string, source: string }] family字体名(需要和使用中指定名称一致), source字体路径

容器 (container)

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

属性 类型 默认值 必填 说明
type String container 是 类型
width Number {canvas.width} 否 宽度，默认画布宽度
height Number、String 'auto' 否 高度，默认auto, 如果设置了值，高度则固定不变
x Number 0 否 相对于父元素左侧的距离
y Number 0 否 相对于父元素顶部的距离
children Array 否 子元素数组 (一级子元素只接受type=group类型，且高度必填)

Group（组）

属性 类型 默认值 必填 说明
type String group 是 绘制类型
width Number 是 宽度
height Number 是 高度
x Number 0 否 相对于父元素左侧的距离
y Number 0 否 相对于父元素顶部的距离
fillStyle String 否 背景色，支持十六进制和RGB，例："#ffffff",rgba(0,0,0,1)
url String 否 背景图，支持本地和网络图片，注意https
children Array 否 子元素数组
display String 否 row、column、justify 设置平铺方式; justify将移除第一个元素(排除内容为空元素)x坐标值
align String 否 left、center、right 对齐方式，需设置display=row 且 width != 0

Text（文本）

属性 类型 默认值 / 示例 必填 说明
type String text 是 绘制类型
height Number 是 如果文本为动态内容可设置为'auto'
uiHeight Number 否 如果是动态内容，可设置文本区域最大高度
x Number 0 否 相对于父元素左侧的距离
y Number 0 否 相对于父元素顶部的距离
text String 是 文本内容
font String '10px sans-serif' 否 字体及大小，例：'24px 微软雅黑'
color String 'black' 否 字体颜色
textAlign String 'left' 否 'left'，'center'，'right'
baseline String 'top' 否 'bottom'，'alphabetic'，'ideographic'，'top'，'hanging'
orientation String ‘horizontal’ 否 文字方向,‘horizontal’ 或 ‘vertical’
maxWidth Number 否 最大宽度(设置后会自动换行,需要和lineHeight配合使用)
lineHeight Number 否 行高
maxLine Number 否 最大行数,超出则显示...
shadow Object {color,offsetY,offsetYblur} 否 阴影
linearGradient Object [x1,y1,x2,y2] 否 渐变点起始坐标，同canvas createLinearGradient，超过4个值将改变为radialGradient
colors Array [[0,'#CCC'],[0.2,'#AAA'],[1,'#AAA']] 否 填充颜色，同canvas addColorStop
pin Boolean 否 固定位置(如果你有元素放在了动态文本的下方,又不希望这个元素位置被更新,可以设置该属性为true)
filter String 否 css滤镜
lineDecoration String 否 'top', 'middle', 'bottom'; 划线显示位置，为空则不显示 (支持多行)
lineColor String 跟随字体颜色 否 颜色
lineSize Number 2 否 线条粗细
lineOffsetTop Number 0 否 线条上下偏移量(正往下，负往上)
lineOffsetLeft Number 0 否 线条左右偏移量(正往右，负往左)
lineLevel String 'top' 否 'top', 'bottom' 线条置于文字顶或底层

Image（图片）

属性 类型 默认值 / 示例 必填 说明
type String image 是 绘制类型
width Number 是 宽度
height Number、String 是 高度、auto(设置'auto'时，maxHeight必填，实现高度自动，暂时仅支持第一级元素)
x Number 0 否 相对于父元素左侧的距离
y Number 0 否 相对于父元素顶部的距离
isCircular Boolean false 否 圆，以短边为直径
maxHeight Number 实际最大高度 否 实际可接受图片的最大高度(注意: IOS下最大高度4096/2px)
isCenter Boolean false 否 以短边为准，居中
filter String 否 css滤镜

Circle（圆）

属性 类型 默认值 / 示例 必填 说明
type String circle 是 绘制类型
width Number 是 宽度
height Number 是 高度
x Number 0 否 相对于父元素左侧的距离
y Number 0 否 相对于父元素顶部的距离
r Number 20 否 半径
strokeStyle Number 否 边框颜色，例：'#FFFFFF'
rt,rb,lt,lb Boolean true 分别控制四个角是否圆角，上,右下,左上,左下
strokeStyle String 否 边框颜色，例：'#FFFFFF'
lineWidth String 1 否 边框宽度
fillStyle String 否 填充颜色，例：#FFFFFF
linearGradient String 否 渐变点起始坐标 [x1,y1,x2,y2]，同createLinearGradient
colors String 否 填充颜色，例： [[0,'#CCC'],[0.2,'#AAA'],[1,'#AAA']]，同 addColorStop
filter String 否 css滤镜

Rect（矩形）

属性 类型 默认值 / 示例 必填 说明
type String rect 是 绘制类型
width Number 是 宽度
height Number 是 高度
x Number 0 否 相对于父元素左侧的距离
y Number 0 否 相对于父元素顶部的距离
r Number 20 否 半径
strokeStyle Number 否 边框颜色，例：'#FFFFFF'
rt,rb,lt,lb Boolean true 分别控制四个角是否圆角，右上,右下,左上,左下
strokeStyle String 否 边框颜色，例：'#FFFFFF'
lineWidth String 1 否 边框宽度
fillStyle String 否 填充颜色，例：#FFFFFF
linearGradient String 否 渐变点起始坐标 [x1,y1,x2,y2]，同createLinearGradient，例：[0,0,100,0]由左向右渐变，[0,0,0,100]由上向下渐变
colors Array 否 填充颜色，也可理解为颜色节点，例：[[0,'#CCC'],[0.2,'#AAA'],[1,'#AAA']]，同 addColorStop
filter String 否 css滤镜

🦨 画图数据示例

系统字体参考: 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格式

Readme

Keywords

Package Sidebar

Install

npm i zan-poster

Repository

github.com/wvlvik/zan-poster

Homepage

github.com/wvlvik/zan-poster#readme

Weekly Downloads

133

Version

1.0.57

License

MIT

Unpacked Size

1.85 MB

Total Files

68

Last publish

Collaborators

  • wvlvik
Try on RunKit
Report malware