2

私はtd内の動的画像を表示するためにgwtを使用しており、画像はimagebundleからのものですが、gwtがコンパイル中に作成する大きな画像全体を、その大きな画像の特定の部分を表示するのではなく、そのtd内に表示しています。ここで何が欠けているのかわかりません...問題は、画像が動的に追加および選択され、画像を追加するたびにcssを定義できないことです。あなたの誰かがそれに関して私を助けることができれば. これが私のコードです

私のテーブル セルは、UiBinder 内で次のように定義されています。

    <ui:style>
          .colourPickerCell {
             background-repeat:no-repeat;
          }
    </ui:style>

         <tr>
            <td class="{style.colourPickerCell}" ui:field="colourPreviewSlot" rowspan="3" width="50%"></td>
        </tr>

プレゼンター クラス内の関数:

    public void newColorSelected(Image patternImage) { 
            Style patternImageStyle = patternImage.getElement().getStyle();
            Style style = getColourPreviewSlot().getStyle();
            style.setWidth(patternImage.getWidth(), Unit.PX);
            style.setBackgroundImage(patternImageStyle.getBackgroundImage());
            style.setLeft(-patternImage.getOriginLeft(), Unit.PX);
            style.setTop(-patternImage.getOriginTop(), Unit.PX);
            style.setHeight(patternImage.getHeight(), Unit.PX);

        }

コードをデバッグすると、patternImage オブジェクトの html が次のように取得されます。

            <img id="..." style="backgrond:url(....) no-repeat -149px 12px;"/>

よろしくお願いします、

4

1 に答える 1

1

この画像をバックグラウンド スプライトとして使用している場合、background-position css プロパティを使用して画像を td の「後ろ」に「移動」する必要があると考えられます。

"left" および "top" プロパティは、その下にある背景画像ではなく、スタイルを設定した要素に相対的です。

于 2012-07-10T10:28:19.417 に答える