I've been trying to build small telemetry script for my project.Below you can find 2 things. Screenshot and code regarding the player icon movement on the map. So the part I'm having issues is, when I want to move the player icon on the map, I want the chart to highlight me the data regarding driver position.Have not implement the data yet but as you may guess it will be value - time-related.
Can you help me with this matter?
<script>
var DEG = 180 / Math.PI;
var drag = document.querySelector("#drag");
var path = document.querySelector("#path");
var pathLength = path.getTotalLength() || 0;
var startPoint = path.getPointAtLength(0);
var startAngle = getRotation(startPoint, path.getPointAtLength(0.1));
TweenLite.set(drag, {
transformOrigin: "center",
rotation: startAngle + "_rad",
xPercent: 0,
yPercent: 0,
x: startPoint.x,
y: startPoint.y
});
var draggable = new Draggable(drag, {
liveSnap: {
points: pointModifier
}
});
TweenLite.set(".container", {
autoAlpha: 1
});
function pointModifier(point) {
var p = closestPoint(path, pathLength, point);
TweenLite.set(drag, {
rotation: p.rotation
});
return p.point;
}
function closestPoint(pathNode, pathLength, point) {
var precision = 8,
best,
bestLength,
bestDistance = Infinity;
// linear scan for coarse approximation
for (var scan, scanLength = 0, scanDistance; scanLength <= pathLength; scanLength += precision) {if (window.CP.shouldStopExecution(1)){break;}
if ((scanDistance = distance2(scan = pathNode.getPointAtLength(scanLength))) < bestDistance) {
best = scan, bestLength = scanLength, bestDistance = scanDistance;
}
}
window.CP.exitedLoop(1);
// binary search for precise estimate
precision /= 2;
while (precision > 0.5) {if (window.CP.shouldStopExecution(2)){break;}
var before,
after,
beforeLength,
afterLength,
beforeDistance,
afterDistance;
if ((beforeLength = bestLength - precision) >= 0 && (beforeDistance = distance2(before = pathNode.getPointAtLength(beforeLength))) < bestDistance) {
best = before, bestLength = beforeLength, bestDistance = beforeDistance;
} else if ((afterLength = bestLength + precision) <= pathLength && (afterDistance = distance2(after = pathNode.getPointAtLength(afterLength))) < bestDistance) {
best = after, bestLength = afterLength, bestDistance = afterDistance;
} else {
precision /= 2;
}
}
window.CP.exitedLoop(2);
var len2 = bestLength + (bestLength === pathLength ? -0.1 : 0.1);
var rotation = getRotation(best, pathNode.getPointAtLength(len2));
return {
point: best,
rotation: rotation * DEG,
// distance: Math.sqrt(bestDistance),
};
function distance2(p) {
var dx = p.x - point.x,
dy = p.y - point.y;
return dx * dx + dy * dy;
}
}
function getRotation(p1, p2) {
var dx = p2.x - p1.x;
var dy = p2.y - p1.y;
return Math.atan2(dy, dx);
}
</script>
Aucun commentaire:
Enregistrer un commentaire