Javascript HTML5 Leinwand Zeichnung transparente Kreise

Ich muss eine Funktion haben, um mehrere Kreise auf Leinwand zu zeichnen, beginnend mit mousedown bei center = x, y und ziehen Maus auf deltaX, deltaY und somit Radius r, für jeden Kreis. Die Kreise können keine Füllung haben (müssen transparent sein), damit der Benutzer deutlich sehen kann, wo die Kreise abschneiden. Mein aktueller Code zeichnet Kreise, während die Maus gezogen wird, und das wird erwartet, aber sie hinterlässt auch diese zusätzlichen Kreise. Ich muss nur den Kreis auf mouseup verlassen. Jede Hilfe wird geschätzt. Vielen Dank :).Javascript HTML5 Leinwand Zeichnung transparente Kreise

<html> 
 

 
<head> 
 

 
</head> 
 

 
<body style="margin:0"> 
 
<canvas id="canvas" width="500" height="500" style="border:1px solid"></canvas> 
 

 
<script> 
 

 
var canvas=document.getElementById('canvas'); 
 
var context=canvas.getContext('2d'); 
 
var radius=50; 
 
var nStartX = 0; 
 
var nStartY = 0; 
 
var bIsDrawing = false; 
 
var putPoint = function(e){ 
 
    nStartX = e.clientX;nStartY = e.clientY; 
 
    bIsDrawing = true; 
 
    radius = 0; 
 
} 
 
var drawPoint = function(e){ 
 
    if(!bIsDrawing) 
 
    return; 
 
    
 
    var nDeltaX = nStartX - e.clientX; 
 
    var nDeltaY = nStartY - e.clientY; 
 
    radius = Math.sqrt(nDeltaX * nDeltaX + nDeltaY * nDeltaY) 
 
    context.beginPath(); 
 
    context.arc(nStartX, nStartY, radius, 0, Math.PI*2); 
 
    context.strokeStyle="#000000"; 
 
    //context.fillStyle="#FFFFFF"; 
 
    context.fillStyle = 'rgba(0, 0, 0, 0)'; 
 
    context.stroke(); 
 
    context.fill(); 
 
} 
 
var stopPoint = function(e){ 
 
    //context.clip(); 
 
    //context.clearRect(0, 0, canvas.width, canvas.height); 
 
    bIsDrawing = false; 
 
} 
 
canvas.addEventListener('mousedown',putPoint); 
 
canvas.addEventListener('mousemove',drawPoint); 
 
canvas.addEventListener('mouseup',stopPoint); 
 

 
</script> 
 
</body> 
 

 
</html>

Quelle

2016-04-14 Sobra

Verwenden Sie zwei Leinwand. Auf dem * obersten * zeichnest du den aktuell behandelten Kreis und löschst ihn im Intervall. Auf dem * unteren * zeichnest du das Endergebnis ohne zu löschen. Oder verfolgen Sie alle Kreise und streichen Sie ständig neu. – Yoshi

Ich habe auch eine Geige dafür, wenn Ihr Kreis Ellipse sein kann http://jsfiddle.net/xXqsu/2/ –

Sie müssen den Überblick über die Kreise halten (und andere Objekte), die Sie gezeichnet haben - ein Weg, um sie in ein Array auf mouseup zu schieben wäre. Vor jeder Verlosung sollte eine Leinwand frei sein und die gespeicherten Kreise neu gezeichnet werden.

var circles = []; 
...

die Leinwand Clearing

... 
radius = Math.sqrt(nDeltaX * nDeltaX + nDeltaY * nDeltaY) 
context.clearRect(0, 0, canvas.width, canvas.height); 
...

Zeichnung gespeichert Kreise

... 
context.fill(); 
// drawing saved circles 
circles.forEach(function(circle){ 
    context.beginPath(); 
    context.arc(circle.nStartX, circle.nStartY, circle.radius, 0, Math.PI*2); 
    context.strokeStyle="#000000"; 
    context.fillStyle="#FFFFFF"; 
    context.fillStyle = 'rgba(0, 0, 0, 0)'; 
    context.stroke(); 
    context.fill(); 
}) 
...

abgeschlossen Saving

Kreise

... 
bIsDrawing = false; 
// saving completed circles 
var nDeltaX = nStartX - e.clientX; 
var nDeltaY = nStartY - e.clientY; 
radius = Math.sqrt(nDeltaX * nDeltaX + nDeltaY * nDeltaY); 
circles.push({ nStartX: nStartX, nStartY: nStartY, radius: radius }); 
...

Fiddle - https://jsfiddle.net/9x77sg2h/

Quelle

2016-04-14 12:32:44 potatopeelings

Um auf meinen Kommentar aufzubauen, hier ist ein Beispiel für die Verfolgung aller Kreise. Es ist im Grunde das gleiche wie Potatopeelings Antwort, obwohl ich die Verwendung von requestAnimationFrame zeigen wollte, um unabhängig vom Benutzerverhalten neu zu zeichnen.

var canvas = document.getElementById('canvas'); 
 
var context = canvas.getContext('2d'); 
 
var circles = []; 
 
var currentCircle = null; 
 

 
requestAnimationFrame(function draw() { 
 
    drawCircles(); 
 
    requestAnimationFrame(draw); 
 
}); 
 

 
function putPoint(e){ 
 
    currentCircle = { 
 
     center: { 
 
      x: e.clientX - this.offsetLeft + window.scrollX, 
 
      y: e.clientY - this.offsetTop + window.scrollY 
 
     } 
 
    }; 
 
} 
 

 
function drawPoint(e) 
 
{ 
 
    if (null !== currentCircle) { 
 
     currentCircle.radius = Math.sqrt(
 
       Math.pow(currentCircle.center.x - e.clientX + this.offsetLeft - window.scrollX, 2) 
 
      + Math.pow(currentCircle.center.y - e.clientY + this.offsetTop - window.scrollY, 2) 
 
     ); 
 
    } 
 
} 
 

 
function drawCircles() 
 
{ 
 
    // clear canvas 
 
    context.clearRect(0, 0, canvas.width, canvas.height); 
 

 
    // previous 
 
    circles.forEach(drawCircle); 
 

 
    // current 
 
    if (null !== currentCircle) { 
 
     drawCircle(currentCircle); 
 
    } 
 
} 
 

 
function drawCircle(circle) 
 
{ 
 
    context.save(); 
 
    context.beginPath(); 
 
    context.arc(circle.center.x, circle.center.y, circle.radius, 0, 2 * Math.PI); 
 
    context.strokeStyle= '#000000'; 
 
    context.fillStyle = 'rgba(0, 0, 0, 0)'; 
 
    context.stroke(); 
 
    context.fill(); 
 
    context.restore(); 
 
} 
 

 
function stopPoint() 
 
{ 
 
    if (null !== currentCircle) { 
 
     circles.push(currentCircle); 
 
     currentCircle = null; 
 
    } 
 
} 
 

 
canvas.addEventListener('mousedown', putPoint, false); 
 
canvas.addEventListener('mousemove', drawPoint, false); 
 
canvas.addEventListener('mouseup', stopPoint, false);

<canvas id="canvas" width="500" height="500" style="border:1px solid"></canvas>

Quelle

2016-04-14 12:45:53 Yoshi

Javascript HTML5 Leinwand Zeichnung transparente Kreise

Antwort

Verwandte Themen