GWT 잘린 이미지

Question

이미지의 일부가 강조 표시되고 나머지 부분의 불투명도가 0.5 인 위젯을 만듭니다.

두 개의 이미지를 사용하고 있습니다. 불투명도가 0.5 인 뒤쪽의 전체 이미지 이미지 i의 부분이 정면에서 강조 표시됩니다. 앞면 이미지는 GWT의 Clipped 이미지입니다.

나는 백 이미지의 크기를 조정해야하는 시나리오가 있습니다. 정면에서 잘린 이미지의 크기를 조정할 방법이 있습니까?

Answer 1

GWT는 다음 예에서와 같이 (빈 이미지 내용과 함께) CSS2 스타일을 사용하여 클립 이미지 구현 : 불행하게도 CSS2 배경 (URL 제공) 이미지 스케일링 지원, 그렇게하지 않습니다

width: 300px; height: 300px; 
background: url("/team.png") no-repeat scroll -5px -5px transparent; 

이 아니다 내장 된 GWT 라이브러리를 사용하여 클리핑 된 이미지의 크기를 조정하는 자연스러운 방법.
http://code.google.com/p/google-web-toolkit-incubator/wiki/GWTCanvas

그렇지 않으면, 당신의 최선의 선택은 클립 또는 규모 (또는 둘 다)상의 이미지 중 하나 일 수 있습니다 :

하나의 옵션에 설명 된 바와 같이, 캔버스를 사용하고, 그것으로 이미지를로드하는 것입니다 섬기는 사람. 죄송합니다! 서로 다른 이미지를 제공하기 위해 괜찮다면 GWT 2.0과

-Bosh

Answer 2

하나의 대안은, 다른 DataResources, 각 이미지 하나에 ClientBundle을 정의합니다. 다음으로 이미지의 URL을 설정하기 위해 DataResource의 URL을 사용해야합니다. 다음

interface MyClientBundle extends ClientBundle { 
    @Source("img1.png") 
    DataResource myImg1(); 
    @Source("img2.png") 
    DataResource myImg2(); 
} 

private static final MyClientBundle BUNDLE = GWT.create(MyClientBundle.class); 

...

new Image(BUNDLE.myImg1().getUrl()); 

그것은 작동해야하고 GWT는 "데이터 :"생성 할 수있는 모든 별도의 이미지 다운로드에 대한 필요성을 제거, URL의 브라우저를 지원하는 대한을.

그건 그렇고, 정말로 크기를 조정해야합니까? 시각적으로 좋지는 않습니다.