У меня есть приложение для холста HTML5, рисующее некоторые фигуры (с использованием KineticJS в данный момент). Я хочу показать всплывающее меню всякий раз, когда пользователь нависает над фигурой.Всплывающее меню для холста HTML5
Меню должно выглядеть достаточно похожим на обычное контекстное меню правой кнопки мыши, но я бы предпочел, чтобы у него были некоторые возможности форматирования текста (например, некоторые элементы меню являются другим цветом или полужирным шрифтом), и у него нет для щелчка правой кнопкой мыши (просто появляется, когда зависание в порядке).
Каждая из фигур может иметь различное количество элементов во всплывающем меню (при этом меню имеют гибкую высоту), и каждый элемент может быть другой длины текста (при этом имеет разную ширину). Элементы, которые можно индивидуально кликать, являются дополнительными.
Хотя я уверен, что могу приложить некоторые усилия с помощью таких функций (вычисление метрик шрифтов для всех текстов, рисование прямоугольников и текстов для представления каждого элемента и т. Д.), Что, похоже, заново изобретает колесо, Я хотел бы использовать некоторую существующую библиотеку для этого (или, по крайней мере, помочь с макетом).
На данный момент, я посмотрел на:
Некоторые надлежащего родной KineticJS способ сделать это (или, по крайней мере, с помощью макета) - не нашел до сих пор, насколько я вижу, Мне пришлось бы вычислять шрифты, размеры макета, а затем вручную устанавливать все координаты для прямоугольников текста и форматирования.
ZebKit - но я не уверен, что ZebKit и KineticJS будут хорошо играть вместе на одном холсте HTML5.
html2canvas - для визуализации меню как фрагмента HTML для изображения, а затем визуализации его обратно на холст; но он, похоже, не работает со скрытыми/внеэкранными фрагментами HTML.
Другие структуры HTML5, например, EaselJs, Paper.js - никто, казалось, не может предложить такие функциональные
htmlcanvas - заброшенный 4 года назад
rasterizeHTML - выглядел очень многообещающим, но не работает прямо под Chrome для меня.
Перемещение от холста HTML5 и просто очень привлекательный рисунок CSS, используя вместо этого что-то вроде JsGraphics, а затем вместо этого используйте что-то вроде jQuery UI или любых подходящих HTML-фреймворков для этого. Это серьезно ограничило бы другие функции моего приложения, просто для облегчения меню.
Сформировать динамический SVG, визуализации с использованием canvg - все равно придется рассчитать вручную макеты для SVG, и это не кажется правильным инструментом для работы
GWT + LibGDX + TWL - кажется очень сложные и довольно излишество
Похожий (хотя и более общий характер, как он сосредоточен на абстрактном HTML, но в моем случае ничего структурированным, что заканчивает тем, что в качестве всплывающего меню будет делать) SO вопрос эти один:
Я пропускаю некоторые относительно легко стандартное решение для этого?
Edit - rasterizeHTML все еще кажется несколько многообещающим, но я получаю:
Uncaught SecurityError: An attempt was made to break through the security policy of the user agent. [VM] kinetic-v4.7.2.js (521):7621
Kinetic.Util.addMethods.getIntersection [VM] kinetic-v4.7.2.js (521):7621
Kinetic.Util.addMethods.getIntersection [VM] kinetic-v4.7.2.js (521):7196
Kinetic.Util.addMethods._mousemove [VM] kinetic-v4.7.2.js (521):7294
(anonymous function)
Unable to get image data from canvas because the canvas has been tainted by cross-origin data. [VM] kinetic-v4.7.2.js (521):7
Kinetic.Util.addMethods.getIntersection [VM] kinetic-v4.7.2.js (521):7621
Kinetic.Util.addMethods.getIntersection [VM] kinetic-v4.7.2.js (521):7196
Kinetic.Util.addMethods._mousemove [VM] kinetic-v4.7.2.js (521):7294
(anonymous function)
... если делать что-то подобное ....
result.popupMenu = new Kinetic.Shape({
drawFunc: function(context) {
var subCanvas = renderToCanvas(578, 200, function(canvas) {
rasterizeHTML.drawHTML(result.popupMenuHtml, canvas, {}, function(image) {
context.drawImage(image, 0, 0);
});
});
});
В основном это выглядит как тонированное изображение считается небезопасным и, таким образом, развращает весь контекст, и KineticJS недовольна этим.