向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画布添加小部件（按钮）

回答

相关问题