Ext-GWT バージョン 3.0 (具体的には 3.0.0-rc) を使用しており、TextSprite を介してテキストを回転させようとしています。Google Chrome では正常に動作しますが、Internet Explorer 8 では動作しません。
Java ソース:
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.sencha.gxt.chart.client.draw.DrawComponent;
import com.sencha.gxt.chart.client.draw.sprite.TextSprite;
import com.sencha.gxt.widget.core.client.container.Viewport;
public class TextRotation implements EntryPoint {
public void onModuleLoad() {
TextSprite sprite = new TextSprite("Some text");
sprite.setRotation(270);
DrawComponent component = new DrawComponent();
component.setViewBox(true);
component.addSprite(sprite);
Viewport vp = new Viewport();
vp.add(component);
RootPanel.get().add(vp);
}
}
IE 開発者ツールを使用して、生成されたソースをエクスポートすると、次のようになります。テキスト コンポーネントが作成されていますが、可視領域の外に配置されているようです:
<DIV style="WIDTH: 1268px; HEIGHT: 785px" class=GAOO-TBDNN> <DIV style="WIDTH: 1268px; HEIGHT: 785px" __eventBits="100">
<DIV style="WIDTH: 1268px; HEIGHT: 785px" class=x-vml-base>
<?xml:namespace prefix = vml />
<vml:shape style="Z-INDEX: 0" class="vml x-vml-sprite" coordsize = "21600,21600" filled = "t" fillcolor = "white" stroked = "f" path = " m0,0 l27388800,0,27388800,16956000,0,16956000 xe">
<vml:skew class=vml on = "t" matrix = "935375f,0,0,935375f,0,0" offset = "34468954f,52315599f"></vml:skew>
<vml:fill></vml:fill>
</vml:shape>
<vml:shape style="Z-INDEX: 10" class="vml x-vml-sprite" coordsize = "21600,21600" filled = "t" fillcolor = "black" stroked = "f" path = " m0,0 l1,0 e">
<vml:skew class=vml on = "t" matrix = "0,935375f,-935376f,0,0,0" offset = "52315599f,-34468954f"></vml:skew>
<vml:textpath style="LINE-HEIGHT: normal; FONT-VARIANT: normal; FONT-FAMILY: ; FONT-SIZE: 12px; v-text-align: left" class=vml on = "t" string = "Some text"></vml:textpath>
<vml:path class=vml textpathok = "t"></vml:path>
<vml:fill></vml:fill>
</vml:shape>
</DIV>
</DIV>
</DIV>
<DIV style="POSITION: absolute; LINE-HEIGHT: normal; TEXT-TRANSFORM: none; FONT-STYLE: normal; FONT-FAMILY: null; LETTER-SPACING: normal; VISIBILITY: hidden; FONT-SIZE: 12px; TOP: -10000px; FONT-WEIGHT: 400; LEFT: -10000px"></DIV>
「sprite.setRotation(270);」という行をコメントアウトすると、回転していないテキストは問題なく表示されます。生成された HTML は、「skew」エントリの値を除いて、上記とまったく同じです。次のように差分します。
10c10
< <vml:skew class=vml on = "t" matrix = "935375f,0,0,935375f,0,0" offset = "34468954f,52315599f"></vml:skew>
---
> <vml:skew class=vml on = "t" matrix = "1510899f,0,0,1510899f,0,0" offset = "1445363f,14325573f"></vml:skew>
14c14
< <vml:skew class=vml on = "t" matrix = "0,935375f,-935376f,0,0,0" offset = "52315599f,-34468954f"></vml:skew>
---
> <vml:skew class=vml on = "t" matrix = "1510899f,0,0,1510899f,0,0" offset = "1445363f,14325573f"></vml:skew>
グーグルで検索して、Sencha フォーラムとここで過去の問題を調べても、手がかりが得られません。
ありがとう。