Konvajs -不同的工具提示背景(有条件)

// 自定义工具提示类
function CustomTooltip(layer, options) {
  this.layer = layer;
  this.options = options;
  this.tooltipContainer = document.createElement('div');
  this.tooltipContainer.style.position = 'absolute';
  this.tooltipContainer.style.display = 'none';
  this.tooltipContainer.style.backgroundColor = 'white'; // 默认背景颜色
  this.tooltipContainer.style.border = '1px solid black';
  this.tooltipContainer.style.padding = '5px';
  this.tooltipContainer.style.zIndex = 999;
  document.body.appendChild(this.tooltipContainer);
}

// 更新工具提示内容和位置
CustomTooltip.prototype.update = function (x, y, content, backgroundColor) {
  this.tooltipContainer.innerHTML = content;
  this.tooltipContainer.style.left = x + 'px';
  this.tooltipContainer.style.top = y + 'px';
  // 根据条件设置背景颜色
  if (backgroundColor) {
    this.tooltipContainer.style.backgroundColor = backgroundColor;
  }
};

// 初始化自定义工具提示
const customTooltip = new CustomTooltip(layer, {});

// 在场景上添加鼠标移动事件监听器
layer.on('mousemove', function (e) {
  const node = e.target;
  if (node) {
    let content = 'My Tooltip Content';
    let backgroundColor = 'white';

    // 根据需要自定义条件
    if (node.getClassName() === 'circle') {
      backgroundColor = 'lightblue'; // 圆形的背景颜色
    } else if (node.getClassName() === 'rect') {
      backgroundColor = 'lightgreen'; // 矩形的背景颜色
    }

    // 更新工具提示
    customTooltip.update(e.evt.pageX, e.evt.pageY, content, backgroundColor);
  } else {
    customTooltip.tooltipContainer.style.display = 'none';
  }
});

// 在场景上添加鼠标离开事件监听器
layer.on('mouseleave', function () {
  customTooltip.tooltipContainer.style.display = 'none';
});