MarkinJS Interactive Examples

const annotator = MarkinJS.createImageAnnotator('my-image');

// Simple bounding box
annotator.createAnnotation({
    class: "person",
    bbox: [100, 100, 300, 400]
});

// Face with keypoints
annotator.createAnnotation({
    class: "face",
    bbox: [100, 80, 200, 180],
    keypoints: [
        { name: "left_eye", point: [130, 110] },
        { name: "right_eye", point: [170, 110] },
        { name: "nose", point: [150, 130] }
    ]
});

// Elements that move together
annotator.createAnnotation({
    class: "person",
    bbox: [150, 100, 300, 250],
    keypoints: [{ name: "head", point: [225, 130] }],
    bindElements: true,
    containRules: ["keypoint"]
});

// Listen for interactions
annotator.on('select', (data) => {
    console.log('Selected:', data.type);
});

annotator.on('elementmoved', (data) => {
    console.log('Moved:', data.deltaX, data.deltaY);
});