Как получить новый старт и конец на временной шкале, представленной в пикселях после масштабирования и/или панорамирования

Question

Я использую высокопроизводительные диаграммы, но не могу использовать их встроенный материал с масштабированием, потому что он не показывает правильные действия, которые мне нужны поэтому я полагаюсь на исследование элемента серии и атрибута transform, чтобы вытащить событие масштабирования/панорамирования. У меня есть правильное чтение информации, но мои математические навыки, по-видимому, не соответствуют правильной интерпретации.

Так дали известный период времени startMs1 и endMs, ширина тех применяются более width, известный Отправной смещение startoffset, я пытаюсь вычислить окончание начала и время, отпущенное окончание смещения endoffset и масштаб scale где масштаб > 1, а масштаб < 1 масштабируется.

Надеюсь, этот gif поможет вам разобраться в проблеме?

Answer 1

Я не вижу никаких причин, почему вы хотите этого? Или, может быть, я не понимаю ваш вопрос. Но масштабирование просто умножает все на 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>