Chart.js如何为pointStyle设置的图片添加彩色圆角边框样式

直接给pointStyle传入原生Image对象时，Chart.js只会原样绘制图片内容，不会自动生效borderColor、borderRadius这类边框属性，可通过以下两种方案实现需求：

方案1：预合成带边框的图片（零插件依赖，实现简单） #

提前通过离屏Canvas将彩色圆角边框和目标图片合成为一张新图片，再将合成后的图片传入pointStyle即可。

// 自定义边框参数
const BORDER_WIDTH = 4;
const BORDER_COLOR = 'rgb(255, 99, 132)';
const BORDER_RADIUS = 8;
const IMG_SIZE = 30;
const totalSize = IMG_SIZE + BORDER_WIDTH * 2;

// 生成带边框的合成点位图
function createPointImage(imgSrc) {
  return new Promise(resolve => {
    const tempImg = new Image(IMG_SIZE, IMG_SIZE);
    tempImg.crossOrigin = 'anonymous';
    tempImg.onload = () => {
      const offscreenCanvas = document.createElement('canvas');
      offscreenCanvas.width = totalSize;
      offscreenCanvas.height = totalSize;
      const ctx = offscreenCanvas.getContext('2d');

      // 绘制外层彩色圆角边框
      ctx.fillStyle = BORDER_COLOR;
      ctx.beginPath();
      ctx.roundRect(0, 0, totalSize, totalSize, BORDER_RADIUS + BORDER_WIDTH / 2);
      ctx.fill();

      // 裁剪绘制内部圆角图片
      ctx.save();
      ctx.beginPath();
      ctx.roundRect(BORDER_WIDTH, BORDER_WIDTH, IMG_SIZE, IMG_SIZE, BORDER_RADIUS);
      ctx.clip();
      ctx.drawImage(tempImg, BORDER_WIDTH, BORDER_WIDTH, IMG_SIZE, IMG_SIZE);
      ctx.restore();

      const finalPointImg = new Image(totalSize, totalSize);
      finalPointImg.src = offscreenCanvas.toDataURL();
      resolve(finalPointImg);
    };
    tempImg.src = imgSrc;
  });
}

// 初始化图表
async function initChart() {
  const pointImg = await createPointImage('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcStkCgp2U1hHVVtWcf_SD4tVyLqA49lhgygEed0PPPKOZxcevudk3NZ1trGyhpAAMIJysc&usqp=CAU');
  const data = {
    datasets: [{
      label: 'First Dataset',
      data: [{ x: 20, y: 30, r: 15 }], // bubble图表需配置r属性控制点尺寸
      pointStyle: pointImg,
      pointRadius: 0 // 隐藏默认点位，避免与图片重叠
    }]
  };

  const config = {
    type: 'bubble',
    data: data,
    options: {}
  };
  new Chart(document.getElementById('myChart'), config);
}
initChart();

• 优点：实现逻辑简单，无额外依赖，兼容所有Chart.js版本
• 缺点：边框样式固定，若不同点位需要不同边框样式，需逐个生成对应合成图

方案2：自定义插件绘制边框（灵活度最高，支持动态样式） #

通过Chart.js的插件机制，在点位绘制完成后，通过Canvas API手动在每个图片点位外层绘制自定义边框，支持按数据点单独配置样式。

// 注册点位边框绘制插件
const pointBorderPlugin = {
  id: 'pointCustomBorder',
  afterDatasetsDraw(chart) {
    const { ctx } = chart;
    chart.data.datasets.forEach(dataset => {
      const meta = chart.getDatasetMeta(chart.data.datasets.indexOf(dataset));
      if (typeof dataset.pointStyle !== 'object') return;

      meta.data.forEach(point => {
        const { x, y } = point;
        const pointImg = dataset.pointStyle;
        const halfW = pointImg.width / 2;
        const halfH = pointImg.height / 2;
        // 支持从数据集配置读取边框参数，也可按单数据点配置
        const borderWidth = dataset.pointBorderWidth || 4;
        const borderColor = dataset.pointBorderColor || 'rgb(255, 99, 132)';
        const borderRadius = dataset.pointBorderRadius || 8;

        ctx.save();
        ctx.fillStyle = borderColor;
        ctx.beginPath();
        // 绘制外层圆角矩形，若需要圆形边框替换为arc()方法即可
        ctx.roundRect(
          x - halfW - borderWidth,
          y - halfH - borderWidth,
          pointImg.width + borderWidth * 2,
          pointImg.height + borderWidth * 2,
          borderRadius
        );
        ctx.fill();
        ctx.restore();
      });
    });
  }
};

// 初始化图表
const pointImg = new Image(30, 30);
pointImg.src = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcStkCgp2U1hHVVtWcf_SD4tVyLqA49lhgygEed0PPPKOZxcevudk3NZ1trGyhpAAMIJysc&usqp=CAU';
const data = {
  datasets: [{
    label: 'First Dataset',
    data: [{ x: 20, y: 30, r: 15 }],
    pointStyle: pointImg,
    pointRadius: 0,
    // 可直接在数据集配置边框样式
    pointBorderWidth: 4,
    pointBorderColor: 'rgb(255, 99, 132)',
    pointBorderRadius: 10
  }]
};

const config = {
  type: 'bubble',
  data: data,
  options: {},
  plugins: [pointBorderPlugin] // 加载自定义插件
};
pointImg.onload = () => {
  new Chart(document.getElementById('myChart'), config);
};

• 优点：支持动态配置边框颜色、宽度、圆角，可实现不同点位不同边框效果，无需预生成图片
• 缺点：需要编写少量Canvas绘制逻辑，需注意绘制层级避免边框覆盖图片内容

提示：如果需要用圆形、星形等其他形状包裹图片，只需要把插件中绘制roundRect的逻辑替换为对应形状的Canvas绘制代码即可。

内容的提问来源于stack exchange，提问作者Nick G