Есть ли простой подход, чтобы добавить всплывающую подсказку на форму 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 и Dojox 1.8; не пробовал это в других версиях.

Основной трюк состоит в том, чтобы использовать статические методы show() и hide() dijit.Tooltip, предоставляя им информацию для создания всплывающей подсказки, вместо создания экземпляров dijit.Tooltip. (Экземпляры dijit.Tooltip отображаются только в ответ на наложение определенных элементов DOM, что не сработает, если вы используете рендерер canvas.) Использование статических методов позволяет расположить отображаемую подсказку в любом месте в ответ на желаемый событие. Ваша основная задача - рассчитать, где должна появиться всплывающая подсказка, и убедиться, что события привязаны, чтобы скрыть () всплывающую подсказку.

Вы можете захотеть хранить свои собственные объекты, содержащие необходимую информацию для показа (); это может упростить управление вашими подсказками, если их много.

Tooltip.show() необходимо следующее:

• x, y, width (w) и height (h), чтобы создать прямоугольную область, где появится всплывающая подсказка (объект "вокруг").
• Строка, определяющая положение отображаемой всплывающей подсказки относительно прямоугольника, определенного в "вокруг". См. Tooltip API для возможных значений.
• Содержание вашей подсказки.

При реализации этого необходимо учитывать несколько моментов:

• На момент написания этой статьи фигуры используют dojo/connect, а не dojo/on.
• Ссылка "вокруг" на объект, которую вы передаете в show(), используется для идентификации всплывающей подсказки, когда вы хотите скрыть ее с помощью hide(), а не значений, которые она содержит, поэтому вы не можете просто использовать новый объект с такими же значениями, чтобы скрыть подсказка; вам нужно иметь фактическую ссылку, используемую при вызове show(). (Отсюда наличие собственных пользовательских информационных объектов "всплывающей подсказки" для быстрого доступа.)
• Координаты "вокруг" представлены в абсолютных значениях, а не в значениях элемента поверхности или элемента контейнера поверхности, но координаты вашей фигуры будут в значениях поверхности. Вам нужно вычислить абсолютные значения для отображения всплывающей подсказки относительно вашей фигуры, если это ваша цель.

По методу:

Для каждой фигуры или группы, для которой вы хотите всплывающую подсказку, прикрепите событие, соответствующее тому, когда вы хотите, чтобы подсказка была показана; например. mouseenter, click, какое-нибудь событие нажатия клавиши. Это событие должно вызывать статический метод Tooltip.show и связывать соответствующее событие, чтобы закрыть Tooltip.hide в это время. Мне также нравится отключать событие 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/