2011-09-02 2 views
2

이것을 구현하는 방법에 대한 아이디어를 얻고 싶습니다. 여기 캔버스와 요소를 함께 스케일링

스케치입니다 :

sketch

설명 : 나는 (스케치 캔버스) 장면을 가지고의 2 개 패널을 가정 해 봅시다. Canvas는 DIV에서 위치를 상대적으로 배치하고, 패널은이 DIV 외부에 있으며이 DIV 위에 절대 위치를 갖는 요소가 있습니다. 이 모든 요소는 드래그 가능합니다. 모든 요소는 내부 캔버스가있는 div입니다.

문제 : 어떻게 든이 캔버스의 확대/축소를 구현해야합니다. 캔버스를 확대하고 (그리드가 그려져 있음) 요소가 확대/축소됩니다. 그것은 스케일링 될 수 있습니다. (비트 맵 스케일링 이후의 품질에 대해 알고 있습니다. 제 경우에는 받아 들일 수 있습니다.) 내가 어떻게 해결해야 할지를 정말로 모르는 유일한 문제는 캔버스와 그 위에있는 독립적 인 요소들을 어떻게 스케일링 할 것인가입니다. 우리는 장면이 스케일링된다는 환상을 가지고 있습니다. 당신이 내가하려는 일에 대한 아이디어를 얻었기를 바랍니다.

답변

1

대상 브라우저에서 CSS3 변환을 지원하는 경우 부동 div에 변형을 적용하여 캔버스에있는 것과 일치시킬 수 있습니다 (예 : 스타일을 transform: scale(1.5,1.5)으로 설정하십시오.

참고 : div가 캔버스와 절대 div로 묶여 overflow: hidden으로 설정하면 해당 영역에만 사물을 표시 할 수 있습니다.

관련 문제