Focal point image

This component allows users to interact with an image by setting a focal point and viewing the result. It provides an editing mode to adjust the focal point's position and a preview mode to reflect the changes visually.

Props

focal-point?: FluxFocalPointObject
The focal point.

alt?: string
Alt text of the image.

src: string
Source of the image.

Examples

Editor

Preview

Code

<template>
    <FluxPane>
        <FluxPaneBody>
            <FluxFocalPointImage
                :focal-point="{ x: 75, y: 50 }"
                src="/assets/demo/image-2.jpg"/>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxFocalPointImage, FluxPane, FluxPaneBody } from '@flux-ui/components';
</script>