Question

我实际上正在寻找一个适用于画布的工具提示插件，这意味着工具提示会被创建并调用＆＃34; mouseover＆＃34;在kineticJS中的事件。我找到了很多，但没有一个对我有用，因为大多数都是基于HTML标签的，而我只是在body标签中调用容器div。

有人可以指导我吗？有没有解决方案，除了使用KineticJS自己创建工具提示？

Answer 1

您可以使用KineticJS这样的内容（DEMO）：

function showTooltip() {
  var x = line.points()[0] / 2 + line.points()[2] / 2 + line.x();
  var y = line.points()[1] / 2 + line.points()[3] / 2 + line.y();
  tooltip = new Kinetic.Label({
        x: x,
        y: y,
        opacity: 0.75
      });

      tooltip.add(new Kinetic.Tag({
        fill: 'green',
        pointerDirection: 'down',
        pointerWidth: 10,
        pointerHeight: 10,
        lineJoin: 'round',
        shadowColor: 'black',
        shadowBlur: 3,
        shadowOffset: {x:2,y:2},
        shadowOpacity: 0.1
      }));

      tooltip.add(new Kinetic.Text({
        text: 'Tooltip pointing down',
        fontFamily: 'Calibri',
        fontSize: 18,
        padding: 5,
        fill: 'white'
      }));
  layer.add(tooltip);
  layer.draw();
}
layer.add(line);
line.on('mouseenter', function() {
  showTooltip();
});
line.on('mouseleave', function() {
  tooltip.destroy();
  layer.draw();
});

HTML5画布的工具提示插件

1 个答案: