ce-zrender-render

一个cemeta zrender商品图渲染库

安装

pnpm i ce-zrender-render

快速开始

// 导包
import CeZrenderRender from 'ce-zrender-render'
//实例化
const ceZrenderRender = new CeZrenderRender(HTMLElement, currentRenderCanvasConfig, {...options})

// 点击画布内容此函数会被执行
 ceZrenderRender.pubSub.subscribe("group", (group, params) => {
       // ...
    });

API

参数说明

HTMLElement

| 属性 | 说明 | 类型 | 默认值 | | ---- | ---- | ---- | ---- | | HTMLElement | div标签 | HTMLDivElement | - |

currentRenderCanvasConfig

| 属性 | 说明 | 类型 | 默认值 | | ---- | ---- | ---- | ---- | | currentRenderCanvasConfig | 模版参数类型 | (IRelativeConfig｜IFixedConfig ) | - |

• ⚠️ 这俩个类型来自ce-zrender-render/dist/zrenderOptions包下

  import { IRelativeConfig,IFixedConfig } from 'ce-zrender-render/dist/zrenderOptions';

options

| 属性 | 说明 | 类型 | 默认值 | | ---- | ---- | ---- | ---- | | globalStandardLineStatus | 是否显示引导线 | boolean | true | | globalMousewheelStatus | 是否允许画布内容通过滚动鼠标进行缩放 | boolean | true | | globalZStatus | 点击画布内容是否增加z层级 | boolean | false | | renderPosition | 渲染画布内容方式: "fixed" 绝对定位 x,y从画布(0,0)点计算 "relative" 相对定位 x,y从画布组(0,0)点计算 | (fixed ｜ relative) | relative | | canvasWidth | 画布宽度，默认获取当前节点 clientWidth | number | dom.clientWidth| | canvasHeight | 画布高度，默认获取当前节点 clientHeight | number | dom.clientHeight| | fileWidth | 文件实际宽度，用来和canvasWidth计算X轴的比例，默认获取当前节点 clientWidth | number | dom.clientWidth| | fileHeight | 文件实际高度，用来和canvasWidth计算X轴的比例，默认获取当前节点 clientHeight | number | dom.clientHeight|

事件

| 属性 | 说明 | 类型 | | ---- | ---- | ---- | | updateBackgroundGroup | 更新背景图 | updateBackgroundGroup(styleProps?: zrender.ImageStyleProps): void; | | pubSub.subscribe | 点击画布内容此函数会被执行 | subscribe(type: 'group', cb: (group: Group, params: IModuleProps) => void): void | | updateStandardLineGlobalStatus | 是否显示引导线 | updateStandardLineGlobalStatus(ignoreStatus: boolean): void; | | updateModule | 更新模块,例如（fontSize:20） | updateModule(module: zrender.Group, name: string, k: string, v: string ｜ number): void; | | updateMousewheelStatus | 修改是否允许画布内容通过滚动鼠标进行缩放 | updateMousewheelStatus(mousewheelStatus: boolean): void; | | save | 生成图片 | save(type: TSaveType): void; | | redo | 重制画布 | redo(): void; |