有没有一种简单的方法可以在dojox.gfx的形状上添加工具提示

Question

我在http://bugs.dojotoolkit.org/ticket/10794，但它只适用于dojo 1.4

对于dojo版本1.7，没有dojox.gfx.tooltip.Plz…

Answer 1

这是一个老问题，但经过反复搜索，我一直没有找到答案，所以下面是我为使工具提示显示在gfx形状上所做的工作。当HTML5 Canvas是渲染器时，这是专门用来解决这个问题的，但应该与其他渲染器一起使用。这是在Dojo和Dojox1.8中完成的；还没有在其他版本中尝试过。

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

您可能想要存储自己的自定义对象，其中包含要交给show（）的必要信息；如果你有很多工具提示，这可以让工具提示的管理变得更容易。

Tooltip.show（）需要以下内容：

• x、 y、宽度（w）和高度（h）组成一个矩形区域，工具提示将显示在该区域（"环绕"对象）
• 一个字符串，用于定义渲染工具提示相对于"around"中定义的矩形的位置。有关可能的值，请参阅工具提示API
• 工具提示的内容

在实现此功能时，需要记住以下几点：

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

关于方法：

对于要使用工具提示的每个形状或组，附加一个与要显示工具提示的时间相对应的事件；例如，鼠标输入、点击、某个按键事件。此事件应调用静态方法Tooltip.show，并绑定相应的事件以关闭Tooltip.hide。我还喜欢在hide（）事件启动时立即断开连接；在dojo/on中，您可以使用on.once（但据我所知，您还不能将dojo/oon用于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);
    });
});

Js文件：http://jsfiddle.net/XQyy2/