Déplacement d'un Point le long d'une ligne dans Javascript Canvas
disons que j'ai les coordonnées d'une ligne (25,35 45,65, 30,85 - Il être une partie de la ligne). Je dois déplacer un point (voiture) le long de cette ligne à une distance constante chaque cadre. Comment puis-je faire cela?
3 réponses
considérer la ligne (25,35 45,65). Le vecteur du début à la fin est (20, 30). Pour déplacer un point (x, y) dans cette direction, nous pourrions simplement ajouter ce vecteur:
V = (20, 30) (x, y) = > (x+20, y+30).
si nous commençons au début de la ligne, nous arriverons à la fin. Mais c'est une étape trop grande. Nous voulons quelque chose de plus petit mais dans la même direction, donc nous multiplions le vecteur par, disons, 0,1:
V = (2, 3) (x, y) = > (x+2, y+3) = > (x+4, y+6) => ...
C'est pratique pour normaliser, c'est-à-dire faire sa longueur 1, ce que nous faisons en divisant par sa longueur:
V => V / / V / = (2,3) / sqrt(22 + 32) = (7.21, 10.82)
alors vous pouvez simplement multiplier cela par la taille de pas que vous voulez.
Hey, si vous avez les coordonnées (25,35) (45,65) (30,85) pour vos 2 lignes, Le point que vous souhaitez déplacer va être placée à la première de ces coordonnées (25,35) et vous souhaitez déplacer vers la deuxième coordonnée (45,65) (à la fin du premier segment de ligne).
la première étape est d'obtenir l'orientation dans laquelle le point va se déplacer, l'orientation est l'angle entre la position du point et la position de la cible. Pour trouver cet angle, vous pouvez utiliser le Math.atan2(), en passant comme premier argument le target position Y - the point position Y, et comme second argument le target position X - the point position X.
var Point = {X: 25, Y: 35};
var Target = {X:45, Y:65};
var Angle = Math.atan2(Target.Y - Point.Y, Target.X - Point.X);
maintenant, obtenir le sinus et le cosinus de cet angle, le sinus est la valeur pour se déplacer le long de l'axe des Y, et le cosinus est combien pour se déplacer sur l'axe des X. Multipliez le sinus et le cosinus par la distance que vous souhaitez déplacer chaque image.
var Per_Frame_Distance = 2;
var Sin = Math.sin(Angle) * Per_Frame_Distance;
var Cos = Math.cos(Angle) * Per_Frame_Distance;
Ok, ce qui reste à faire maintenant est de configurer la méthode de redessination où vous ajoutez le sinus à la position Y du point et le cosinus à la position X du point position à chaque appel. Vérifier si le point est arrivé à sa destination, puis faire le même processus pour se déplacer vers la fin du segment de la deuxième ligne.
parfois, il n'est pas si évident de traduire une formule mathématique en code. Ce qui suit est une implémentation d'une fonction qui déplace un point spécifié distance le long d'une ligne. Il utilise la notation vectorielle:
function travel(x, y, dx, x1, y1, x2, y2)
{
var point = new Vector(x, y),
begin = new Vector(x1, y1),
end = new Vector(x2, y2);
return end.sub(begin).norm().mul(dx).add(point);
}
class Vector
{
constructor(x = 0, y = 0) {
this.x = x;
this.y = y;
}
clone() {
return new this.constructor(this.x, this.y);
}
add(v) {
this.x += v.x;
this.y += v.y;
return this;
}
sub(v) {
this.x = this.x - v.x;
this.y = this.y - v.y;
return this;
}
mul(x) {
this.x *= x;
this.y *= x;
return this;
}
div(x) {
this.x /= x;
this.y /= x;
return this;
}
get mag() {
return Math.sqrt(this.x * this.x + this.y * this.y);
}
norm() {
var mag = this.mag;
if (mag > 0) {
this.div(mag);
}
return this;
}
}
Et une version sans Vector catégorie:
function travel(x, y, dx, x1, y1, x2, y2)
{
var a = {x: x2 - x1, y: y2 - y1},
mag = Math.sqrt(a.x*a.x + a.y*a.y);
if (mag == 0) {
a.x = a.y = 0;
}
else {
a.x = a.x/mag*dx;
a.y = a.y/mag*dx;
}
return {x: x + a.x, y: y + a.y};
}