分組注釋在任何使用注釋和標記的應用程序中都是一個必要的功能。事實上，文檔圖像處理包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);
}