다른 가로 세로 비율에 대해 openlaszlo에서 프로그래밍 방식으로 xscale 및 yscale을 결정하는 방법은 무엇입니까?

Question

뷰를 확장하는 데 문제가 있으므로 결국 xscale 및 yscale을 사용하여 뷰를 확장했습니다. 이 문제는 풀 스크린 모드에서 해상도가

canvas.width -1280 
canvas.height - 1023 

인 내 컴퓨터에서 해결됩니다.

하지만 난 그

canvas.width -1280 
canvas.height - 697 

스크린의 전체 화면 모드 부분에서 잘라지고 내 친구 컴퓨터에 동일하게 검사 할 때.

주어진 현재 스케일링 요소는 xscale = 1.33이고 yscale = 1.33입니다. 두 번째 시스템에 맞게 yscale을 변경해야합니다. 프로그래밍 방식으로이 요소를 결정하는 방법.

Answer 1

다음은 비율에 따라보기의 크기를 조정하는 방법을 보여주는 예제 코드입니다. 비율은 unscaledwidth 및 unscaledheight 속성에 의해 정의됩니다. 최소 너비 또는 최소 높이에 대한 구현은 없지만 필요한 경우 추가 할 수 있습니다.

이 방법의 단점은 모든 리소스가 확장된다는 것입니다. SWF 런타임에서 기본 구성 요소의 리소스는 벡터 기반이며, DHTML 런타임에서는 PNG 파일로 변환되며 크기가 조정되면 매우 선명하지 않습니다. 나는 일반적으로 기존의 오픈 라즐로 구성 요소를 확장하지 않는 게 좋을,하지만 그건 당신의 결정입니다 :

<canvas width="100%" height="100%"> 
<!-- OpenLaszlo scaled view example by Raju Bitter --> 

    <class name="scaledview"> 
     <attribute name="unscaledwidth" type="number" value="400"/> 
     <attribute name="unscaledheight" type="number" value="300"/> 
     <attribute name="wratio" type="number" value="${this.unscaledwidth/this.unscaledheight}"/> 

     <handler name="oninit"> 
      this.setAttribute("width", this.unscaledwidth) 
      this.setAttribute("height", this.unscaledheight) 
      this._setSize(); 
     </handler> 
     <handler name="onwidth" reference="canvas"> 
      this._setSize(); 
     </handler> 
     <handler name="onheight" reference="canvas"> 
      this._setSize(); 
     </handler> 
     <method name="_setSize"> 
      var scale = 1.0; 
      if (canvas.width/canvas.height > this.wratio) { 
       scale = canvas.height/this.unscaledheight; 
       this.setAttribute("x", Math.round((canvas.width-this.width*scale)/2)); 
       this.setAttribute("y", 0); 
      } else { 
       scale = canvas.width/this.unscaledwidth; 
       this.setAttribute("x", 0); 
       this.setAttribute("y", Math.round((canvas.height-this.height*scale)/2)); 
      } 
      this.setAttribute("xscale", scale); 
      this.setAttribute("yscale", scale); 
     </method> 
    </class> 

    <scaledview id="sv" bgcolor="red"> 
     <window width="200" height="100" title="Just a window!" align="center" valign="middle"/> 
    </scaledview> 

    <view> 
     <simplelayout axis="y" /> 
     <text fontsize="12" 
       text="${'canvas: ' + canvas.width + ' * ' + canvas.height + ' ratio=' + (canvas.width/canvas.height)}"/> 
     <text fontsize="12" 
       text="${'scaledview: ' + sv.width + ' * ' + sv.height + ' ratio=' + sv.wratio}" /> 
     <text fontsize="12" 
       text="${'scaledview: xscale=' + sv.xscale + '/yscale=' + sv.yscale}" /> 
    </view> 

</canvas> 

확인 당신이 빨간색 <scaledview>이 정의 된 비율에 따라 스케일링 볼 수있는 응용 프로그램의 스크린 샷. 창 구성 요소는 캔버스 해상도가 증가하거나 감소함에 따라 크기가 커지고 축소됩니다. 캔버스 해상도의 화면 비율에 따라 폭과 높이, 그리고에 canvas.width 또는 하나 canvas.height을 min으로 상자를 확장 할 뜻