크레이트JS 블로그에는 2018년 9월 27일'Scaling and Stretching with the ScaleBitmap Class'가 공개됐다.이 보도를 토대로 그 내용을 가필하고 정리한 후 소개하다.ScaleBitmap클래스는 이름과 같이 신축위도를 나타낸다.이 클래스는 3개의 비트맵을 사용합니다×3개의 직사각형 구역으로 나뉘어 구역에 따라 신축 방식을 바꾸는'9슬라이스 방법이라고 한다.
CreateJS 문서에서 본 것을 기억하지 못할 수도 있습니다.사실 CreateJS의 표준 라이브러리에는 없습니다.ScaleBitmap 클래스는 EaselJS 라이브러리를 다운로드할 때의 "extras"폴더에 저장됩니다.

신축법

9 슬라이스는 사각형의 내용을 수평, 수직 두 직선으로 각각 9개의 사각형 구역으로 나눈다(그림001).

그림001 ■ 내용을 9개의 직사각형 구역으로 나눈다

그리고 위치에 따라 9개의 직사각형은 다음과 같이 신축된다(그림002).

네 각의 직사각형(1, 3, 7, 9)은 표준 크기

를 유지한다.

좌우(4와 6) 수직방향에서만 신축↔️

상하간(2와 8)은 수평방향에서만 신축↔️

중앙(5)수평, 수직 신축↔️↕️

그림 002 ■ 9슬라이스로 확대한 내용

9 절편이 작용하는 전형적인 것은 각원형의 신축이다.사각 영역을 유지하면 신축해도 각원의 반지름이 변경되지 않습니다.

주요한 방법과 문법

ScaleBitmap반에서 주로 사용하는 것은 구조기와 ScaleBitmap.setDrawSize()방법이다.ScaleBitmap() 구조기가 이미지에서 9비례의 사이즈를 만드는 데 규정된 실례.

구조기

ScaleBitmap(imageOrUri, scale9Grid)

매개 변수

imageOrUri: 표시할 이미지의 소스 객체 또는 URI입니다.

대상은 Image 또는 Canvas이다.

URI는 사용한 이미지 파일의 경로를 나타내는 문자열입니다.Video 대상을 생성하고 Image 속성에 분배한다.

ScaleBitmap.image: 9표도를 나타내는 중앙구역scale9Grid 대상.

그리고 9표도의 규정에 따라 새로운 크기를 묘사하는 실례는rectangle 방법이다.

메서드

setDrawSize(newWidth, newHeight)

매개 변수

ScaleBitmap.setDrawSize(): 인스턴스의 새 폭을 그립니다.

newWidth: 실례를 묘사하는 새로운 높이.

샘플 코드

newHeight 클래스를 사용하려면CreateJS 표준 라이브러리와 다운로드한 ScaleBitmap를 ScaleBitmap.jp 요소로 읽으십시오.
) 문서

<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script src="./lib/ScaleBitmap.js"></script>

EaselJS의 extraas/ScolBitmap 폴더에 각환의 도례 이미지를 슬라이스하고 신축샘플 코드(그림003)을 추가했다.

그림 003 ■ 그림의 그림을 슬라이스9

샘플 코드를 ECMAScript 2015(ES6)로 변경하는 구문은 다음 코드 001입니다.Canvas를 클릭할 때마다 범례 이미지의 크기가 임의로 변경됩니다.그럼에도 불구하고 사각 원의 반경은 원래의 모습이다.다음 견본 001은 jsdo입니다.it에 싣다.

코드001 ■클릭할 때마다 그림의 크기를 무작위로 변경합니다

let stage;
function init() {
    const url = 'ScaleBitmapImage.png';
    const centerRect = new createjs.Rectangle(12, 12, 5, 10);
    stage = new createjs.Stage("canvas");
    const image = new Image();
    image.addEventListener('load', (event) => stage.update());
    image.src = url;
    const scaleBitmap = new createjs.ScaleBitmap(image, centerRect);
    scaleBitmap.setDrawSize(200, 300);
    stage.addChild(scaleBitmap);
    stage.addEventListener('stagemousedown', (event) => {
        scaleBitmap.setDrawSize(Math.random() * 300 + 100 | 0, Math.random() * 100 + 60 | 0);
        stage.update();
    });
}
document.addEventListener('DOMContentLoaded', init);

샘플001 ■CreateJS 1.0.0: Using Score Bitmap class

>> judo.it
이 그림의 자바스크립트 코드는CreateJS의 anniversarycodepen으로 다음 견본 002에 사용됩니다.

샘플 002 ■ Happy2yers, Chris

See the Pen Happy 2 years, Chris by CreateJS ( @createjs ) on CodePen .