Question

我在拉伸视图方面遇到了一些问题，所以最后我使用xscale和yscale来缩放视图。在我的具有分辨率

的机器中解决了这个问题

canvas.width -1280
canvas.height - 1023

以全屏模式。

但是当我在我的朋友机器上检查相同时

canvas.width -1280
canvas.height - 697

在全屏模式下，屏幕的一部分会被切断。

我给出的当前比例因子是xscale = 1.33和yscale = 1.33。应更改yscale以适合第二个系统。如何以编程方式确定此因素。

Answer 1

下面是一个示例代码，向您展示如何根据比例缩放视图。比率由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>

检查应用程序的屏幕截图，您可以在其中看到红色＆lt; scaledview＆gt;根据定义的比例缩放。窗口组件的大小会随着画布分辨率的增加或减小而增大和缩小。

enter image description here

如何在openlaszlo中以编程方式确定不同宽高比的xscale和yscale？

1 个答案: