Glatte Benutzer gezeichnete Linien in Leinwand

Ich bin mit <canvas> zum erfassen von Benutzereingaben in form einer Signatur und versuche herauszufinden, wie glatt der Eingabe von der Maus.

Ich glaube, ich brauche zum verarbeiten der Benutzer die Maus-Bewegungen werden chunk für chunk und glatt-jeder chunk, ich bin nicht nach super glätten aber auch keine Verbesserung auf den zerklüfteten input wäre gut.

Dank,
Daneben

  • Sie brauchen eine Signatur, die ist legal für, sagen wir, vertragliche Zwecke? Wenn dem so ist, wäre eine Signatur, die dadurch erzeugt werden, ausreichend?
InformationsquelleAutor dakine | 2010-09-24
  1. 13

    Nicht sicher, ob dies Ihnen helfen könnte,
    Ich schrieb diesen code von Grund auf in wenigen Minuten.

    Probieren Sie es http://jsbin.com/ateho3

    markup :

    <canvas id="canvas"></canvas>

    JavaScript :

    window.onload = function() {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var width  = window.innerWidth;
    var height = window.innerHeight;
    canvas.height = height;
    canvas.width = width;
    canvas.addEventListener('mousedown', function(e) {
      this.down = true;  
      this.X = e.pageX ;
      this.Y = e.pageY ;
      this.color = rgb();
    }, 0);
    canvas.addEventListener('mouseup', function() {
      this.down = false;      
    }, 0);
    canvas.addEventListener('mousemove', function(e) {
      this.style.cursor = 'pointer';
      if(this.down) {
          ctx.beginPath();
          ctx.moveTo(this.X, this.Y);
          ctx.lineCap = 'round';
           ctx.lineWidth = 3;
          ctx.lineTo(e.pageX , e.pageY );
          ctx.strokeStyle = this.color;
          ctx.stroke();

         this.X = e.pageX ;
         this.Y = e.pageY ;
      }
    }, 0);

    function rgb() {
      color = 'rgb(';
      for(var i = 0; i< 3; i++) {
        color += Math.floor(Math.random() * 255)+',';
      }
      return color.replace(/\,$/,')');
    }    
  };
    • +1 sehr cool für ein paar Minuten im Wert von Arbeit.
    • Dies hat nichts zu tun mit der curve-fitting/glätten - es zieht-line-Segmente verbunden.
    InformationsquelleAutor
  2. 4

    Hatte ich eine glatte Leinwand-Zeichnung für eine mobile web-Anwendung und gelernt einige Dinge.
    Die Antwort von Avinash ist toll, aber wenn Sie erhöhen Sie die Linienstärke, wenn Sie ziehen, werden Sie sehen, gestrichelte Linien. Es ist, weil die Linie Kappe ist rechteckig standardmäßig.

    Machen die Linie glatter ist, müssen Sie etwas zwicken ein bisschen.

    ctx.lineCap = 'round';

    diesem kleinen kniff wird Ihnen eine super glatte Linie.

    Mehr darüber wissen, versuchen Sie folgenden link

    https://developer.mozilla.org/samples/canvas-tutorial/4_6_canvas_linecap.html

    • Cool.. Sie nagelte ihn
    • es geht nicht mehr, kann man das lösen bitte?
    InformationsquelleAutor Hasanavi
  3. 2

    Wie über die Verwendung Bezier-Kurven?

    • Ich veränderte Avinash ' s Beispiel zu verwenden bezierCurveTo statt lineTo. Die Glättung wird mehr ausgesprochen, wenn Sie Probe zu jedem anderen Punkt. Auch ohne Glättung meiner Signatur ist nicht sehr "gezackt". Die Teile der Signatur mit der geringsten treue sind die Brutto-änderungen, die nicht wirklich geholfen glätten.
    • Hi @unclebrad, hast du deinen post geändert Beispiel irgendwo? Wir stehen vor dem gleichen problem. Danke!
    InformationsquelleAutor Richard Everett
  4. 1

    Ich noch nicht getestet, in irgendeiner Weise, aber Sie könnten versuchen, zeichnen kleine Kreise, die mit einem radialen Farbverlauf füllen.

    InformationsquelleAutor Castrohenge
  5. 0

    Überlegen dots mithilfe von Linien automatisch oder sogar verwenden Sie quadraticCurveTo, aber Sie müssen berechnen Sie den mittleren Punkt selbst.

    • Beispiel alle paar Pixel und dann ziehen Sie eine Linie sorta Sache? anstatt zu zeichnen jeden einzelnen Punkt, dass aufgezeichnet wird?
    InformationsquelleAutor Ming-Tang
Schreibe einen Kommentar