How to customize viewer
Altough DDV has provided the default ViewerConfig for each type of viewer, developer can also customize it as needed.
ViewerConfig contains two parts of configuration, one is the configuration on the viewer style and the other is the configuration on the viewer properties.
Viewer Style
Customize styles while creating a viewer
Take the edit viewer as example, according to the structure EditViewerConfig
, there are three styles which can be configured, canvasStyle
, pageStyle
and quadSelectionStyle
.
Use case
Customize pageStyle
while creating an edit viewer.
- Step one: Create a
BaseStyle
object which meets the page style you want.const newPageStyle = { border: "2px dashed red", background: "grey", };
- Step two: Create the customized viewer config.
const newViewerConfig = { pageStyle: newPageStyle, };
- Step three: Configure the customized viewer config while creating the edit viewer.
const editViewer = new Dynamsoft.DDV.EditViewer({ container: "viewer", viewerConfig: newViewerConfig, });
Please notice that only the customized style will be modified, and the remaining styles will remain in their default state.
Update styles dynamically
Besides customize the initial viewer style, DDV also allows update the styles dynamically after the viewer is created by using getStyle()
& updateStyle()
.
Use case
Update the CanvasStyle
after the edit viewer is created.
const editViewer = new Dynamsoft.DDV.EditViewer({
container: "viewer",
});
const newCanvasStyle = editViewer.getStyle("canvasStyle");
newCanvasStyle.border = "2px dashed green";
newCanvasStyle.background = "white";
newCanvasStyle.cursor = "pointer";
editViewer.updateStyle("canvasStyle", newCanvasStyle);
Viewer properties
Some properties can also customized, for example, the values of minZoom
and maxZoom
can be customized for a edit viewer.
Use case
Customize the minZoom
and maxZoom
while creating an edit viewer.
const newViewerConfig = {
minZoom: 0.1, // Set the minimum zoom value to 10%
maxZoom: 32, // Set the maximum zoom value to 3200%
};
const editViewer = new Dynamsoft.DDV.EditViewer({
container: "viewer",
viewerConfig: newViewerConfig,
});
Please notice that only the customized properties will be modified, and the remaining properties will remain in their default state.