Implementando esboços e desenhos suaves no elemento <canvas>
Eu estou tentando criar uma área de desenho com tela. Estou tendo problemas para fazer com que as linhas pareçam suaves ao desenhar curvas e também altero a espessura da linha no meu algoritmo, o que também parece ruim, porque o tamanho também aumenta e você pode ver onde o tamanho mudou. Eu encontrei issolink no stackoverflow mas isso foi para um aplicativo nativo do iPhone e não consigo entender.
Aqui está o meu código JS atual. e aqui está correndono jsFiddle
<code>var xStart, xEnd, yStart, yEnd, paint, ctx; $(document).ready(function (){ ctx = $('canvas')[0].getContext("2d"); ctx.strokeStyle = '#000'; ctx.lineJoin="round"; ctx.lineCap="round"; ctx.lineWidth = 1; $('canvas').bind('mousedown mousemove mouseup mouseleave touchstart touchmove touchend', function(e){ var orig = e.originalEvent; if(e.type == 'mousedown'){ e.preventDefault(); e.stopPropagation(); xStart = e.clientX - $(this).offset().left; yStart = e.clientY - $(this).offset().top; xEnd = xStart; yEnd = yStart; paint = true; draw(e.type); }else if(e.type == 'mousemove'){ if(paint==true){ xEnd = e.clientX - $(this).offset().left; yEnd = e.clientY - $(this).offset().top; lineThickness = 1 + Math.sqrt((xStart - xEnd) *(xStart-xEnd) + (yStart - yEnd) * (yStart-yEnd))/5; if(lineThickness > 10){ lineThickness = 10; } ctx.lineWidth = lineThickness; draw(e.type); } }else if(e.type == 'mouseup'){ paint = false; }else if(e.type == 'mouseleave'){ paint = false; }else if(e.type == 'touchstart'){ if(orig.touches.length == 1){ e.preventDefault(); e.stopPropagation(); xStart = orig.changedTouches[0].pageX - $(this).offset().left; yStart = orig.changedTouches[0].pageY - $(this).offset().top; xEnd = xStart; yEnd = yStart; paint = true; draw(e.type); } }else if(e.type == 'touchmove'){ if(orig.touches.length == 1){ if(paint==true){ xEnd = orig.changedTouches[0].pageX - $(this).offset().left; yEnd = orig.changedTouches[0].pageY - $(this).offset().top; lineThickness = 1 + Math.sqrt((xStart - xEnd) *(xStart-xEnd) + (yStart - yEnd) * (yStart-yEnd))/6; if(lineThickness > 10){ lineThickness = 10; } ctx.lineWidth = lineThickness; draw(e.type); } } }else if(e.type == 'touchend'){ paint = false; } }); }); function draw(event){ if(event == 'mousedown'){ ctx.beginPath(); ctx.moveTo(xStart, yStart); ctx.lineTo(xEnd, yEnd); ctx.stroke(); }else if(event == 'mousemove'){ ctx.beginPath(); ctx.moveTo(xStart, yStart); ctx.lineTo(xEnd, yEnd); ctx.stroke(); }else if(event == 'touchstart'){ ctx.beginPath(); ctx.moveTo(xStart, yStart); ctx.lineTo(xEnd, yEnd); ctx.stroke(); }else if(event == 'touchmove'){ ctx.beginPath(); ctx.moveTo(xStart, yStart); ctx.lineTo(xEnd, yEnd); ctx.stroke(); } xStart = xEnd; yStart = yEnd; } </code>
Obrigado a todos antecipadamente.
Isto é o que parece agora se você desenhar.
... e é isso que eu adoraria alcançar: