1

ビューの拡大に問題があったため、最終的に xscale と yscale を使用してビューをスケーリングしました。この問題は、解像度のある私のマシンで解決されました

canvas.width -1280
canvas.height - 1023

フルスクリーンモードで。

しかし、友人のマシンで同じことを確認すると、

canvas.width -1280
canvas.height - 697

フルスクリーンモードで画面の一部が切り取られています。

i が指定した現在のスケーリング係数は、xscale = 1.33 および yscale = 1.33 です。2 番目のシステムに適合するように、yscale を変更する必要があります。この要因をプログラムで決定する方法。

4

1 に答える 1

2

以下は、比率に基づいてビューをスケーリングする方法を示すサンプル コードです。比率は、unscaledwidth および unscaledheight 属性によって定義されます。最小幅または最小高さの実装はありませんが、必要に応じて簡単に追加できます。

このアプローチの欠点は、すべてのリソースがスケーリングされることです。SWF ランタイムでは、デフォルト コンポーネントのリソースはベクター ベースであり、DHTML ランタイムでは PNG ファイルに変換され、拡大縮小すると鮮明に見えません。私は通常、既存の OpenLaszlo コンポーネントをスケーリングしませんが、それはあなたの判断です:

<canvas width="100%" height="100%">
<!-- OpenLaszlo scaled view example by Raju Bitter -->

    <class name="scaledview">
        <attribute name="unscaledwidth" type="number" value="400"/>
        <attribute name="unscaledheight" type="number" value="300"/>
        <attribute name="wratio" type="number" value="${this.unscaledwidth/this.unscaledheight}"/>

        <handler name="oninit">
            this.setAttribute("width", this.unscaledwidth)
            this.setAttribute("height", this.unscaledheight)
            this._setSize();
        </handler>
        <handler name="onwidth" reference="canvas">
            this._setSize();
        </handler>
        <handler name="onheight" reference="canvas">
            this._setSize();
        </handler>
        <method name="_setSize">
            var scale = 1.0;
            if (canvas.width/canvas.height > this.wratio) {
                scale = canvas.height / this.unscaledheight;
                this.setAttribute("x", Math.round((canvas.width-this.width*scale) / 2));
                this.setAttribute("y", 0);
            } else {
                scale = canvas.width / this.unscaledwidth;
                this.setAttribute("x", 0);
                this.setAttribute("y", Math.round((canvas.height-this.height*scale) / 2));
            }
            this.setAttribute("xscale", scale);
            this.setAttribute("yscale", scale);
        </method>
    </class>

    <scaledview id="sv" bgcolor="red">
       <window width="200" height="100" title="Just a window!" align="center" valign="middle"/>
    </scaledview>

    <view>
        <simplelayout axis="y" />
        <text fontsize="12"
              text="${'canvas: ' + canvas.width + ' * ' + canvas.height + '  ratio=' + (canvas.width/canvas.height)}"/>
        <text fontsize="12"
              text="${'scaledview: ' + sv.width + ' * ' + sv.height + '  ratio=' + sv.wratio}" />
        <text fontsize="12"
              text="${'scaledview: xscale=' + sv.xscale + ' / yscale=' + sv.yscale}" />
    </view>

</canvas>

アプリケーションのスクリーンショットを確認してください。ここでは、定義された比率に基づいてスケーリングされた赤い <scaledview> を確認できます。ウィンドウ コンポーネントは、キャンバスの解像度の増減に合わせて拡大縮小します。

ここに画像の説明を入力

于 2012-09-13T14:17:19.190 に答える