Barcode Ar Annotation

Defined under the namespace Scandit.Datacapture.Barcode.Ar.Ui

BarcodeArAnnotationAnchor

Added in version 7.3.0

The anchor of the annotation.

Top

Added in version 7.3.0

The annotation is anchored to the top.

Bottom

Added in version 7.3.0

The annotation is anchored to the bottom.

Left

Added in version 7.3.0

The annotation is anchored to the left.

Right

Added in version 7.3.0

The annotation is anchored to the right.

BarcodeArAnnotationTrigger

Added in version 7.1.0

The conditions that trigger an annotation to be displayed.

HighlightTap

Added in version 7.1.0

The annotation is shown when the user taps on the highlight.

HighlightTapAndBarcodeScan

Added in version 7.1.0

The annotation is shown immediately when the barcode is scanned, and can be hidden and shown again by tapping on the highlight.

BarcodeArAnnotation

interface BarcodeArAnnotation : ScanditHTMLElement

Added in version 7.1.0

Common interface for Barcode Ar annotations. Annotations are used to display additional information and/or trigger actions. They are displayed outside of the area of a barcode, and attach to the scanned barcode. They are available in different types and have configurable styles. Currently, three types of highlights are supported: BarcodeArInfoAnnotation, BarcodeArPopoverAnnotation and BarcodeArStatusIconAnnotation.

annotationTrigger

annotationTrigger: BarcodeArAnnotationTrigger

Added in version 7.1.0

The trigger that causes the annotation to be presented.

updatePosition(point, transformOrigin, rotationAngle)

updatePosition(point: Point,
        transformOrigin: Point,
        rotationAngle: number): void

Added in version 7.3.0

Update the position of the element with the given point, transform origin based on the anchor if any. RotationAngle is the angle of the barcode.

Example of updating the position of the annotation:

updatePosition(point, transformOrigin, rotationAngle) {
  this.style.transform = `translate3d(calc(${Math.round(point.x)}px + ${transformOrigin.x}%), calc(${Math.round(
    point.y
  )}px + ${transformOrigin.y}%), 0px) rotate(${rotationAngle}deg)`;
}