自定义教具与样式

适用于 Whiteboard HarmonyOS SDK 0.2.11，内嵌 Appliance Plugin 1.1.45。

通过 MemberState 设置当前用户的教具与绘图样式，通过 WhiteboardOptions.appliancePluginOptions.extras 配置本地插件。先按教具插件介绍开启插件；组件创建前设置选项，入房成功后调用 WhiteboardController。

Selector 与内置属性栏

TypeScript

import { Appliance } from '@shengwang/whiteboard';

// 创建 Whiteboard 组件前配置。
options.floatBar = true;
// 入房成功后切换选择工具。
controller.setAppliance(Appliance.SELECTOR);

内置 Selector 提供选中、移动和缩放交互。单独选中一张未锁定、支持旋转的图片时，可使用左下角旋转手柄。属性栏在本端显示，元素属性修改通过房间同步。

Extras 配置

通过公开的 AppliancePluginExtrasOptions 配置文字编辑器与光标：

TypeScript

import { AppliancePluginExtrasOptions } from '@shengwang/whiteboard';

const extras: AppliancePluginExtrasOptions = {
  textEditor: {
    showFloatBar: true,
    canSelectorSwitch: true,
    rightBoundBreak: true
  },
  cursor: { enable: true, expirationTime: 3000 }
};
options.appliancePluginOptions = { extras: extras };

showFloatBar 控制文字编辑属性栏，canSelectorSwitch 控制文字编辑时能否切换选择工具，rightBoundBreak 控制右边界换行。光标配置中的 enable 控制是否显示，expirationTime 为过期时间，单位毫秒。

已有其他 extras 配置时，将字段合并到同一个配置对象，避免后续赋值覆盖之前的设置。

Pencil 与 Shape

TypeScript

import { Appliance, MemberState } from '@shengwang/whiteboard';

const pencil: MemberState = {
  currentApplianceName: Appliance.PENCIL,
  strokeColor: [32, 102, 255],
  strokeWidth: 4
};
controller.setMemberState(pencil);

strokeColor 使用 RGB 三元组，strokeWidth 设置线条粗细。

TypeScript

import { Appliance, MemberState, ShapeType } from '@shengwang/whiteboard';

const triangle: MemberState = {
  currentApplianceName: Appliance.SHAPE,
  shapeType: ShapeType.TRIANGLE,
  strokeColor: [32, 102, 255],
  strokeWidth: 3
};
controller.setMemberState(triangle);

ShapeType 提供 TRIANGLE/RHOMBUS/PENTAGRAM/SPEECH_BALLOON，分别对应三角形、菱形、五角星和气泡框。

教具状态字段

字段	用途
currentApplianceName	当前教具
shapeType	图形类型
strokeColor、strokeWidth	线条 RGB 颜色与粗细
textColor、textSize	文字 RGB 颜色与字号

将状态传给 controller.setMemberState(...)。未设置的可选字段不会作为新值提交，业务切换工具时显式恢复需要重置的样式。

应用可使用 ArkUI 编写自己的教具按钮与样式面板，调用上述 Native 方法；复制、删除、撤销和重做分别使用 controller.copy()、controller.deleteOperation()、controller.undo() 和 controller.redo()。

单笔图形识别的业务扩展模型及开启/关闭示例见Auto Shape。完整签名见客户端 API。