Tagger UI API
Tagger UI Overview
Options
Name | Description | Values | Default |
|---|---|---|---|
styles | Specific class names used to achieve the look and feel of the different states of the Tagger UI |
| styles: {
remove: "fl-image-editor-annotation-action-remove"
} |
lineWidth | The width of line of tag box | 1, 2, 3, ... | lineWidth: 1 |
strokeStyle | The style for borders of tags | strokeStyle: 'white' | |
fillStyle | The style for area inside the tags | fillStyle: 'rgba(255,255,255,0.4)' | |
blurColor | The color to be used for blurring the area outside the bounding box while tagging | blurColor: 'rgba(255,255,255,0.4)' |
Supported Events
The Tagger UI fires the following events (for more information about events in the Fluid Framework, see Events for Component Users):
Event | Type | Description | Parameters | Parameters Description |
|---|---|---|---|---|
onChangeWidth | default | This event is fired whenever the width of bounding box changes. | newWidth | newWidth: the new width of the bounding box |
onChangeHeight | default | This event is fired whenever the height of bounding box changes. | newHeight | newHeight: the new height of the bounding box |
onChangeLocationX | default | This event is fired whenever the x location of bounding box changes. | newLocationX | newLocationX: the new x locationof the bounding box |
onChangeLocationY | default | This event is fired whenever the y location of bounding box changes. | newLocationY | newLocationY: the new y location of the bounding box |
onAnnotationNbChange | default | This event is fired whenever the number of annotations changes. | newNbAnnotations, oldNbAnnotations | newNbAnnotations: new number of annotations |
OnAnnotationAdd | default | This event is fired whenever an annotation is added. | tag | tag: the text of the new annotation. |
onAnnotationRemove | default | This event is fired whenever an annotation is removed. | index | index: the index of the removed annotation. |
Annotation Subcomponent
This sub-component stores the complete model for the bounding box for the Tagger UI component. The following properties are available with the object:
x : number, // x coordinate of the bounding box
y : number, // y coordinate of the bounding box
w : number, // width of the bounding box
h : number, // height of the bounding box
tag: string, //the text associated with the annotation
Methods
Method | Description | Parameters |
|---|---|---|
init(canvas, resizeFactor, image, imageX, imageY) | Begins the tagging and associates itself with the canvas element. | canvas: The canvas object with which the Tagger UI should associate. |
reset () | Completely resets the tagger UI component. Removes all the annotations. | none |
activateKeyboardAccessibility() | Activate the keyboard accessibility of Tagger. | none |
deactivateKeyboardAccessibility() | Deactivate the keyboard accessibility of Tagger. | none |
confirmTagAdd(tagText) | Adds the current tag into the list. | tagText: The text to be associated with the tag. |
deleteTag(index) | Deletes the tag at given index. | index: The index of the tag to be deleted. |
doneTagging() | Indicate the completion of a tagging session. Doesn't affect the given tags. Just performs cleanup and redraws the background. If you want to reset the tagger component and delete all the existing tags, use reset instead. | none |
showAnnotations() | Show all the annotations. Also associate the mouse handlers for annotations. | none |
hideAnnotations() | Hides all the annotations and unbinds the mouse handlers. | none |
highlightTag(index) | Highlight the annotation/tag at given index | index: The index of the tag to be highlighted. |
removeHighlights() | Removes all existing highlights | none |
getNbAnnotations() | Returns the number of annotations. | none |
getTagList() | Returns the complete list of all the tags. | none |
adjustTagsForResize(newW, newH, resizeFactor, image, imageX, imageY) | Function that automatically adjusts tags when the image has been resized. It automatically reduces/increases the size of the tags to reflect the new size. | newW: new width of the image |
adjustTagsForCrop(newW, newH, resizeFactor, image, imageX, imageY, croppingDimensions) | Function that automatically adjusts tags when the image has been cropped. It automatically discards all the tags that were outside the cropping dimensions. | newW: new width of the image |
setLocationX(newLocationX) | Sets the x location of the crop bounding box. | newLocationX: The new x location of bounding box. |
setLocationY(newLocationY) | Sets the y location of the crop bounding box. | newLocationY: The new y location of bounding box. |
setWidth(newWidth) | Sets the width of the crop bounding box. | newWidth: The new width of the bounding box. |
setHeight(newHeight) | Sets the height of the crop bounding box. | newHeight: The new height of the bounding box. |