Images

Images can be rendered at specific locations on the canvas. The component provides quality-of-life improvements over raw canvas image drawing, including anchor positioning and automatic aspect ratio handling.

import { InteractiveImage } from '@wangyaoshen/locus-interaction';

const image = new InteractiveImage({
  src: '/path/to/image.png',
  position: [100, 100],
  width: 200,
  height: 150,
  anchor: 'center',
});

Anchor Positions

The anchor property determines which point of the image corresponds to the specified position:

// Top-left anchor (default)
const tlImage = new InteractiveImage({
  src: '/image.png',
  position: [100, 100],
  anchor: 'tl', // top-left
});

// Center anchor
const centerImage = new InteractiveImage({
  src: '/image.png',
  position: [250, 150],
  anchor: 'center',
});

// Bottom-right anchor
const brImage = new InteractiveImage({
  src: '/image.png',
  position: [400, 200],
  anchor: 'br', // bottom-right
});

Available anchor values:

• 'tl' - top-left
• 'tr' - top-right
• 'bl' - bottom-left
• 'br' - bottom-right
• 'center' - center

Sizing

Images can be sized explicitly or scaled proportionally:

// Explicit dimensions
const explicitSize = new InteractiveImage({
  src: '/image.png',
  position: [100, 100],
  width: 200,
  height: 100,
});

// Maintain aspect ratio with width
const proportionalWidth = new InteractiveImage({
  src: '/image.png',
  position: [100, 100],
  width: 200,
  preserveAspectRatio: true,
});

Props

Name	Type	Default	Description
src	string	-	Image source URL
position	Vector2	[0, 0]	Image position [x, y]
width	number	-	Image width
height	number	-	Image height
anchor	Anchor	'tl'	Position anchor point
opacity	number	1	Image opacity (0-1)
preserveAspectRatio	boolean	false	Maintain aspect ratio