JSF (primefaces) を使用して画像を描画し、その画像にオーバーレイ (四角形) を描画したいと考えています。画像はサイズ変更可能である必要がありますが、画像の比率を維持する必要があり、オーバーレイもスケーリングする必要があります。
私は試した:
<pe:layout id="fullPage" options="#{myManagedBean.layoutOptions}" fullPage="true" widgetVar="fpLayoutWidget">
<pe:layoutPane position="west" resizeWhileDragging="true" closable="false" resizable="true"
styleContent="overflow: auto;">
<!-- canvas id="imagecanvasid" style="border: red solid; width: 100%; height: auto; overflow: hidden; margin: 0 !important; padding: 0 !important;" /-->
<div id="imageContainer" style="max-height: 100%;">
<p:graphicImage id="imageid" value="#{myManagedBean.image}" style="max-height: 100%; max-width: 100%; position: absolute;" />
</div>
<pe:imageAreaSelect id="areaSelect" for="imageid" handles="false" show="false" hide="true"
autoHide="true" movable="false" persistent="false" resizable="false">
<p:ajax event="selectEnd" listener="#{myManagedBean.selectCoords}" />
</pe:imageAreaSelect>
</pe:layoutPane>
div が機能しているため、オーバーレイのスケーリングを取得できません。画像サイズが変わったときにリスナーを登録してdivのサイズを変更しようとしましたが、divが更新されるときに遅延があります。どんなアイデアでも大歓迎です。