Добавить виджет (кнопку) на холст HTML5 в GWT

#html #gwt #html5-canvas #gwt2

#HTML #gwt #html5-холст #gwt2

Вопрос:

В SmartGWT можно добавить другой виджет (кажется, использующий интерфейс) на холст HTML5, как вы можете видеть в этом примере.

Теперь я пытаюсь выяснить, возможно ли это и в (необработанном) GWT2.4. Есть ли у кого-нибудь из вас рабочий пример использования GWT без каких-либо дополнительных проектов (например, SmartGWT, gwtExt, ExtGWT, …)?

Спасибо за все ваши ответы.

1. Я знаю, что это старый вопрос, но для других читателей: холст в связанном примере принадлежит SmartGWT и не имеет ничего общего с холстом HTML5.

2. @targumon: imho — это SmartGWT-Canvas, основанный на обычном HTML5-Canvas и настроенный.

3. Эрик, это не вопрос мнения:-D просто проверьте это в современном браузере — когда вы используете com.smartgwt.client.widgets. Холст , и это имеет место в java2s.com приведенный вами пример, результирующий объект DOM представляет собой тег DIV: например, <div id=»isc_174″ eventproxy=»isc_Canvas_125″ … > … </div> только если вы используете com.google.gwt.canvas.client. Canvas.createIfSupported() , вы получите тег <canvas> (в поддерживаемом браузере, конечно).

Ответ №1:

HTML5 canvas пока не входит в сферу действия GWT, но, возможно, вы можете просто создать эквивалентные элементы que в своем dom с помощью GWT dom API и рисовать в нем с помощью вызовов JSNI

1. Я не согласен. С GWT 2.2 Google добавил экспериментальную поддержку HTML5 canvas. С GWT 2.4 холст официально поддерживается GWT (см.: code.google.com/intl/de-DE/webtoolkit/doc/latest /… ). Возможно, JSNI — это решение — у вас есть рабочий пример? 😉

Ответ №2:

Благодаря Erik я заметил недавний выпуск canvas в GWT 2.4

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

Ответ №3:

Насколько я знаю, вы не можете поместить произвольный виджет в холст. Что вы можете сделать, так это рисовать изображения. Итак, я думаю, что виджеты 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);
    }

}

1. Я не согласен — посмотрите пример. Вы можете зарегистрировать манипулятор мыши в виджетах, размещенных на холсте. Как нарисовать изображение на холсте, к которому я привык, и это не ответ.

2. Теперь я не эксперт по SmartGWT, но, глядя на код Canvas в проекте SmartGWT, я не думаю, что SmartGWT Canvas ( code.google.com/p/smartgwt/source/browse/trunk/main/src/com /… ) имеет какое-либо отношение к холсту HMLT5. Холст SmartGWT называется просто Canvas…

3. И снова я не согласен: холст SmartGWT является наследованием BaseWidget, который опять же является наследованием обычного GWT-виджета. SmartGWT-Canvas включает в себя метод JSNI с именем «create», который вызывает обычную функцию JS create для HTML5-canvas. Кроме того: я думаю, что невозможно создать собственные браузерные виджеты, не основанные ни на одном из виджетов по умолчанию, поддерживаемых HTML-определением.

Ответ №4:

Что вам нужно, так это стиль 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;
}

С абсолютной позицией вы можете разместить их в любом месте экрана.

Приветствия