跳到主要内容

图像

图像可以在画布上的特定位置渲染。该组件提供了比原始画布图像绘制更好的生活质量改进，包括锚定位和自动纵横比处理。

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 属性确定图像的哪个点对应于指定的位置：

// 左上角锚点（默认）
const tlImage = new InteractiveImage({
  src: '/image.png',
  position: [100, 100],
  anchor: 'tl', // 左上角
});

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

// 右下角锚点
const brImage = new InteractiveImage({
  src: '/image.png',
  position: [400, 200],
  anchor: 'br', // 右下角
});

可用的锚点值：

  • 'tl' - 左上角
  • 'tr' - 右上角
  • 'bl' - 左下角
  • 'br' - 右下角
  • 'center' - 中心

尺寸调整​

图像可以显式调整大小或按比例缩放：

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

// 保持宽高比
const proportionalWidth = new InteractiveImage({
  src: '/image.png',
  position: [100, 100],
  width: 200,
  preserveAspectRatio: true,
});

属性​

名称类型默认值描述
srcstring-图像源 URL
positionVector2[0, 0]图像位置 [x, y]
widthnumber-图像宽度
heightnumber-图像高度
anchorAnchor'tl'位置锚点
opacitynumber1图像不透明度 (0-1)
preserveAspectRatiobooleanfalse保持宽高比