2011-09-30 11 views
7

smartGWT에서는 this example에서 볼 수있는 것처럼 다른 위젯을 HTML5 캔버스에 추가 할 수 있습니다 (인터페이스 사용 가능).GWT의 HTML5 캔버스에 위젯 추가 (버튼)

이제는 (원시) GWT2.4에서도 가능하다면 알아 내려고하고 있습니다. 아무도 추가 프로젝트 (예 : smartGWT, gwtExt, extGWT, ...)없이 GWT를 사용하는 작업 예제가 있습니까?

답장을 보내 주셔서 감사합니다.

+0

나는이 오래된 질문 알지만, 다른 독자 '을 위해 : 링크 된 예에서 캔버스 SmartGWT에 속하고 HTML5 캔버스 함께 할 아무것도있다. – targumon

+0

@ targumon : imho는 일반 HTML5 캔버스를 기반으로 맞춤화 된이 SmartGWT 캔버스입니다. – 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

나는 동의하지 않는다 -보기를 본다. Canvas 위젯에 MouseHandler를 등록 할 수 있습니다. 캔버스 내에서 이미지를 그리는 방법 나는 익숙해졌으며 대답이 아닙니다. – Erik

+0

이제 SmartGWT 전문가는 아니지만 SmartGWT 프로젝트의 캔버스 코드를 보면 SmartGWT Canvas (http://code.google.com/p/smartgwt/source/browse/trunk/main /src/com/smartgwt/client/widgets/Canvas.java)는 HMLT5 Canvas와 관련이 있습니다. SmartGWT Canvas의 이름은 Canvas ... –

+0

다시는 동의하지 않습니다. SmartGWT의 Canvas는 BaseWidget의 상속이며 다시 정상 GWT- 위젯의 상속입니다. SmartGWT-Canvas에는 HTML5 캔버스의 일반 JS 작성 기능을 호출하는 "create"라는 JSNI 메소드가 있습니다. 또한 기본 위젯을 기반으로하지 않는 자체 브라우저 위젯을 만들 수 없다고 생각합니다. 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; 
} 

절대 위치를 사용하면 화면 어디에나 배치 할 수 있습니다.

건배

관련 문제