현재 위치 - 중국 분류 정보 발표 플랫폼 - 비즈니스 서비스 정보 - Laya 화면 적응 및 크기 속성

Laya 화면 적응 및 크기 속성

2.Laya.Stage

3.html canvas

다음은 테스트

입니다

설명: laya.init (1136,640, laya.webgl); 그래서 stage.width, 하이트는 이 너비입니다. 그런 다음 현재 아이패드 화면 아래에 있습니다. SCALE_SHOWALL 모드를 사용했기 때문에 화면 아래쪽에 흰색 막대가 나타납니다. 그래서 Browser.height 가 html canvas height 보다 약간 높다는 것을 알 수 있습니다. 그런 다음 아이폰 5 화면으로 전환하면 이 세 가지가 동일하다는 것을 알 수 있습니다.

공식 예제에서 스테이지 크기와 직사각형 위치 크기

를 먼저 살펴보십시오

스프라이트 중 하나에서 0,0 을 중심으로 200,200 크기의 사각형을 그린 다음 스테이지 중심에 추가합니다. 스테이지 초기화 크기는 550,400 입니다.

그런 다음 chrome 에서 예제를 실행하고 F12 키를 누른 후 휴대폰 크기를 전환하여 layaCanvas 의 width 와 height 를 관찰하면 다른 모드의 차이를 볼 수 있습니다 (아래 세로 화면, 가로 화면 같은 규칙)

Laya.stage.scalemode = stage.scale _ noscale;

응용 프로그램은 디자인 너비와 높이를 일정하게 유지하고, 확대/축소하지 않고, stage 의 너비는 디자인 너비보다 높습니다.

전체 응용 프로그램의 크기가 고정되어 플레이어 창의 크기가 변경되더라도 그대로 유지됩니다. 플레이어 창이 내용보다 작은 경우 일부 잘림이 발생할 수 있습니다.

테스트 결과:

LayaCanvas 의 width 와 height 는 변하지 않고 550,400 이었습니다. 스크린은 자를 때 나타나고 직사각형은 중앙에 남아 있습니다.

Laya.stage.scalemode = stage.scale _ showall;

전체 표시 적용, 최소 비율에 따라 확대/축소, 일정 비율 변경 안 함, 한쪽은 비어 있을 수 있고 스테이지는 디자인 너비보다 높이

더 넓습니다

응용 프로그램의 원래 종횡비를 유지하면서 왜곡 없이 전체 응용 프로그램을 지정된 영역에 표시합니다. 응용 프로그램 양쪽에 테두리가 표시될 수 있습니다.

테스트 결과:

LayaCanvas 의 width 와 height 는 항상 화면에 따라 변한다. 예를 들어, 아이폰 6 의 375,667 크기에서는 폭이 최대 375 가 되고 높이는 550,440 의 비율을 유지해야 하기 때문에 비율은 273 이 됩니다.

이로 인해 canvas 아래에 많은 빈 테두리

가 수직 화면 모드로 나타납니다

응용 프로그램은 화면 크기에 따라 전체 화면을 채웁니다. 비등비 배율 조정은 변형됩니다. stage 의 너비는 디자인 너비보다 높습니다.

전체 응용 프로그램이 지정된 영역에 표시되지만 원래 종횡비를 유지하려고 하지 않습니다. 왜곡이 발생할 수 있으며 응용 프로그램이 디스플레이를 늘이거나 압축할 수 있습니다.

테스트 결과:

LayaCanvas 의 width 와 height 는 변하지 않고 550,400 이었습니다. 그러나 직사각형은 이미 변형되었다. 치수를 전환할 때 transform:matrix 가 계속 변해 직접 신축된 것 같다.

적용은 최대 비율로 디스플레이를 확대/축소하고, 폭 또는 높이 방향은 일부를 표시하며, 비례 배율 조정은 변하지 않고, stage 의 너비는 디자인 너비보다 높습니다.

전체 응용 프로그램은 왜곡 없이 지정된 영역을 채우지만 응용 프로그램의 원래 종횡비를 유지하면서 일부 잘릴 수 있습니다.

테스트 결과:

LayaCanvas 의 width 와 height 는 변하지 않고 550,400 이었습니다. 가장자리는 채워지지만 직사각형은 잘립니다.

요약하자면, 일반적으로 모든 내용을 표시하기 위해 우리는 여전히 SCALE_SHOWALL 이라는 패턴을 사용한다.

ScreenMode 는 가로 세로 화면

을 변경할 수 있습니다

가로 정렬은 왼쪽 가운데, 오른쪽, 세로 정렬은 위, 아래로 나뉩니다.

이 테스트는 layaCanvas 의 width 와 height 도 변하지 않았고, matrix 는 계속 변하고 있다.