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 を含む) でサポートされています。

このcssをGWTで動的に適用しようとすると:

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 (「ラッパー」など) が含まれます。すべてのコンテンツは、ラッパー 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 に答える