HTML 要素に 2D グラフィックスを表示したい XULRunner アプリケーションがあります。ウィンドウのサイズが変更されたときに、これらのグラフィックを再描画できるようにしたいと考えています。レイアウトは次のようになります。
<box flex="1" id="canvas-box">
<html:canvas id="canvas" flex="1">
</html:canvas>
</box>
まず、キャンバス要素の「幅」と「高さ」のプロパティは、画面上の実際のサイズを反映していません。これにより、x 方向の 1 単位が y 方向の 1 単位とは異なる結果になるため、ストロークが奇妙に引き伸ばされます。第 2 に、onresize イベントをキャンバスに配置したか、周囲のボックスに配置したかに関係なく、onresize イベントを発生させることができません。
XUL チュートリアルでは、XUL アプリ内で HTML 要素を使用するとレイアウトがおかしくなることがあると警告していますが、この場合は 2D グラフィックスが必要なため、選択の余地はありません。ポインタはありますか？
編集今のところ、canvas 要素の代わりに SVG を使用します。私はそれを試す準備段階にいますが、少なくともキャンバスが持っていた奇妙な「ストレッチ」の問題はないようです.