HTML5 tuval uygulamasında kullanıcı tarafından çizilen pürüzlü pürüzlü çizgiler.

Question

Kullanıcıların bir kalem aracı kullanarak çizgiler çizebileceği bir HTML5 çizim uygulamasına sahibiz.

Flash tabanlı çizim uygulamalarıyla karşılaştırıldığında, çizgiler biraz pürüzlü kenarlara sahip ve biraz bulanık görünüyor. Bunun nedeni, kullanıcıların çizerken çizgiyi mükemmel bir şekilde düz tutması gerektiğinden veya algoritmanın her piksel sapmasını algıladığından ve bunu pürüzlü bir kenar olarak yansıttığı için olur. Sonuç olarak düzgün, keskin daireler çizmek imkansızdır.

Her nasılsa, diğer çizim uygulamaları, kullanıcıların çizgiler çizmesine izin verirken (düz veya değil) bu pürüzlü kenarları düzeltebilir.

Bu satırları yumuşatmanın bir yolu var mı?

Demo (kalem aracını seçin): http://devfiles.myopera.com/articles/649/example5.html

Bizim app benzer bir kod kullanır. hatları veya vektörler gelince

Answer 1

lineJoin 'yuvarlak' kuadratik eğrileri kullanılarak hızlı bir şekilde bir örnek:

http://jsfiddle.net/NWBV4/10/

Answer 2

Bu yayının,

TL

Drawing GOOD LOOKING (like in Flash) lines on canvas (HTML5) - possible? istediğim şey ..; ctx bağlam

ctx.lineCap = "round" 

olduğu DR daha sonra SVG

kullanmak çizim

geçirmez

http://gentle-leaf-5790.herokuapp.com/

Answer 3

Sen çizilir hattında minimum uzunluğu zorlamak isteyebilirsiniz. Bunu yapmak için, o örnek kod kalem bölümünü alıp böyle bir şeyle değiştirmek:

İşte

tools.pencil = function() { 
    var tool = this; 
    // variables for last x, y and min_length of line 
    var lx; 
    var ly; 
    var min_length = 3; 
    this.started = false; 

    // This is called when you start holding down the mouse button. 
    // This starts the pencil drawing. 
    this.mousedown = function (ev) { 
     context.beginPath(); 
     context.moveTo(ev._x, ev._y); 
     tool.started = true; 
     // update last x,y coordinates 
     lx = ev._x; 
     ly = ev._y; 
    }; 

    // This function is called every time you move the mouse. Obviously, it only 
    // draws if the tool.started state is set to true (when you are holding down 
    // the mouse button). 
    this.mousemove = function (ev) { 

     if (tool.started && (Math.sqrt(Math.pow(lx - ev._x, 2) + Math.pow(ly - ev._y, 2)) > min_length)) { 
     context.lineTo(ev._x, ev._y); 
     context.stroke(); 
     lx = ev._x; 
     ly = ev._y; 
     } 
    }; 

    // This is called when you release the mouse button. 
    this.mouseup = function (ev) { 
     if (tool.started) { 
     tool.mousemove(ev); 
     tool.started = false; 
     img_update(); 
     } 
    }; 
    };