Skip to content

小程序、H5分享海报绘制,丰富的海报内容排版,提供参考样例及模板数据 (无需开发,直接集成到项目中使用) 或 使用设计器自定义模板

Notifications You must be signed in to change notification settings

wvlvik/zan-poster

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

概述

满足各种海报绘制需求,推荐小程序海报分享等场景使用

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

海报模板开发

设计器可自行根据设计稿进行模板开发,请查阅下方文档 画图数据类型及属性参照表

# 安装依赖
pnpm i

# playground
pnpm dev

样例

docs/目录中,style{number}.md的文件, 后期将持续更新新画图特性的样例

image.png

🦖 小程序组件

小程序使用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格式

About

小程序、H5分享海报绘制,丰富的海报内容排版,提供参考样例及模板数据 (无需开发,直接集成到项目中使用) 或 使用设计器自定义模板

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages