3

为了在我的 div 中缩放元素，我使用了这个 css（此处为 JSFiddle 示例）：

.scaled {
    transform: scale(0.5);
    -ms-transform: scale(0.5); /* IE 9 */
    -webkit-transform: scale(0.5); /* Safari and Chrome */
    -o-transform: scale(0.5); /* Opera */
    -moz-transform: scale(0.5); /* Firefox */
    filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
        M11=0.5, M12=0,
        M21=0, M22=0.5);
}

所有主流浏览器（包括 IE8）都支持这一点。

现在，当我尝试在 GWT 中动态应用这个 css 时：

public void setZoom(double val) {
    if (val != 1) {
        surface.getElement().getStyle().setProperty("transform", "scale(" + val + ")");
        surface.getElement().getStyle().setProperty("-ms-transform", "scale(" + val + ")");
        surface.getElement().getStyle().setProperty("-webkit-transform", "scale(" + val + ")");
        surface.getElement().getStyle().setProperty("-o-transform", "scale(" + val + ")");
        surface.getElement().getStyle().setProperty("-moz-transform", "scale(" + val + ")");
        surface.getElement().getStyle()
                .setProperty("filter", "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=" + val + ", M12=0,M21=0, M22=" + val + ")");
    }

}

我收到以下错误：

Caused by: java.lang.AssertionError: The style name '-ms-transform' should be in camelCase format
    at com.google.gwt.dom.client.Style$.assertCamelCase$(Style.java:1603)
    at com.google.gwt.dom.client.Style$.setProperty$(Style.java:1512)

如何在 GWT 中动态设置这些依赖于浏览器的样式？（尤其是 IE 的过滤器..）

4

3 回答 3

10

这是 GWT 的问题跟踪器条目，其中讨论了限制和解决方法。

http://code.google.com/p/google-web-toolkit/issues/detail?id=5152&q=assertCamelCase&colspec=ID%20Type%20Status%20Owner%20Milestone%20Summary%20Stars

这是另一篇用 Javascript 讨论它的文章；http://www.javascriptkit.com/javatutors/setcss3properties.shtml

基本上，将破折号 (-) 后的那个字母转换为大写，所以 -moz-transform 是 'MozTransform'

所以这应该有效；

    surface.getElement().getStyle().setProperty("MozTransform", "scale(" + val + ")");
于 2012-11-16T23:40:03.697 回答
3

您可以在 CSS ResourceBundle 或条件 CSS 中使用值函数：

https://developers.google.com/web-toolkit/doc/latest/DevGuideClientBundle#Value_function

但我从你的代码中不明白为什么你需要使用 transform: scale 。您可以直接设置此元素的大小，例如

surface.setSize("100px", "200px")

如果您设置相对于某物的尺寸，您可以先测量该物（窗口或元素），然后计算您需要的尺寸。此解决方案适用于所有浏览器，您不必依赖支持的 CSS3。

编辑：

您可以拥有一个不会改变其大小的 div （在您的示例中为“表面”）。此 div 将包含另一个 div（例如，“wrapper”），其中包含所有内部内容。所有内容都可以设置为相对于包装器 div 的百分比或 em。当您需要缩放您的内容时，您只需更改包装器 div 的大小 - 它的所有内容都会相应地缩放。

于 2012-11-16T20:49:16.743 回答
2

为什么要尝试使用 java 代码设置属性。虽然 GWT 通过编码支持它，但它有很多限制。尝试给 CSS 类名，然后在 CSS 中做你想做的事。

要通过 GWT 添加类名，您可以使用以下命令。

getElement().setClassName( "className" );
getElement().addClassName( "className" );

这里提供 CSS 类名（可以是任何名称）。在您的 CSS 文件中使用相同的 className 并执行您需要的所有操作。

于 2012-11-22T11:50:55.977 回答