1

我在拉伸视图时遇到了一些问题，所以最后我使用 xscale 和 yscale 来缩放视图。这个问题在我的机器上解决了，它有一个解决方案

canvas.width -1280
canvas.height - 1023

在全屏模式下。

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

canvas.width -1280
canvas.height - 697

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

我给出的当前比例因子是 xscale = 1.33 和 yscale = 1.33。应更改 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 回答