Flexible Leinwand in XUL

Question

Ich habe eine XULRunner-Anwendung, die 2D-Grafiken in einem HTML-Element anzeigen soll. Ich möchte in der Lage sein, diese Grafiken neu zu zeichnen, wenn das Fenster die Größe ändert. Das Layout sieht ungefähr so ​​aus:

<box flex="1" id="canvas-box"> 
<html:canvas id="canvas" flex="1"> 

</html:canvas> 
</box> 

Zunächst wird die „Breite“ und „Höhe“ Eigenschaften des Canvas-Elements nicht seine tatsächliche Größe auf dem Bildschirm wiedergeben. Dies führt dazu, dass die Striche merkwürdig gestreckt werden, da 1 Einheit in der x-Richtung anders als 1 Einheit in der y-Richtung ist. Zweitens kann ich das Onresize-Event nicht zum Feuern bringen, egal ob ich es auf die Leinwand oder auf die umgebende Box lege.

Das XUL-Tutorial warnt davor, dass Layout-Unklarheiten auftreten, wenn HTML-Elemente in Ihrer XUL-App verwendet werden, aber in diesem Fall habe ich keine Wahl, weil ich 2D-Grafiken brauche. Irgendwelche Zeiger?

BEARBEITEN Für jetzt werde ich SVG anstelle des Elements canvas verwenden. Ich bin dabei, es auszuprobieren, aber zumindest scheint es nicht die seltsamen "Dehnungs" -Probleme zu haben, die die Leinwand hatte.

Answer 1

Könnten Sie nicht einfach einen HTML-Frame/Iframe in das XUL einfügen und die Leinwand dort hineinlegen?

Answer 2

Ich dachte onresize funktioniert nur auf < window>, können Sie die Leinwand Größe ändern und es von dort neu streichen.