向GWT中的HTML5畫布添加小部件（按鈕）

在smartGWT中，可以將另一個小部件（似乎使用界面）添加到HTML5畫布，如在this example中所見。向GWT中的HTML5畫布添加小部件（按鈕）

現在我試圖弄清楚，如果這可能在（原始）GWT2.4中。有沒有人使用GWT的工作示例，沒有任何額外的項目（如smartGWT，gwtExt，extGWT，...）？

感謝您的答案。

2011-09-30 Erik

我知道這是一個老問題，但對其他讀者的緣故：畫布在鏈接的例子屬於SmartGWT的和什麼都沒有做與HTML5畫布。 – targumon

@targumon：imho是基於常規HTML5-Canvas和自定義的SmartGWT-Canvas。 – Erik

Erik，這不是一個意見問題：-D 只需在現代瀏覽器中檢查它 - 當您使用** com.smartgwt.client.widgets.Canvas **時，這是java2s.com示例中的情況你給了，生成的DOM對象是一個DIV標籤：例如

...

僅當您使用** com.google.gwt.canvas.client.Canvas.createIfSupported（）**時，您會得到一個

HTML5畫布是不是在GWT的範圍還沒有，但也許你可以建立你的DOM闕相當的要素與GWT dom API，並繪製它throught JSNI電話

來源

2011-09-30 13:33:02

我不同意。隨着GWT 2.2谷歌增加了HTML5畫布的實驗支持。使用GWT 2.4，畫布由GWT正式支持（請參閱：http://code.google.com/intl/de-DE/webtoolkit/doc/latest/DevGuideHtml5.html）。 JSNI可能是一個解決方案 - 你有一個工作的例子嗎？ ;） – Erik

感謝埃裏克，我注意到近期發佈在GWT 2.4

http://google-web-toolkit.googlecode.com/svn/javadoc/2.4/com/google/gwt/canvas/client/Canvas.html

來源

2011-09-30 13:49:46

據我所知canvas，你不能把任意部件在畫布上。你可以做的是繪製圖像。所以我想你引用的smartGWT小部件不是別的，而是圖像。

如果你有一個GWT圖像對象，你這是怎麼得到它在畫布上繪製：

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); 
    } 

}

來源

2011-09-30 14:02:34

我不同意 - 看例子。您可以在放置在畫布上的小部件上註冊MouseHandler。如何在我習慣的畫布內繪製圖像，而不是答案。 – Erik

現在我不是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只是名爲Canvas ... –

我不同意：SmartGWT的畫布是BaseWidget的繼承，它也是正常GWT-Widget的繼承。 SmartGWT-Canvas包含一個名爲「create」的JSNI方法，它調用了HTML5畫布的普通JS創建函數。另外：我認爲不可能創建不基於任何默認小部件（HTML定義支持）的自己的瀏覽器小部件。 – Erik

-1

你需要的是你的按鈕的CSS樣式。像這樣的風格：

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; 
}

絕對位置，你可以把它們放在屏幕上的任何地方。

乾杯

來源

2012-06-29 13:05:54

向GWT中的HTML5畫布添加小部件（按鈕）

回答

相關問題