IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

[SVG] Ajouter n pixels par rapport à un point sur un segment.


Sujet :

JavaScript

  1. #1
    Membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2015
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 30
    Localisation : France, Vaucluse (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2015
    Messages : 7
    Par défaut [SVG] Ajouter n pixels par rapport à un point sur un segment.
    Bonjour à tous et à toutes,

    Je développe actuellement ma première application en utilisant SVG (tout nouveau pour moi) et après avoir réussi à trouver la valeur de tous les angles avec le théorème d'Al Kashi, je souhaite maintenant positionner correctement le texte correspondant à cette valeur.

    Nom : 1.jpg
Affichages : 191
Taille : 106,7 Ko
    Comme vous pouvez le voir sur l'image ci-dessus, j'ai besoin d'ajouter deux points (en jaune), tout deux, d'une distance égale par rapport à A (peut-importe l'angle) mais je ne trouve aucune formule me permettant de faire cela tout en créant les coordonnées X,Y de ces deux points.
    Par la suite je n'aurais qu'à faire un nouveau point au milieu des deux points jaunes qui sera le point de repère pour y afficher le texte.
    Les coordonnées X et Y des points A, B et C sont bien entendu connus ainsi que les distances entres eux.

    A savoir que le point A peut-être déplacé par l'utilisateur, du coup le triangle ne sera plus le même, exemple ci-dessous.


    Nom : 2.jpg
Affichages : 140
Taille : 22,4 KoNom : 3.jpg
Affichages : 161
Taille : 54,3 Ko

    Auriez-vous une formule me permettant de créer ces deux points jaunes (par exemple à une distance de 35px) par rapport au point A.

    Je ne sais pas si c'est assez clair mais si vous avez des questions j'y répondrai.

    Merci d'avance pour vos réponses.

  2. #2
    Expert confirmé
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 599
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 599
    Par défaut
    Je pense que vous aurez besoin du théorème de Thales.
    Si par exemple on appelle N le point jaune du bas et Nx l'abscisse de ce point.
    donc d'après Thales : AN / AC = |AxNx| / |AxCx|

    on connait déjà la distance AN = n donc la distance |AxNx| = n / AC × |AxCx|
    et à partir de ça vous aurez l'abscisse du point N et ensuite vous faite la même chose avec l'ordonnée du point N

  3. #3
    Membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2015
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 30
    Localisation : France, Vaucluse (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2015
    Messages : 7
    Par défaut
    Bonjour Mathieu et merci pour ta réponse.
    J'ai essayer cette formule pour trouver l'abscisse mais le résultat n'est pas correct.

    Nom : 4.jpg
Affichages : 150
Taille : 68,8 Ko

    J'ai ajouter les valeurs sur le triangle afin d'y voir plus clair.
    Comme tu m'as dit, j'ai appliquer la formule comme ceci (en reprenant les valeurs de l'image) : 50 / 407 x (524 x 117) ce qui me donne le résultat suivant : 7531.
    Ce que je ne comprends pas bien, c'est que faire maintenant avec cette valeur là ?
    Images attachées Images attachées  

  4. #4
    Expert confirmé
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 599
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 599
    Par défaut
    ce que j'appelle |AxCx| est la distance de l'abscisse de A à l'abscisse de C donc (524 - 117) = 407
    il y a aussi une erreur sur le schéma, pour la distance de A à C, d'après les coordonnées, AC vaut environ 407,594

    donc |AxNx| est 50 / 407,594 * 407 = 49,92
    et donc l'abscisse de N est à 524 - 49,92 = 474,07 environ

  5. #5
    Membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2015
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 30
    Localisation : France, Vaucluse (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2015
    Messages : 7
    Par défaut
    Ah oui d'accord, effectivement c'est tout à fait mieux avec une soustraction de AxCx !
    Je te remercie énormément, tout fonctionne correctement maintenant.

    Très bonne journée à toi.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [Élaboration] Ajout de propriété par rapport au Model
    Par luc2verga dans le forum Architecture
    Réponses: 6
    Dernier message: 21/02/2012, 14h27
  2. [Élaboration] Question d'architecture, ajout de propriété par rapport à la couche Business
    Par Oberown dans le forum Architecture
    Réponses: 7
    Dernier message: 24/11/2011, 17h03
  3. Réponses: 11
    Dernier message: 27/10/2009, 17h12
  4. rotation par rapport à un point
    Par marcololo dans le forum DirectX
    Réponses: 8
    Dernier message: 03/06/2005, 15h36

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo