分组注释在任何使用注释和标记的应用程序中都是一个必要的功能。事实上，文档图像处理包LEADTOOLS HTML5 SDK 提供了开箱即用的分组注释功能。但是部分开发人员，希望通过编程方式来创建和编辑分组注释，本文将介绍如何通过编程方式利用LEADTOOLS HTML5 SDK 创建注释，并将其分组。

// Get the container and create some annotations
var container = _automation.get_container();
var rectObj = new lt.Annotations.Core.AnnRectangleObject();
var rectObj2 = new lt.Annotations.Core.AnnRectangleObject();
var rectObj3 = new lt.Annotations.Core.AnnRectangleObject();
rectObj.set_rect(lt.LeadRectD.create(3 * inch, 3 * inch, 1 * inch, 1 * inch));
rectObj2.set_rect(lt.LeadRectD.create(4 * inch, 4 * inch, 3 * inch, 3 * inch));
rectObj3.set_rect(lt.LeadRectD.create(8 * inch, 8 * inch, 3 * inch, 3 * inch));

// Set some properties on the annotations
with(lt.Annotations.Core)
{
rectObj.set_stroke(AnnStroke.create(AnnSolidColorBrush.create("blue"), lt.LeadLengthD.create(1)));
rectObj2.set_stroke(AnnStroke.create(AnnSolidColorBrush.create("red"), lt.LeadLengthD.create(1)));
rectObj3.set_stroke(AnnStroke.create(AnnSolidColorBrush.create("green"), lt.LeadLengthD.create(1)));
rectObj.set_fill(AnnSolidColorBrush.create("yellow"));
rectObj2.set_fill(AnnSolidColorBrush.create("blue"));
rectObj3.set_fill(AnnSolidColorBrush.create("red"));
}

// Add annotations to container
container.get_children().add(rectObj);
container.get_children().add(rectObj2);
container.get_children().add(rectObj3);

// Assign annotations to groups
rectObj.set_groupName("Group1");
rectObj2.set_groupName("Group1");
rectObj3.set_groupName("Group2");

此外，下列代码展示了如何通过编程方式利用LEADTOOLS HTML5 SDK 编辑分组注释：

// Get the container and all its objects
var container = _automation.get_container();
var MyObjects = _automation.get_container().get_children();

// Loop through its objects and modify each object based on whether it is part of the group you are editing
for (var i = 0; i < MyObjects.get_count(); i++)
{
var child = MyObjects.get_item(i);
var groupName = child.get_groupName();

// hide Group1 and show Group2
if(groupName.localeCompare("Group1") == 0)
child.set_isVisible(false);
else
child.set_isVisible(true);
}