'commit'
This commit is contained in:
@@ -117,30 +117,25 @@
|
|||||||
// 获取SVG路径的总长度
|
// 获取SVG路径的总长度
|
||||||
const pathLength = route.getTotalLength();
|
const pathLength = route.getTotalLength();
|
||||||
|
|
||||||
// 计算SVG坐标系到页面坐标系的转换比例
|
|
||||||
function getScaleFactor() {
|
|
||||||
const viewBox = route.viewBox.baseVal;
|
|
||||||
const svgRect = route.closest('svg').getBoundingClientRect();
|
|
||||||
return {
|
|
||||||
x: svgRect.width / viewBox.width,
|
|
||||||
y: svgRect.height / viewBox.height
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// 根据进度百分比获取路径上的点
|
// 根据进度百分比获取路径上的点
|
||||||
function getPointOnPath(percent) {
|
function getPointOnPath(percent) {
|
||||||
const distance = percent * pathLength / 100;
|
const distance = percent * pathLength / 100;
|
||||||
const point = route.getPointAtLength(distance);
|
const point = route.getPointAtLength(distance);
|
||||||
const scale = getScaleFactor();
|
|
||||||
|
|
||||||
// 获取SVG元素相对于页面的位置
|
// 将SVG坐标转换为页面坐标
|
||||||
const svgRect = route.closest('svg').getBoundingClientRect();
|
const svgPoint = route.ownerSVGElement.createSVGPoint();
|
||||||
|
svgPoint.x = point.x;
|
||||||
|
svgPoint.y = point.y;
|
||||||
|
|
||||||
|
const matrix = route.ownerSVGElement.getScreenCTM();
|
||||||
|
const transformedPoint = svgPoint.matrixTransform(matrix);
|
||||||
|
|
||||||
|
// 转换为相对于#map容器的坐标
|
||||||
const mapRect = map.getBoundingClientRect();
|
const mapRect = map.getBoundingClientRect();
|
||||||
|
|
||||||
// 计算红旗在页面上的位置
|
|
||||||
return {
|
return {
|
||||||
x: svgRect.left - mapRect.left + point.x * scale.x,
|
x: transformedPoint.x - mapRect.left,
|
||||||
y: svgRect.top - mapRect.top + point.y * scale.y
|
y: transformedPoint.y - mapRect.top
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user