머리

Flash 플랫폼에서 HTML5 Canvas를 사용하여 인스턴스에 이미지를 로드했을 때의 위치 설정에 대해 잘 생각해 보면 당연하지만, 조금 메모해 두고 싶기 때문에 씁니다.

사례

검증

라이브러리에서 인스턴스를 형성

※for문으로 돌려 복제하고 있으므로, [iii]가 붙어 있습니다.

container[iii] = new lib.container();
container[iii].name = objName;
stage.addChild(container[iii]);

container[iii].scaleX = 0.35;
container[iii].scaleY = 0.35;
stage.setChildIndex(container[iii],(stage.getNumChildren())-iii);

덧붙여서, 라이브러리에 격납하고 있는 인스턴스의 설정은 이하와 같다. 좌우 중앙이 중심에서 준비.
트럼프 뒤의 이미지 사이즈는 455px × 680px.
큰 이미지를 배치하여 35%로 축소하여 화면에 배치합니다.

외부 이미지를 인스턴스에 배치

※for문으로 돌려 복제한 인스턴스의[iii]를 카드의 위치[left][right]로 카운트하고 있습니다.
아무 설정도 없이 로드만.

container[left].addChild(leftCardImage);

불러오는 트럼프 이미지

크기: 455px × 680px
상당히 큰 이미지를 로드합니다. 트럼프 뒷면의 이미지와 같은 크기입니다.
(소재 제공 : h tp // w w. 음 - 에 ckzb3b ← w32z n fcp1z w. 이 m/다타/t루mp. php)

배치 설정

container[left].addChild(leftCardImage);

로 로드. 로드할 인스턴스는 상하 좌우 중앙이 (0,0)인 경우 로드한 이미지가 상하 좌우 중앙을 기점으로 표시됩니다.


이미지의 경우 스페이드 5가 외부에서 읽은 이미지.
조금 이해하기 어렵습니다. 빨간색 프레임의 트럼프 2 장을보고 싶습니다.
왼쪽 상단에 배치된 트럼프의 뒤 이미지가 로드 대상의 인스턴스.
로드 대상의 좌상단에 배치된 이미지의 상하 좌우 중심에 대해 스페이드의 5의 파일이 기점의 좌상을 로드처의 인스턴스의 기점(0,0)을 향하고 있는 것을 알 수 있습니다. 그래서, 읽어들이는 화상으로서 사이즈나 좌표를 조정합니다.

배치 조정

배치를 조정합니다.
이미지의 읽어들여 부분에 좌표의 지정을 넣으면 1행으로 조절을 할 수 있습니다.

container[left].addChild(leftCardImage).setTransform(-228, -342, 1, 1, 0, 0, 0, 0, 0);

주의해 주었으면 하는 것이, 최초의 인수의 2개 x와 y의 좌표의 부분.
여기에서는 축소 전의 읽어들인 원의 화상의 크기로 화상과 정렬을 합니다.
덧붙여 읽어들인원에서 scale에서 축소한 비율을 그대로 계승하고 있으므로 scale의 설정은 읽어들인 원래의 「0.35」가 아니고 「1」이 됩니다.

요약

이번에는 하나의 케이스에서 설정에 관해 깨달은 것을 썼습니다만, 하나의 케이스에 의해 무엇을 계승했는지 어떤 모습이 되고 있는지를 이해할 수 있었으므로, 다른 패턴을 상상할 수 있다 그래서 다른 패턴으로 콘텐츠를 만들 때 어떻게 설정하면 좋은지 다음과 같이 상상할 수 있습니다.

로드 소스가 원래 치수 "1"인 경우

로드하는 이미지가 크다: setTransform로 축소 지정

읽어들이는 이미지가 같은 크기: setTransform로 지정 「1」

읽어들이는 이미지가 작다: setTransform로 확대 지정

로드 소스가 원래 크기 "2"로 확대된 경우

읽어들이는 화상이 크다: setTransform로 축소 지정(@2의 크기의 경우 「0.5」를 지정하면 같은 크기)

읽어들이는 이미지가 같은 크기: setTransform로 지정 「1」

읽어들이는 이미지가 작다: setTransform로 확대 지정(1/4의 크기의 경우 「2」를 지정하면 같은 크기)

후기

이번은 로드 대상의 인스턴스에 큰 이미지를 로드했을 경우의 설정에 관해서였습니다. 다른 패턴의 때를 상정할 수 있습니다만 검증해 보지 않으면 정말의 일은 모릅니다. 그래서, 검증할 기회가 있으면, 이 기사에 추기하고 싶습니다.