更新记录

1.0.0（2025-11-06） 下载此版本

1、init

平台兼容性

uni-app(4.84)

uni-app x(4.84)

API 文档

主要类

Placard

画布主类，用于管理整个画布操作

• 构造函数参数：
  • canvas: HTML Canvas 元素
  • canvasWidth: 画布宽度
  • canvasHeight: 画布高度
  • backgroundColor: 背景颜色

方法

• getRenderReact(): 获取渲染区域
• loadControl(controls): 加载控制组件
• addNode(node): 添加节点
• renderDraw(): 重新渲染画布
• reorderZIndexNode(node, type): 调整节点层级
• resetNodeList(nodeList): 重置节点列表
• historyTask.undo(): 撤销操作
• historyTask.redo(): 重做操作

ImageNode

图像节点类，表示一个图像元素

静态方法

• createImageData(url): 从URL创建图像数据

构造函数参数

• data: 图像数据
• width: 图像宽度
• height: 图像高度
• url: 图像URL
• scale: 缩放比例
• base64: Base64编码的图像数据

方法

• [copy()](): 复制图像节点

ImageNodeBox

图像节点容器类，包装 ImageNode 并提供布局功能

构造函数参数

• imageNode: ImageNode 实例
• renderReact: 渲染区域

方法

• setMode(mode, options): 设置显示模式
• drawCache(): 绘制缓存
• getType(): 获取节点类型
• flip(direction): 翻转图像 ('x' 或 'y')

TextNode

文本节点类，表示一个文本元素

构造函数参数

• [text](): 文本内容
• fontSize: 字体大小
• color: 文本颜色

TextNodeBox

文本节点容器类，包装 TextNode 并提供布局功能

构造函数参数

• textNode: TextNode 实例
• renderReact: 渲染区域

方法

• drawCache(): 绘制缓存
• getType(): 获取节点类型
• getLocation(): 获取位置
• setLocation(location): 设置位置
• updateAttribute(key, value): 更新属性
• getAttribute(key): 获取属性值
• [changeDirection(direction)](): 改变文本方向

控制组件

ScaleControl

缩放控制器

• 构造函数参数：renderReact

RotateControl

旋转控制器

• 构造函数参数：renderReact

PlacardTools

工具类集合

方法

• imageToBase64(imagePath): 将图像转换为Base64编码

事件处理

canvasEvent

画布事件处理器，可通过 placard.canvasEvent 访问

方法

• down(event): 鼠标按下事件
• move(event): 鼠标移动事件
• up(event): 鼠标抬起事件
• getSelectNode(): 获取当前选中节点
• setSelectNode(node): 设置选中节点

使用示例

// 创建画布实例
const placard = new Placard({
  canvas: canvasElement,
  canvasWidth: 400,
  canvasHeight: 500,
  backgroundColor: "#000000"
});

// 添加图像
const imageNode = new ImageNode({...});
const imageNodeBox = new ImageNodeBox(imageNode, placard.getRenderReact());
placard.addNode(imageNodeBox);

// 添加文本
const textNode = new TextNode({...});
const textNodeBox = new TextNodeBox(textNode, placard.getRenderReact());
placard.addNode(textNodeBox);