여러 아이콘으로 스크롤 가능한/줌 가능한지도를 최적화하는 방법은 무엇입니까?

Question

저는 현재 Phonegap을 사용하는 모바일 앱에서 작업하고 있습니다. 앱의 한 구성 요소는지도보기이며 Google지도가 아니라 자바 스크립트 (zynga-scroller)를 사용하여 스크롤/확대/축소 할 수있는 맞춤 그래픽입니다. 스크롤/확대/축소는 translate3d 및 scale을 통해 이루어집니다.

스크롤 가능/확대/축소 가능 이미지 위의 한 레이어에는 배율로 변환되지 않은 아이콘 및/또는 팝 오버가 있지만 좌표에 배율을 곱한 translate3d 만 있습니다.

스크롤/확대/축소시 계산이 계산되어 각 프레임의 각 요소에 적용되어야하므로 느린 장치에서는지도가 약간 느려집니다. 아이콘이 없거나 몇 개만 있으면 정말 빠릅니다.

은 지금까지 나는이 조금 최적화의 다음 생각했다 :

가 transformOrigin과 아이콘의 좌표를 설정하려고

• transformOrigin을, 그래서 난 단지에서 이러한 값을 업데이트 할 것 줌. transformOrigin은 백분율 값으로 만 작동하기 때문에 작동하지 않습니다. 다른 가능성이 없다면 나는 그것들을 계산할 수도있다.

내가 간과 한 것이 있습니까? 특정 요소에 축척을 적용하지 못하도록하는 속성이 있습니까?

Answer 1

내가 제대로 내 문제를 설명하면 모르겠지만, 지금은 다음과 같은 솔루션을 발견 :

지금 내가 맵 이미지 자체와 동일한 컨테이너에있는 모든 아이콘이 있습니다. 확대/축소 레벨 0.3으로 확대하면 scale(0.3)이 컨테이너에 적용됩니다. 이전의 아이콘 크기를 유지하려면 아이콘에 scale(1/zoomlevel)을 적용하여 눈금을 중화합니다.

확대/축소시 아이콘의 스타일 만 다시 계산하면되고 느린 장치에서는 (특히 스크롤 할 때)지도가 훨씬 더 반응적으로 느껴질 수 있습니다.