Есть ли простой подход, чтобы добавить всплывающую подсказку на форму dojox.gfx - PullRequest
Новая
       55

Есть ли простой подход, чтобы добавить всплывающую подсказку на форму dojox.gfx

2 голосов
/ 30 марта 2012

Я нашел решение в http://bugs.dojotoolkit.org/ticket/10794,, но это было только для додзё 1.4

для dojo версии 1.7, dojox.gfx.tooltip отсутствует. Plz ...

1 Ответ

2 голосов
/ 02 апреля 2013

Это старый вопрос, но после поиска по верхнему и нижнему уровням я так и не нашел ответа, поэтому вот что я разработал, чтобы всплывающие подсказки отображались на фигурах 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), чтобы создать прямоугольную область, где появится всплывающая подсказка (объект «вокруг»).
  • Строка, определяющая положение отображаемой всплывающей подсказки относительно прямоугольника, определенного в «вокруг». См. Всплывающую подсказку API для возможных значений.
  • Содержание вашей подсказки.

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

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

На метод:

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

...