[PIXI] app.view(사실상 캔버스 태그) 속성 살펴보기

app.view를 알아보는 포스팅!

 

콘솔 창에서 위와 같이 설정해두고 app.view의 속성들을 살펴보고자 한다.

app.view = <canvas>

app.view는 캔버스 태그이다.

pixi 도우미 클래스로 생성한 app.view는 결국 캔버스 태그이기 때문에 HTML Canvas 기초 전반은 한번 훑는 것이 좋다.

아래 링크가 전반적으로 잘 설명되어 있어서 첨부한다.

 

https://unikys.tistory.com/274

[HTML5 튜토리얼] Canvas 기초 강좌

관련 포스팅

 

app.view.style = CSSStyleDeclaration

CSSStyleDeclaration

관련 포스팅

즉 app.view는 캔버스 태그이므로,

.style이라는 키워드를 사용해 css의 스타일 속성을 부여할 수 있다.

 

아래 캡처 하늘색 글자들이 전부 스타일 속성들!

pointerEvents라는 녀석을 주목해보도록 하자...

관련 포스팅 : https://webdir.tistory.com/506

CSS 이벤트 제어(pointer-events ) 속성

• none : 요소가 포인터 이벤트의 대상이 되지 않는다. 그러나 해당 요소의 자손이 다른 pointer-events 값을 지정한 경우, 그 자손은 대상이 될 수 있다.
• auto : 요소가 pointer-events 속성을 지정하지 않은 것처럼 행동한다.
• inherit : 부모 요소로부터 pointer-events 값을 상속받는다.

 

모든 이미지에서 포인터 이벤트(클릭, 드래그, 호버 등)를 비활성화한다.

img {
  pointer-events: none;
}