J'ai les coordonnées xy d'avant et pendant un événement de glissement, this.x et this.y '' '' sont les coordonnées actuelles, this.lastX et this.lastY``` sont l'origine.
Ce que je dois faire, c'est donner un radian de l'élément source, déterminer la coordonnée de la souris à utiliser, c'est-à-dire si l'angle est 0 puis le x coordonnées est utilisé pour donner une "distance" si les degrés sont 90 alors les coordonnées y sont utilisées
si le radian est 0.785398 alors x et y devraient être utilisés.
J'ai le code suivant pour un axe, mais cela ne fait que retourner les coordonnées y
let leftPosition;
if (this.walls[this.dragItem.wall].angle < Math.PI / 2) {
leftPosition = Math.round((-(this.y - this.lastY) / this.scale + this.dragItem.origin.left));
} else {
leftPosition = Math.round(((this.y - this.lastY) / this.scale + this.dragItem.origin.left));
}
J'ai un exemple ici https://engine.owuk.co.uk
ce que je dois faire est que le radian dicte à quelle coordonnée x ou y est utilisée contrôler la traînée de l'élément en calculant la leftPosition, j'ai perdu la tête en essayant de faire fonctionner cela :(
3 Réponses :
Math.sin et Math.cos est ce dont vous avez besoin, voici un exemple
<canvas id="c" width=300 height=150></canvas>
<script>
const ctx = document.getElementById('c').getContext('2d');
function drawShape(size, angle, numPoints, color) {
ctx.beginPath();
for (j = 0; j < numPoints; j++) {
a = angle * Math.PI / 180
x = size * Math.sin(a)
y = size * Math.cos(a)
ctx.lineTo(x, y);
angle += 360 / numPoints
}
ctx.fillStyle = color;
ctx.fill();
}
ctx.translate(80, 80);
drawShape(55, 0, 7, "green");
drawShape(45, 0, 5, "red");
drawShape(35, 0, 3, "blue");
ctx.translate(160, 0);
drawShape(55, 15, 7, "green");
drawShape(45, 35, 5, "red");
drawShape(35, 25, 3, "blue");
</script>
ouais cela ne répond pas vraiment à la question j'ai besoin du x / y de la souris étant donné un angle, j'ai fait le cos / sin pour obtenir le tracé le x / y c'est le calcul de l'angle dans la souris donc un glisser sur x ou y est retourné à droite
c'est l'inverse de ce que vous suggérez, j'ai besoin de calculer le x / y de la souris pas dans le canevas.J'ai l'angle de l'élément du canevas dont j'ai besoin pour calculer l'utilisation x / y de la souris à partir de sa position du canevas pour que le glissement fonctionne
Dans votre question, vous avez dit: Ce que je dois faire, c'est donner un radian de l'élément source, déterminer quelle coordonnée de la souris utiliser ... sur mon exemple, "l'élément" est toujours à (0 , 0) et étant donné l'angle, je calcule la position ___ Si ce n'est pas ce dont vous avez besoin, pouvez-vous fournir une image clarifiant ce que vous essayez de calculer
s'il vous plaît voir ci-dessous, si vous cliquez sur l'élément surligné en vert, je sais que je devrai suivre les coordonnées x et y de la souris pour faire glisser l'élément, si vous choisissez l'élément sur le mur AI sait que ce ne sont que les coordonnées X et les murs C et E ce serait les coordonnées Y, ce que j'ai i.stack.imgur.com /AkCUC.jpg
Fondamentalement, je veux calculer une distance que la souris a déplacée dans l'angle défini par le mur, qui a été définie à partir des coordonnées x / y et convertie en position gauche
Ce n'est pas la distance entre deux points, disons que le mur est de 0 degré (mur A) pour déplacer l'élément dans le mur Je sais que j'ai besoin d'utiliser la position de la souris sur l'axe x, si l'angle du mur est de 45 degrés, je sais que je dois utilisez les axes x et y de la souris, si le mur est à 90 degrés, je sais que tout y est, mon problème est de savoir par programme quel axe de la souris suivre, en fonction de l'angle du mur, je dois serrer je dois utiliser x ou y selon l'angle du mur ...
J'ai essayé stackoverflow.com/questions/60507849/...
troisième tentative d'expliquer stackoverflow.com/questions/60514985/...
trouvé que la solution m'a pris 4 jours `laissez la position; const sin = Math.sin (this.walls [this.dragItem.wall] .angle); const cos = Math.cos (this.walls [this.dragItem.wall] .angle); position = Math.round (((this.x - this.lastX) / this.scale * cos + (this.y - this.lastY) / this.scale * sin) + this.dragItem.origin.left); ''
Accepter votre réponse car elle a fonctionné vers ma solution merci @Helder
Je jouais avec quelque chose ... créer des objets par rapport à la souris mais contraindre à un angle, peut-être que cela peut être utile dans votre travail: raw.githack.com/heldersepu/hs-scripts/master/HTML/...
Merci @Helder c'est très utile, je suis resté coincé sur mon problème pendant 4 jours, ne sachant pas comment poser la bonne question
J'ai pu trouver la solution à mon problème
let position; const sin = Math.sin(this.walls[this.dragItem.wall].angle); const cos = Math.cos(this.walls[this.dragItem.wall].angle); position = Math.round(((this.x - this.lastX) / this.scale * cos + (this.y - this.lastY) / this.scale * sin) + this.dragItem.origin.left);
Voici une réponse théorique à votre problème.
De la manière la plus simple, vous avez un objet dans un segment qui doit se déplacer par rapport à la position de la souris, mais contraint par le vecteur du segment.
Voici une représentation visuelle:
Ainsi, avec la souris sur la flèche rouge, le cercle bleu doit passer au bleu clair.
(la distance la plus courte entre une ligne et un point)
Comment faisons-nous cela?
Ajoutons tout ce que nous pouvons à cette image:
Le segment et la souris forment un triangle et nous pouvons calculer la longueur de tous les côtés de ce triangle.
La distance entre deux points est un calcul pythagoricien facile:
https://ncalculators.com/geometry/length-between-two- points-calculator.htm
Ensuite, nous avons besoin de la hauteur du triangle où la base est notre segment:
https: // tuteurs. com / math-tutors / geometry-help / comment-trouver-la-hauteur-d'un-triangle
Cela nous donnera la distance entre notre souris et le segment, et nous connaissons l'angle en ajoutant l'angle du segment + 90 degrés (ou PI / 2 en radians) qui est tout ce dont nous avons besoin pour calculer la position de notre cercle bleu clair.
Bien sûr, nous devrons également ajouter des calculs min / max pour ne pas dépasser les limites du segment, mais si vous êtes arrivé jusque-là, cela devrait être facile.
Vous allez faire beaucoup de mathématiques. Qu'en est-il des formes plus complexes? Avez-vous envisagé d'utiliser un canevas différent pour chaque couche? Ensuite, vous déplacez simplement le canevas en fonction de x, y.