확대/축소 및/또는 패닝 후 픽셀로 표시되는 타임 라인에서 새로운 시작 및 끝을 얻는 방법

Question

하이 차트를 사용하고 있지만 핀치 확대/축소 기능이 내장되어 있으므로 사용할 수 없습니다. 그래서 series 요소를 조사하고 touch zoom/pan 이벤트를 푸는 속성을 변환하는 것에 의존하고 있습니다. 나는 정확한 정보를 읽었지만 나의 수학 능력은 그것을 정확하게 해석하는 일에 분명히 달려 있지 않다.

는 그래서 알려진 기간 startMs1 및 endMs, 사람들은 width에 걸쳐 적용되는 폭을 제공 알려진 시작 내가 결말 주어진 종료 시작과 시간을 계산하기 위해 노력하고있어, startoffset를 오프셋 (offset) 규모 endoffset 규모 scale 오프셋 > 1이 확대되고 배율 <1이 축소됩니다.

이 gif가 문제를 이해하는 데 도움이 되었기를 바랍니다. 당신이하려는 이유

Answer 1

나는 어떤 이유가 표시되지 않는 이유는 무엇입니까? 또는 귀하의 질문을 이해하지 못할 수도 있습니다. 그러나 zoom은 zoom으로 나누는 실제 값을 얻기 위해 모든 것을 곱하면됩니다. zoom.

비율도 사용할 수 있습니다.

var 〱 = document.querySelector.bind(document); 
 
var 卐 = window.getComputedStyle; 
 
var ლ = parseInt; 
 

 
var zoom = 1.3; 
 

 
var widthOfTimeline = ლ(卐(〱('#timeline')).width, 10); 
 
var widthOfTimelineZoomed = ლ(卐(〱('#timelineZoomed')).width, 10) * zoom; 
 
//wZoomed/woriginal = wOriginal/x 
 
//x = wOriginal * wOriginal/ wZoomed 
 
console.log(widthOfTimeline * widthOfTimeline/ widthOfTimelineZoomed); 
 

 
//zommed timeline's 200 units = 200units/ zoom in real timeline 
 
console.log(widthOfTimeline/zoom);

#timeline, #timelineZoomed{ 
 
    width: 200px; 
 
    height: 5px; 
 
    background-color: black; 
 
    margin:20px 5px; 
 
    } 
 

 
#timelineZoomed{ 
 
    zoom: 1.6; 
 
    }

<div id="timeline"></div> 
 
<div id="timelineZoomed"></div>