The plug-in is attached to the plug-in mechanism of white-web-sdk, and encapsulates Bessel pencil drawing as a whiteboard custom invisible plug-in type. All status synchronization is synchronized by the attributes of the plug-in to realize status synchronization between users.
In the example folder, the plug-in is imported as a dependency. You can use the access method in the example folder to access the whiteboard.
A whiteboard pencil drawing plugin based on SpriteJS as a rendering engine.
- This plug-in is mainly implemented based on the Path class of SpriteJS. The function of drawing Bezier curve is realized through the Path class, and the transition animation of laser pointer is realized through the transition.
- The plugin uses the dual worker+offscreenCanvas mechanism to process the drawing calculation + rendering logic in an independent worker thread. Achieved high performance optimization.
npm install @hqer/bezier-pencil-plugin
import { WhiteWebSdk, DeviceType} from "white-web-sdk";
import { BezierPencilPlugin, BezierPencilDisplayer, ECanvasContextType } from "@hqer/bezier-pencil-plugin";
import '@hqer/bezier-pencil-plugin/dist/style.css'
const whiteWebSdk = new WhiteWebSdk({
...
useMobXState: true,
}
const room = await whiteWebSdk.joinRoom({
...
isWritable: true,
invisiblePlugins: [BezierPencilPlugin],
wrappedComponents: [BezierPencilDisplayer]
})
const plugin = await BezierPencilPlugin.getInstance(room,
{// Get plug-in instance, there should be only one plug-in instance globally, which must be called after joinRoom
logger: {// Custom logs, optional. If not, use the console api
info: console.log,
error: console.error,
warn: console.warn,
},
options: {
syncOpt: {
/**Synchronization interval duration,ms, recommended for low performance terminals, not less than 500ms**/
interval: 500,
},
canvasOpt: {
/**Plugin supported rendering engine**/
contextType: ECanvasContextType.Canvas2d
}
}
}
);
For example, room.setMemberState({currentApplianceName: ApplianceNames.pencil, useNewPencil:true})
will activate the new pencil drawing tool. It will also be possible to modify the opacity by using the strokeType, strokeOpacity, strokeColor, useLaserPen
and other attributes.
The specific effects are as follows:
Turn on Pen Tip effect:
room.setMemberState({currentApplianceName: ApplianceNames.pencil, useNewPencil:true, strokeType: EStrokeType.Stroke, strokeOpacity:1} as any);
Turn on Laser pointer effect:
room.setMemberState({currentApplianceName: ApplianceNames.pencil, useLaserPen: true, strokeType: EStrokeType.Normal} as any);
const plugin = await BezierPencilPlugin.getInstance(room,...)
Specific effects are as follows
Empty the canvas:
plugin.cleanCurrentScene();
Save notes as pictures:
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
const { width, height, ... camera } = room.state.cameraState;
canvas.width = width;
canvas.height = height;
f (context) {
await plugin.screenshotToCanvasAsync(context,
room.state.sceneState.scenePath,
width, height, camera, window.devicePixelRatio);
canvas.toBlob(this.blobCallback("download"), "image/png");
}
Undo/Restore
// Cancel
plugin.undo();
// Restore
plugin.redo();
// Listen for the onCanUndoStepsUpdate event
plugin.callbacks.on("onCanUndoStepsUpdate", (step: number): void => {
console.log('onCanUndoStepsUpdate', step)
});
// Listen for the onCanRedoStepsUpdate event
plugin.callbacks.on("onCanRedoStepsUpdate", (step: number): void => {
console.log('onCanRedoStepsUpdate', step)
});