2011-09-30 17 views
7

smartGWTでは、this exampleのように、別のウィジェット(インターフェイスを使うようです)をHTML5のキャンバスに追加することができます。GWTのHTML5キャンバスにウィジェット(ボタン)を追加

これが(生の)GWT2.4でも可能であるかどうか、今私は理解しようとしています。あなたの誰かが、追加のプロジェクト(smartGWT、gwtExt、extGWT、...など)なしでGWTを使用した実例を持っていますか?

すべてのお返事ありがとうございます。

+0

私は、これは古い質問ですけど、他の読者のために:リンクされている例ではキャンバスはSmartGWTに属し、HTML5キャンバスとは何の関係も持っていません。 – targumon

+0

@ targumon:imhoは、このSmartGWT-Canvasであり、通常のHTML5-Canvasをベースにカスタマイズされています。 – Erik

+0

Erik、これは意見の問題ではありません.-D ** com.smartgwt.client.widgets.Canvas **を使用すると、現代のブラウザでそれを調べるだけです。これはjava2s.comの例に当てはまりますあなたが与えたDOMオブジェクトはDIVタグです。

...
** com.google.gwt.canvas.client.Canvas.createIfSupported()**を使用している場合にのみ、タグ(サポートされているブラウザではもちろん)が表示されます。 – targumon

答えて

0

HTML5のキャンバスは、まだGWTの範囲ではありませんが、多分あなたはちょうどそれがJSNI通話

エリックへ
+0

私は同意しません。 GWT 2.2では、HTML5キャンバスの実験的サポートが追加されました。 GWT 2.4では、キャンバスはGWTによって正式にサポートされています(http://code.google.com/intl/de-DE/webtoolkit/doc/latest/DevGuideHtml5.html参照)。 JSNIはおそらく解決策です - 実際の例がありますか? ;) – Erik

0

に、あなたはキャンバス内の任意のウィジェットを置くことはできません。あなたができることは、イメージを描くことです。だから私はあなたが尊敬するsmartGWTウィジェットはイメージ以外のものだと思います。

import com.google.gwt.canvas.client.Canvas; 
import com.google.gwt.core.client.EntryPoint; 
import com.google.gwt.dom.client.ImageElement; 
import com.google.gwt.user.client.ui.Image; 
import com.google.gwt.user.client.ui.RootLayoutPanel; 

public class ImageCanvasTest implements EntryPoint { 

    public void onModuleLoad() { 
     Image image = new Image(
      "http://upload.wikimedia.org/wikipedia/en/f/f6/Gwt-logo.png"); 

     Canvas canvas = Canvas.createIfSupported(); 
     canvas.getContext2d().drawImage(
     ImageElement.as(image.getElement()), 0, 0); 

     RootLayoutPanel.get().add(canvas); 
    } 

} 
+0

私は同意しません - 例を見てください。キャンバスに置かれたウィジェットでMouseHandlerを登録することができます。どのようにキャンバス内にイメージを描くか私は慣れていて、答えではありません。 – Erik

+0

私はSmartGWTの専門家ではありませんが、SmartGWTプロジェクトのCanvasコードを見ても、SmartGWT Canvas(http://code.google.com/p/smartgwt/source/browse/trunk/main /src/com/smartgwt/client/widgets/Canvas.java)は、HMLT5 Canvasと関係があります。 SmartGWTキャンバスはCanvasという名前になっています... –

+0

もう一度私は同意しません:SmartGWTのキャンバスはBaseWidgetの継承です。これは通常のGWTウィジェットの継承です。 SmartGWT-Canvasには、JSNIメソッド「create」が含まれています。このメソッドは、HTML5キャンバスの通常のJS作成関数を呼び出します。さらに、私は、デフォルトのウィジェットに基づいていない独自のブラウザウィジェットを作成することは不可能であると考えています.HTML定義のサポートです。 – Erik

-1

は何が必要あなたのボタンのCSSスタイルです:あなたはGWTの画像オブジェクトを持っている場合は

が、これはあなたがそれをキャンバスに描かれることを得る方法です。このようなスタイル:

button { 
    position:absolute; 
    z-index:2; 
} 

button.zoomOut { 
    top:200px; 
    left:265px; 
    font-size: 30px; 
    margin-left:auto; 
    margin-right:auto; 
} 

button.zoomIn { 
    top:200px; 
    left:400px; 
    font-size: 30px; 
    margin-left:auto; 
    margin-right:auto; 
} 

絶対位置では、画面上のどこにでも置くことができます。

乾杯

関連する問題