0

いくつかの形状を描画する HTML5 キャンバス アプリケーションがあります (現時点では KineticJS を使用しています)。ユーザーが図形にカーソルを合わせるたびにポップアップ メニューを表示したいと考えています。

このメニューは、通常の右クリック ポップアップ メニューとかなり似ているはずですが、リッチ テキストの書式設定機能 (たとえば、一部のメニュー項目が別の色または太字であるなど) があればよいと思います。右クリックします（ホバリングで表示されるだけです）。

各図形は、ポップアップ メニュー内に異なる数の要素を持つことができ (したがって、メニューの高さは柔軟です)、各要素は異なるテキスト長にすることができます (したがって、異なる幅を持ちます)。個別にクリック可能な要素は、オプションの追加機能です。

このような機能は、ある程度の努力 (すべてのテキストのフォント メトリックの計算、各要素を表示するための四角形とテキストの描画など) で手作りできると確信していますが、車輪の再発明のようです。これを行うために既存のライブラリを使用する（または少なくともレイアウトを支援する）。

今のところ、私は見てきました：

  • これを行うための適切なネイティブKineticJSの方法（または少なくともレイアウトを支援する方法）-フォントメトリック、レイアウトサイズを計算し、テキスト/フォーマットのすべての座標を設定する必要があることがわかる限り、これまでのところ見つかりませんでした手動で長方形。

  • ZebKit - ただし、ZebKit と KineticJS が 1 つの HTML5 キャンバスでうまく連携できるかどうかはわかりません。

  • html2canvas - メニューを HTML フラグメントとして画像にレンダリングし、それをキャンバスにレンダリングします。ただし、非表示/画面外の HTML フラグメントでは機能しないようです。

  • EaselJs、Paper.js などの他の HTML5 フレームワーク - そのような機能を提供するものはないようです。

  • htmlcanvas - 4 年前に放棄されました

  • rasterizeHTML - 非常に有望に見えましたが、Chrome ではうまく動作しませんでした。

  • HTML5 Canvas から離れて、代わりにJsGraphicsなどを使用して非常に凝った CSS 描画を行い、代わりに jQuery UI などの適切な HTML フレームワークを使用します。メニューを簡単にするためだけに、アプリケーションの他の機能が大幅に制限されます。

  • 動的な SVG を生成し、canvgを使用してレンダリングします- SVG のレイアウトを手動で計算する必要があり、ジョブに適したツールとは思えません

  • GWT + LibGDX + TWL - 非常に複雑でやり過ぎのようです

関連する（ただし、抽象的なHTMLに焦点を当てているため、より一般的ですが、私の場合、ポップアップメニューのように見える構造化されたものはすべてそうです）SOの質問は次のとおりです。

これに対する比較的簡単な標準的な解決策が欠けていますか?

編集-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はそれについて不満を持っています.

4

1 に答える 1