Можно ли добавить всплывающие подсказки к изображению, нарисованному на холсте HTML5? - PullRequest
Новая
       24

Можно ли добавить всплывающие подсказки к изображению, нарисованному на холсте HTML5?

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

Я хотел бы нарисовать линию или гистограмму, используя холст HTML5.

Я хотел бы

  • получить данные из внешнего источника (или жестко закодировать их)в целях тестирования)

  • нарисуйте график

  • Наведите указатель мыши на узел / панель и на экране появится всплывающая подсказка с номером / соответствующими данными.

Итак, мой вопрос, можно ли применять всплывающие подсказки к отдельным изображениям / строкам / чему-либо на холсте?(Я знаю, что у самого холста может быть своя всплывающая подсказка)

Одно из решений, которое, я уверен, сработает, состоит в том, чтобы просто сделать каждый узел отдельным холстом со своей собственной подсказкой и изображением, но это звучит немного чрезмерно.

И в идеале я хотел бы использовать jquery.ui.tooltip, но на самом деле я просто хочу знать, сработает ли что-нибудь. 

    var imageObj = new Image();
    $(imageObj).attr("title","kitten");
    $(imageObj).tooltip();

    imageObj.onload = function(){
    context.drawImage(imageObj, destX, destY, destWidth, destHeight);
    };
    imageObj.src = "BW-kitten.jpg";

Я получил схему от здесь и добавил, что, как я думал, могло бы сработать.

Котенок рисует правильно, нет ошибок консоли и всего этого хорошего.

1 Ответ

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

HTML5 (из-за отсутствия лучшего слова) фигуры нарисованы на холсте и технически не существуют.Существует несколько плагинов, которые используют пользовательские обработчики для управления точным расположением этих фигур и добавления функциональности, аналогичной функциональности обычных элементов DOM.

Я использую KineticJS с моими проектами HTML5поскольку это следует за простотой регулярных форм, и учитывает сложные формы простым способом. Вот пример KineticJS , который добавляет всплывающие подсказки к их формам.

Вы можете использовать Kinetic.Image из документации , чтобы легко добавить изображение на сцену и следоватьранее связанный пример того, как добавить всплывающую подсказку к фигуре.

...