2013-07-13 5 views
4

KineticJS를 사용하여 HTML5 웹 응용 프로그램을 개발 중입니다. KineticJS에는 그룹화와 레이어링이 있습니다. 내가 아는 한 그들 사이에는 차이점이 없습니다. 차이점을 말해 줄 수 있어요?KineticJs의 그룹과 레이어의 차이점

답변

12

기본 차이점 : 그룹은 컨테이너이며 레이어는 구분 기호입니다.

그룹 :

  • 그룹이 내부 층 형태의 물체를위한 컨테이너이다.
  • 예를 들어 그룹에 원과 직사각형이 모두 포함될 수 있습니다.
  • 그룹을 조작 할 수 있으며 해당 그룹 내의 모든 요소를 ​​비슷하게 조작 할 수 있습니다.
  • 예를 들어, 그룹을 드래그하면 해당 그룹에 포함 된 원과 사각형을 동시에 끌 수 있습니다.

층 :

  • 레이어가 실제로 서로의 상부에 적층되어 별도의 캔버스 요소입니다.
  • 이것은 레이어가 Photoshop 및 Illustrator에서 작동하는 방식과 유사합니다.
  • 여러 레이어가 동시에 표시됩니다.
  • 다른 레이어의 객체가 겹치면 최상위 객체가 완전히 표시됩니다 (예 : z- 색인).

그룹은 그룹으로 조작 할 수 있도록 여러 항목을 포함하는 데 사용됩니다. 예를 들어 "stickman"을 만들기 위해 그룹에 원과 줄을 넣는 것과 같습니다. 그룹을 움직이면 모든 stickman 조각이 움직입니다.

레이어는 변경되지 않는 배경 레이어와 애니메이션이 발생하는 최상위 레이어와 같은 다른 항목을 구분하는 데 사용됩니다.

+6

또한 GitHub Readme의 레이어 및 그룹 구조에 대한 노드 계층 구조를 참조하는 것이 유용 할 수 있습니다. https://github.com/ericdrowell/KineticJS/wiki이 인용문에도 주목할 필요가 있습니다. "각 레이어에는 두 개의 캔버스 렌더러가 있으며, 장면 렌더러 및 히트 그래프 렌더러가 포함됩니다. " 성과가 현명 할 때 가능한 한 많은 항목을 그룹화하는 것이 현명합니다. 그리고 위의 예와 같이 다른 레이어가 있어야 의미가있을 때만 레이어를 최소화하여 레이어를 최소로 유지하십시오. – projeqht

+0

또한 마지막 두 단락에는 약간의 수정이 필요합니다. :) – projeqht

0

그룹은 단순히 요소 그룹이거나 어떤 식 으로든 정상적으로 쌓을 수 있습니다. 레이어 내에서.

레이어가 서로 다릅니다. 스테이지에 추가 할 수있는 캔버스 영역이 서로 쌓여 있습니다.

+0

마지막 문장이 잘못되었습니다. 레이어가 전체 스테이지를 차지할 필요는 없으므로 한 번에 여러 레이어를 표시 할 수 있습니다. 실제로 KineticJS 레이어에서는 AND 그룹이 투명하며 '채우기'속성을 가질 수 없습니다. 즉, 뷰포트 (캔버스/스테이지)에 있고 해당 레이어에 포함 된 모양으로 덮이지 않는 한 모든 레이어와 그룹이 항상 보이고 볼 수 있습니다. 이것은 또한 @ markE의 대답에서 더 정확하고 유익한 대답입니다. – projeqht

+0

@projeqht, 수정 됨. – Starx