在WebSDK中多个注释需要组合，可以参考以下示例代码
1. 通过监听事件获取当前是否有多个选中的注释
//全局变量记录选中的注释
var annotsActive = [];
//添加监听判断选中的注释
pdfui.eventEmitter.on(PDFViewCtrl.constants.ViewerEvents.activeAnnotation, (annotRender) => {
console.log('activeAnnotation',annotRender)
const isExist = annotsActive.some(item => item.id === annotRender.annot.id);
if (isExist) {
return;
}
var annotJson = {
type: annotRender.annot.getType(),
rect:annotRender.annot.getRect(),
borderStyle: {
width: annotRender.annot.getBorderWidth(), // 边框宽度
style: annotRender.annot.getBorderStyle(), // 边框样式
color: annotRender.annot.getBorderColor() // 边框颜色
},
};
annotsActive.push({ id: annotRender.annot.id, annotJson: annotJson,pageindex: annotRender.annot.page.getIndex() ,annot:annotRender.annot});
})
//添加监听判断取消选中的注释
pdfui.eventEmitter.on(PDFViewCtrl.constants.ViewerEvents.unActiveAnnotation, (annotRender) => {
console.log('unActiveAnnotation',annotRender)
const index = annotsActive.findIndex(item => item.id === annotRender.annot.id);
if (index!== -1) {
annotsActive.splice(index, 1);
}
});
//多选监听事件
pdfui.eventEmitter.on(PDFViewCtrl.constants.ViewerEvents.activeMultipleAnnotations, (annotRenders) => {
console.log('activeMultipleAnnotations',annotRenders)
annotRenders.forEach(annotRender => {
if (!annotsActive.some(item => item.id === annotRender.annot.id)) {
// 若结构不同，需转换为 annotsActive 所需的类型（此处假设结构兼容）
var annotJson = {
type: annotRender.annot.getType(),
rect:annotRender.annot.getRect(),
borderStyle: {
width: annotRender.annot.getBorderWidth(), // 边框宽度
style: annotRender.annot.getBorderStyle(), // 边框样式
color: annotRender.annot.getBorderColor() // 边框颜色
},
};
annotsActive.push({ id: annotRender.annot.id, annotJson: annotJson ,pageindex: annotRender.annot.page.getIndex(),annot:annotRender.annot});
}
});
})
2. 组合注释代码
async function 组合注释(){
if(annotsActive.length === 0){
return;
}
var pdfviewer = await pdfui.getPDFViewer();
var pdfdoc = await pdfviewer.getCurrentPDFDoc();
var page = await pdfdoc.getPageByIndex(annotsActive[0].pageindex);
//要是page不一样，提示当前选中的组合不在一个页面，重新选择？
if(annotsActive.some(item => item.pageindex !== annotsActive[0].pageindex)){
alert('当前选中的组合不在一个页面，重新选择？');
return;
}
const allAnnots = annotsActive.map(item => item.annotJson);
await page.addAnnotGroup(allAnnots,1)
const allAnnotsId = annotsActive.map(item => item.id);
for (const id of allAnnotsId) {
// 等待当前标注删除完成后，再处理下一个
await page.removeAnnotByObjectNumber(id);
}
}
3. 取消组合注释代码
async function 取消注释(){
if(annotsActive.length != 1 || annotsActive[0].annot.groupElements.length === 0){
return;
}
var pdfviewer = await pdfui.getPDFViewer();
var pdfdoc = await pdfviewer.getCurrentPDFDoc();
var page = await pdfdoc.getPageByIndex(annotsActive[0].pageindex);
//根据annotsActive[0].annot.groupElements删除里面具体的内容
for(const item of annotsActive[0].annot.groupElements)
{
var annotJson = {
type: item.getType(),
rect: item.getRect(),
borderStyle: {
width: item.getBorderWidth(), // 边框宽度
style: item.getBorderStyle(), // 边框样式
color: item.getBorderColor() // 边框颜色
},
};
await page.addAnnot(annotJson);
}
await page.removeAnnotByObjectNumber(annotsActive[0].id)
}
