如何在缩放 and/or 平移后在以像素表示的时间轴上获得新的开始和结束

Question

我正在使用 highcharts，但无法使用它们内置的捏合缩放功能，因为它没有显示我需要的正确操作，所以我依赖于调查系列元素和转换属性来实现触摸zoom/pan 事件。我已经正确阅读了信息，但我的数学技能显然无法正确解释它。

所以给定一个已知的时间段 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>

如何在缩放 and/or 平移后在以像素表示的时间轴上获得新的开始和结束

How to get the new start and end on a timeline represented in pixels after zooming and/or panning

javascript

math

zooming