Tracer une ligne sur la souris glisser sur une toile chargée avec une image

J'ai une toile chargée avec une image.
Maintenant, je veux marquer des lignes sur une partie de l'image.
Donc, j'ai écrit du code qui dessine une ligne sur la souris.Tracer une ligne sur la souris glisser sur une toile chargée avec une image

function drawLine(x, y) { 
    ctx.beginPath(); 
    ctx.moveTo(startX, startY); 
    ctx.lineTo(x, y); 
    ctx.closePath(); 
    ctx.stroke(); 
    ctx.restore(); 
} 

canvas.onmousedown = function (e) { 
    ctx.save(); 
    e.preventDefault(); 
    e.stopPropagation(); 
    startX = parseInt(e.clientX - offsetX); 
    startY = parseInt(e.clientY - offsetY); 
    isDown = true; 
} 
canvas.onmousemove = function (e) { 
    if (!isDown) { 
     return; 
    } 
    e.preventDefault(); 
    e.stopPropagation(); 
    mouseX = parseInt(e.clientX - offsetX); 
    mouseY = parseInt(e.clientY - offsetY); 
    drawLine(mouseX, mouseY); 
} 
canvas.onmouseup = function (e) { 
    if (!isDown) { 
     return; 
    } 
    e.preventDefault(); 
    e.stopPropagation(); 
    isDown = false; 
}

Le problème est maintenant que le glisser crée une série de lignes au lieu d'une.
J'ai essayé de sauvegarder le contexte avant de dessiner et de le restaurer après avoir dessiné, mais cela n'a pas aidé.

Notez que, je ne peux pas effacer le canevas en utilisant clearRect(), car mes données d'image seront perdues. Ici, j'ai utilisé une image fictive. J'ai créé un code fiddle.

Toute aide serait appréciée.

Cordialement,
Rohith

Source

2014-05-13 Rohith

mais non reliés vous essayez de créer un éditeur d'image? Si oui, je suggère que vous consultez paper.js –

Non, Ceci est une visionneuse d'images médicales. – Rohith

Jetez un oeil ici http://jsfiddle.net/s34PL/2/ –

Une façon de le faire est de sauvegarder tous vos drag-lignes dans un tableau de glisser-lignes. De cette façon, vous pouvez effacer le canevas et redessiner l'image et redessiner toutes les lignes accumulées.

Exemple de code et une démonstration: http://jsfiddle.net/m1erickson/bH38a/

Les lignes vertes sont mes ajouts (totalement non médical!). BTW, cet exemple réduit l'opacité de l'image d'arrière-plan de sorte que les lignes sont plus visibles (une technique pratique).

enter image description here

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<style> 
    body{ background-color: ivory; } 
    #canvas{ 
     border:1px solid red; 
    } 
</style> 
<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 
    var canvasOffset=$("#canvas").offset(); 
    var offsetX=canvasOffset.left; 
    var offsetY=canvasOffset.top; 

    var startX,startY,mouseX,mouseY; 
    var isDown=false; 

    var lines=[]; 

    var imageOpacity=0.33; 

    var img=new Image(); 
    img.crossOrigin="anonymous"; 
    img.onload=start; 
    img.src="https://dl.dropboxusercontent.com/u/139992952/multple/heart.jpg"; 
    function start(){ 

     canvas.width=canvas.width=img.width; 
     canvas.height=img.height; 
     ctx.strokeStyle="green"; 
     ctx.lineWidth=3; 

     $("#canvas").mousedown(function(e){handleMouseDown(e);}); 
     $("#canvas").mousemove(function(e){handleMouseMove(e);}); 
     $("#canvas").mouseup(function(e){handleMouseUp(e);}); 
     $("#canvas").mouseout(function(e){handleMouseUp(e);}); 

     // redraw the image 
     drawTheImage(img,imageOpacity); 

    } 

    function drawLines(toX,toY){ 
     // clear the canvas 
     ctx.clearRect(0,0,canvas.width,canvas.height); 

     // redraw the image 
     drawTheImage(img,imageOpacity); 

     // redraw all previous lines 
     for(var i=0;i<lines.length;i++){ 
      drawLine(lines[i]); 
     } 

     // draw the current line 
     drawLine({x1:startX,y1:startY,x2:mouseX,y2:mouseY}); 
    } 

    function drawTheImage(img,opacity){ 
     ctx.globalAlpha=opacity; 
     ctx.drawImage(img,0,0); 
     ctx.globalAlpha=1.00; 
    } 

    function drawLine(line){ 
     ctx.beginPath(); 
     ctx.moveTo(line.x1, line.y1); 
     ctx.lineTo(line.x2, line.y2); 
     ctx.stroke(); 
    } 




    function handleMouseDown(e){ 
     e.stopPropagation(); 
     e.preventDefault(); 
     mouseX=parseInt(e.clientX-offsetX); 
     mouseY=parseInt(e.clientY-offsetY); 

     // Put your mousedown stuff here 
     startX=mouseX; 
     startY=mouseY; 
     isDown=true; 
    } 

    function handleMouseUp(e){ 
     e.stopPropagation(); 
     e.preventDefault(); 

     // Put your mouseup stuff here 
     isDown=false; 
     lines.push({x1:startX,y1:startY,x2:mouseX,y2:mouseY}); 
    } 

    function handleMouseMove(e){ 
     if(!isDown){return;} 
     e.stopPropagation(); 
     e.preventDefault(); 
     mouseX=parseInt(e.clientX-offsetX); 
     mouseY=parseInt(e.clientY-offsetY); 

     // Put your mousemove stuff here 
     drawLines(mouseX,mouseY); 

    } 


    $("#save").click(function(){ 
     var html="<p>Right-click on image below and Save-Picture-As</p>"; 
     html+="<img src='"+canvas.toDataURL()+"' alt='from canvas'/>"; 
     var tab=window.open(); 
     tab.document.write(html); 
    }); 


}); // end $(function(){}); 
</script> 
</head> 
<body> 
    <h4>Drag-draw lines.</h4> 
    <button id="save">Export Image</button><br> 
    <canvas id="canvas"></canvas> 
</body> 
</html>

Source

2014-05-13 16:44:27 markE

Merci pour la réponse. Oui, je sauvegarde les formes dans un tableau. J'ai sauté l'image de chargement et de dessiner plusieurs formes dans cet exemple pour rendre ce code petit. – Rohith

L'effacement et le dessin de l'image sur le canevas n'affectent-ils pas les performances? – Rohith

Redessiner une image existante est étonnamment rapide. C'est parce que tout ce qui se passe est la copie de pixels séquentiels (octets de mémoire) d'un endroit à l'autre. Incroyablement rapide ... et encore plus rapide si vous avez une unité de traitement graphique sur l'ordinateur. – markE

Tracer une ligne sur la souris glisser sur une toile chargée avec une image

Répondre

Questions connexes