2

我在http://bugs.dojotoolkit.org/ticket/10794找到了一个解决方案，但它仅适用于 dojo 1.4

对于 dojo 版本 1.7，没有 dojox.gfx.tooltip。请...

4

1 回答 1

2

这是一个古老的问题，但在搜索了高低之后我从未找到答案，所以这就是我为使工具提示显示在 gfx 形状上而制定的。当 HTML5 Canvas 是渲染器时，这专门用于解决此问题，但应该与其他渲染器一起使用。这是在 Dojo 和 Dojox 1.8 中完成的；其他版本没试过。

主要技巧是使用 dijit.Tooltip 的静态 show() 和 hide() 方法，为它们提供构建工具提示的信息，而不是制作 dijit.Tooltip 实例。（dijit.Tooltip 实例仅在鼠标悬停时显示特定的 DOM 元素，如果您使用的是画布渲染器，这将不起作用。）使用静态方法可以将渲染的 Tooltip 放置在任何您想要的位置以响应所需的事件。您的主要任务是计算 Tooltip 应该出现的位置，并确保将事件绑定到 hide() Tooltip。

您可能希望存储您自己的自定义对象，其中包含需要传递给 show() 的必要信息；如果您有很多工具提示，这可以使您的工具提示管理更容易。

Tooltip.show() 需要以下内容：

  • x、y、宽度 (w) 和高度 (h) 以创建一个矩形区域，工具提示将出现在该区域（“周围”对象）。
  • 一个字符串，用于定义渲染工具提示相对于“around”中定义的矩形的位置。有关可能的值，请参阅 Tooltip API。
  • 工具提示的内容。

实现此功能时需要牢记以下几点：

  • 在撰写本文时，形状使用 dojo/connect，而不是dojo/on。
  • 当你想用 hide() 隐藏它时，传递给 show() 的“around”对象引用用于标识工具提示，而不是它包含的值，因此你不能只使用具有相同值的新对象来隐藏工具提示；您需要在调用 show() 时使用实际参考。（因此拥有您自己的自定义“工具提示”信息对象以便于访问。）
  • “周围”坐标是绝对值，而不是表面元素或表面容器元素值，但您的形状坐标将是表面值。如果这是您的目标，您需要计算绝对值以显示相对于您的形状的工具提示。

关于方法：

对于您想要工具提示的每个形状或组，附加一个与您希望显示工具提示的时间相对应的事件；例如。mouseenter，单击，一些按键事件。这个事件应该调用静态方法Tooltip.show，并绑定相应的事件，在那个时候用Tooltip.hide关闭Tooltip。我也喜欢在 hide() 事件触发后立即断开它；在 dojo/on 你会做 on.once （但据我所知，你还不能将 dojo/on 用于 gfx 形状）。

var shape1Bb = shape1.getTransformedBoundingBox();

var shape1Tooltip = {
    content: "<p>I am a black and gray rectangle.</p>",
    around: {
        x: shape1Bb[1].x+myCanvasContainer.offsetLeft,
        y: shape1Bb[1].y-(Math.round((shape1Bb[1].y - shape1Bb[2].y)/2))+myCanvasContainer.offsetTop,
        w: 1,
        h: 1
    },
    position: ["after-centered","before-centered"]
};

shape1.connect("onmouseenter",function(e){
    Tooltip.show(
        shape1Tooltip.content,
        shape1Tooltip.around,
        shape1Tooltip.position
    );
    var mouseOutHandler = shape1.connect("onmouseout",function(e){
        Tooltip.hide(shape1Tooltip.around);
        dojo.disconnect(mouseOutHandler);
    });
});

jsfiddle：http: //jsfiddle.net/XQyy2/

于 2013-04-02T18:52:49.153 回答