geraden Linie zwischen zwei Punkten

Auf einem HTML-canvas-ich habe mehrere Punkte, beginnend von 1 bis N, das ist im Grunde eine Verbindung herstellen Anwendung und aktiviert ist, auf touchstart.

Es ist Validierung so, dass Sie nur verbinden Sie die Punkte von 1 und gehe zu 2 (.. n). Das Problem ist, dass jetzt gibt es keine Bestätigung, dass die Linie eine gerade Linie ist, und ich bin auf der Suche nach einem Algorithmus, um dies zu tun, Hier ist, was ich dachte, so weit

  1. Für 2 Punkte (x1,y1) nach (x2,y2) erhalten alle Koordinaten durch das finden der Steigung und mit Hilfe der Formel y = mx + b
  2. auf touchmove Holen Sie sich die x -, y-co-oridnates und stellen Sie sicher, es ist einer der Punkte aus dem vorherigen Schritt und ziehen Sie eine Linie sonst nicht die Grenze ziehen.

Gibt es einen besseren Weg, dies zu tun, oder sind es verschiedene Ansätze, die ich nehmen kann ?

  • Zu klären: wollen Sie die Punkte verbinden sich, oder wollen Sie, um sicherzustellen, dass der Benutzer hat die Punkte verbunden, richtig?
  • Jelvis ich möchte sicherstellen, dass der Nutzer hat die Punkte verbunden
  • Gut, das zu tun, können Sie einfach meine Antwort, gehen durch alle Koordinaten und ruft isValid auf Sie. Möglicherweise möchten Sie den Benutzer zu geben ein bisschen Spielraum, da die Zeichnung eine 100% gerade Linie ist schwierig.
InformationsquelleAutor user94437 | 2011-05-06
  1. 3

    Edit: ich ursprünglich falsch verstanden, die Frage ist, wie es scheint.

    So weit, überprüfen Sie den Pfad: ich denke, es wäre einfacher, nur um eine Funktion, die bestimmt, ob ein Punkt gilt als der Berechnung alle Werte vorher. So etwas wie:

    function getValidatorForPoints(x1, y1, x2, y2) {
    var slope = (y2 - y1) / (x2 - x1);
    return function (x, y) {
        return (y - y1) == slope * (x - x1);
    }
}

    Dann, da zwei Punkte, Sie könnten dies tun:

    var isValid = getValidatorForPoints(x1, y1, x2, y2);
var x = getX(), y = getY();//getX and getY get the user's new point.
if (isValid(x, y)) {
    //Draw
}

    Dieser Ansatz gibt Ihnen auch eine gewisse Flexibilität—man kann Sie immer ändern Sie die Funktion zu wenig präzise, um Platz für Leute, die nicht ganz eine gerade Linie zeichnen, sind aber ziemlich in der Nähe.

    Präzision:
    Wie bereits in meinem Kommentar können Sie ändern, wie die Funktion verhält sich, um es weniger anspruchsvoll. Ich denke, ein guter Weg, dies zu tun ist wie folgt:

    Momentan sind wir mit dem Formel -(y - y1) == slope * (x - x1). Dies ist das gleiche wie (slope * (x - x1)) - (y - y1) == 0. Wir können ändern Sie die null, um einige positive Zahl zu machen, akzeptieren-Punkte "in der Nähe" der gültige Zeile etwa so:

    Math.abs((slope * (x - x1)) - (y - y1)) <= n

    Hier n änderungen, wie nahe der Punkt muss auf die Linie, um zu zählen.

    Ich bin mir ziemlich sicher, dass dies funktioniert wie beworben und hilft Konto für Menschen zeichnen Sie die Linie ein wenig krumm und schief, aber jemand sollte double check meine Mathe -.

    • ich bin mir ziemlich sicher, dies hat nichts mit der Frage zu tun.
    • Ich denke, vielleicht habe ich falsch verstanden, die Frage. Oops.
    • Ich habe bearbeitet es mittlerweile davon aus, dass der Fragesteller will, um zu überprüfen, ob ein gegebener Punkt auf einer geraden Linie zwischen zwei Punkten jetzt. Hoffentlich Verstand ich die Frage richtig dieser Zeit.
    • Jelvis vielen Dank für die Lösung, es ist sehr elegant, Wie mache ich es weniger präzise ? jegliche Hinweise.
    • Gut, jetzt sind wir überprüfen, dass (y - y1) und (slope * (x - x1)) gleich sind. Dies ist das gleiche wie (slope * (x - x1)) - (y - y1) == 0. Ich denke, dass können Sie nur so etwas wie Math.abs((slope * (x - x1)) - (y - y1)) <= num wo num legt fest, wie ungenau Sie wollen die Funktion zu sein.
    • Das heißt, Sie sollten überprüfen Sie meine math.
    • Würden Sie nicht bekommen, eine division durch null bei der Berechnung der Steigung, wenn x1 == x2?
    • Ja, ich denke, du hast Recht. Ich denke, die beste Lösung wäre zu überprüfen, ob und Rückkehr eine beliebig hohe Steigung, wenn x1 == x2.

    InformationsquelleAutor Tikhon Jelvis
  2. 2
    function drawGraphLine(x1, y1, x2, y2, color) {

    var dist = Math.ceil(Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2)));
    var angle = Math.atan2(y2-y1, x2-x1)*180/Math.PI;
    var xshift = dist - Math.abs(x2-x1);
    var yshift = Math.abs(y1-y2)/2;

    var div = document.createElement('div');
    div.style.backgroundColor = color;
    div.style.position = 'absolute';
    div.style.left = (x1 - xshift/2) + 'px';
    div.style.top = (Math.min(y1,y2) + yshift) + 'px';
    div.style.width = dist+'px';
    div.style.height = '3px';
    div.style.WebkitTransform = 'rotate('+angle+'deg)';
    div.style.MozTransform = 'rotate('+angle+'deg)';

}

    //Mit Tomer Almog

    • Sollten Sie eine Erklärung für Ihre Funktion
    • Dies beantwortet nicht die ursprüngliche Frage, sondern auch braucht keine Erklärung. Er sagt: "verwenden Sie html statt der Leinwand, um eine Linie"
    InformationsquelleAutor user2044457
Schreibe einen Kommentar