Zeige Rechteck auf Leinwand, wenn Maus bewegt

Ich möchte Rechteck auf Leinwand zeichnen. Der folgende Code funktioniert einwandfrei, außer wenn ich ein Rechteck zeichne, zeigt es keinen Pfad, wenn sich die Maus bewegt. Wenn ich die Maus verließ, ist das Rechteck auf der Leinwand sichtbar.Zeige Rechteck auf Leinwand, wenn Maus bewegt

Bitte helfen,

Dank

var canvas, ctx, flag = false, 
 
     prevX = 0, 
 
     currX = 0, 
 
     prevY = 0, 
 
     currY = 0, 
 
     currShape = 'rectangle', 
 
     mouseIsDown = 0, 
 
     startX, endX, startY, endY, 
 
     dot_flag = false; 
 

 
    var x = "white", 
 
     y = 2; 
 
    
 
    function init() { 
 
     canvas = document.getElementById('can'); 
 
     ctx = canvas.getContext("2d"); 
 
     var imageObj = new Image(); //Canvas image Obj 
 

 
     imageObj.onload = function() { 
 
      ctx.drawImage(imageObj, 69, 50); //Load Image on canvas 
 
     }; 
 
     imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; //Load Image 
 

 
     w = canvas.width; // Canvas Width 
 
     h = canvas.height; // Canvas Height 
 
     //Check Shape to be draw 
 
     eventListener(); 
 

 
    } 
 
    function eventListener(){ 
 
     if(currShape=='rectangle'){ 
 
      canvas.addEventListener("mousedown",function (e) { 
 
       mouseDown(e); 
 
      }, false); 
 
      canvas.addEventListener("mousemove",function (e){ 
 
       mouseXY(e); 
 
      }, false); 
 
      canvas.addEventListener("mouseup", function (e){ 
 
       mouseUp(e); 
 
      }, false); 
 
     } 
 
    } 
 

 
function mouseUp(eve) { 
 
    if (mouseIsDown !== 0) { 
 
     mouseIsDown = 0; 
 
     var pos = getMousePos(canvas, eve); 
 
     endX = pos.x; 
 
     endY = pos.y; 
 
     if(currShape=='rectangle') 
 
     { 
 
      drawSquare(); //update on mouse-up 
 
     } 
 
    } 
 
} 
 

 
function mouseDown(eve) { 
 
    mouseIsDown = 1; 
 
    var pos = getMousePos(canvas, eve); 
 
    startX = endX = pos.x; 
 
    startY = endY = pos.y; 
 
    if(currShape=='rectangle') 
 
    { 
 
     drawSquare(); //update on mouse-up 
 
    } 
 
} 
 

 
function mouseXY(eve) { 
 
    if (mouseIsDown !== 0) { 
 
     var pos = getMousePos(canvas, eve); 
 
     endX = pos.x; 
 
     endY = pos.y; 
 
     //drawSquare(); 
 
    } 
 
} 
 

 
function drawSquare() { 
 
    // creating a square 
 
    var w = endX - startX; 
 
    var h = endY - startY; 
 
    var offsetX = (w < 0) ? w : 0; 
 
    var offsetY = (h < 0) ? h : 0; 
 
    var width = Math.abs(w); 
 
    var height = Math.abs(h); 
 

 
       
 
    ctx.beginPath(); 
 
    ctx.globalAlpha=0.7; 
 
    ctx.rect(startX + offsetX, startY + offsetY, width, height); 
 
    ctx.fillStyle = x; 
 
    ctx.fill(); 
 
    ctx.lineWidth = y; 
 
    ctx.strokeStyle = x; 
 
    ctx.stroke(); 
 
} 
 

 
function getMousePos(canvas, evt) { 
 
    var rect = canvas.getBoundingClientRect(); 
 
    return { 
 
     x: evt.clientX - rect.left, 
 
     y: evt.clientY - rect.top 
 
    }; 
 
}

.colortool div { 
 
     width: 15px; 
 
     height: 15px; 
 
     float: left; 
 
     margin-left: 2px; 
 
    } 
 
    .clear { 
 
     clear: both; 
 
    }

<!DOCTYPE HTML> 
 
<html> 
 
    <body onload="init()"> 
 
    <div class="canvasbody"> 
 
    <canvas id="can" width="400" height="400" style="border:1px dotted #eee;"></canvas> 
 
    </div> 
 
    </body> 
 
    </html>

Quelle

2016-10-26 Ajay Thakur

, um Ihr Problem nicht relevant, aber diese anonymen Funktionen des Ereignishandler Verpackung sind nicht erforderlich - nur tun 'canvas.addEventListener (eventname, funcName, false)' – Alnitak

@Alnitak ja, du sind richtig. Danke –

Hier ist man neue JavaScript

var canvas, cnvHid, cnvRender, ctx, flag = false, 
     prevX = 0, 
     currX = 0, 
     prevY = 0, 
     currY = 0, 
     currShape = 'rectangle', 
     mouseIsDown = 0, 
     startX, endX, startY, endY, 
     dot_flag = false; 

    var x = "white", 
     y = 2; 

    function init() { 
     canvas = document.getElementById('can'); 
     cnvHid = document.getElementById("canHid"); 
     cnvRender = document.getElementById("canRend"); 
     ctx = canvas.getContext("2d"); 
     var imageObj = new Image(); //Canvas image Obj 

     imageObj.onload = function() { 
      ctx.drawImage(imageObj, 69, 50); //Load Image on canvas 
      renderAllCanvas(); 
     }; 
     imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; //Load Image 

     w = canvas.width; // Canvas Width 
     h = canvas.height; // Canvas Height 
     //Check Shape to be draw 
     eventListener(); 
    } 
    function eventListener(){ 
     if(currShape=='rectangle'){ 
      cnvRender.addEventListener("mousedown",function (e) { 
       mouseDown(e); 
       renderAllCanvas(); 
      }, false); 
      cnvRender.addEventListener("mousemove",function (e){ 
       mouseXY(e); 
       renderAllCanvas(); 
      }, false); 
      cnvRender.addEventListener("mouseup", function (e){ 
       mouseUp(e); 
       renderAllCanvas(); 
      }, false); 
     } 
    } 
    function mouseUp(eve) { 
    if (mouseIsDown !== 0) { 
     mouseIsDown = 0; 
     var pos = getMousePos(canvas, eve); 
     endX = pos.x; 
     endY = pos.y; 
     if(currShape=='rectangle') 
     { 
      drawSquare(canvas); //update on mouse-up 
      cnvHid.getContext("2d").clearRect(0, 0, cnvHid.width, cnvHid.height); 
     } 
    } 
} 

function mouseDown(eve) { 
    mouseIsDown = 1; 
    var pos = getMousePos(canvas, eve); 
    startX = endX = pos.x; 
    startY = endY = pos.y; 
    if(currShape=='rectangle') 
    { 
     drawSquare(canvas); //update on mouse-up 
    } 
} 

function mouseXY(eve) { 
    if (mouseIsDown !== 0) { 
     var pos = getMousePos(canvas, eve); 
     endX = pos.x; 
     endY = pos.y; 
     drawSquare(cnvHid, true); 
    } 
} 

function drawSquare(cnv, clear) { 
    var ctx = cnv.getContext("2d"); 
    if(clear && clear === true){ 
     ctx.clearRect(0, 0, cnv.width, cnv.height); 
    } 
    // creating a square 
    var w = endX - startX; 
    var h = endY - startY; 
    var offsetX = (w < 0) ? w : 0; 
    var offsetY = (h < 0) ? h : 0; 
    var width = Math.abs(w); 
    var height = Math.abs(h); 

    ctx.beginPath(); 
    ctx.globalAlpha=0.7; 
    ctx.rect(startX + offsetX, startY + offsetY, width, height); 
    ctx.fillStyle = x; 
    ctx.fill(); 
    ctx.lineWidth = y; 
    ctx.strokeStyle = x; 
    ctx.stroke(); 
    ctx.closePath(); 
} 

function getMousePos(canvas, evt) { 
    var rect = canvas.getBoundingClientRect(); 
    return { 
     x: evt.clientX - rect.left, 
     y: evt.clientY - rect.top 
    }; 
} 

function renderAllCanvas(){ 
    var cnxRender = cnvRender.getContext("2d"); 
    cnxRender.drawImage(
     canvas 
     ,0,0 
     ,cnvRender.width,cnvRender.height 
    ); 
    cnxRender.drawImage(
     cnvHid 
     ,0,0 
     ,cnvRender.width,cnvRender.height 
    ); 
}

Und hier ist es, Sie neue HTML

<!DOCTYPE HTML> 
<html> 
    <body onload="init()"> 
     <div class="canvasbody"> 
     <canvas id="can" width="400" height="400" style="display: none;"></canvas> 
     <canvas id="canHid" width="400" height="400" style="display: none;"></canvas> 
     <canvas id="canRend" width="400" height="400" style="border:1px dotted #eee;"></canvas> 
     </div> 
    </body> 
</html>

Quelle

2016-10-26 12:20:24

Mausereignisse werden bis zu 200 Mal pro Sekunde ausgelöst. Der Bildschirm wird 60 Mal pro Sekunde aktualisiert. Die überwiegende Mehrheit der "DrawSquare" -Aufrufe wird nie gesehen werden. Dies ist eine Verschwendung von Gerätemacht, Ressourcen des Clients und verursacht Abscheren beim Ziehen. Für jede Art von browserbasierter Animation (einschließlich UI-Interaktion) sollten Sie 'requestAnimationFrame' verwenden, um die Ressourcennutzung und unerwünschte Animationsartefakte zu minimieren. Unter http://stackoverflow.com/a/40126873/3877726 finden Sie Informationen zum Animieren der Interaktion mit der Benutzeroberfläche. – Blindman67

In gewisser Weise würden Sie Spur auf die Veränderungen halten müssen Sie eine Form, die Sie auf der Leinwand ziehen lassen. In Ihrem Fall würden Sie damit beginnen, ein sehr kleines Rechteck zu erstellen und es dann während des Ziehens entsprechend Ihrer Mausposition zu skalieren.

Momentan haben Sie nur eine Funktion, die ein völlig neues Rechteck zeichnet, aber keinen vorherigen "Zustand" berücksichtigt.

Ich fand diese blogpost, die hilfreich sein könnte. Es erklärt nicht speziell Skalierung, aber es könnte mit den grundlegenden Konzepten helfen, also denke ich, dass dies ein guter Weg für Sie wäre, eine geeignete Lösung zu finden.

Quelle

2016-10-26 11:36:39 glutengo

Da wir das Canvas-Tag im DOM mit seiner ID finden und dann den Zeichenkontext der Leinwand auf 2D setzen. Zwei Dinge sind hier wichtig: Speichern Sie die Informationen, während wir den Rectangle zeichnen, und einen Boolean, um zu überprüfen, ob der Benutzer das Rechteck zeichnet oder nicht. Sie können diese Links referenzieren: Drawing a rectangle using click, mouse move, and click Draw on HTML5 Canvas using a mouse Überprüfen Sie die JS Geige in den angegebenen Link. Hoffnung das werden Ihnen helfen ..

Quelle

2016-10-26 11:56:20 rajiv

Danke für das Teilen der Links. Ich werde diese Links überprüfen. –

Ihr aktueller Code hat den Neuaufbau auf der Maus bewegt Kommentar gesetzt, welches zum Aktualisieren der Zeichenfläche erforderlich wäre. Ihr Code zerstört jedoch auch das Bild so, wie das Rechteck gezeichnet wird. Wenn Sie das Bild wie unten gezeigt beibehalten und es vor dem Zeichnen des Rechtecks neu zeichnen, hat es möglicherweise den gewünschten Effekt.

var canvas, ctx, flag = false, 
 
     prevX = 0, 
 
     currX = 0, 
 
     prevY = 0, 
 
     currY = 0, 
 
     currShape = 'rectangle', 
 
     mouseIsDown = 0, 
 
     startX, endX, startY, endY, 
 
     dot_flag = false; 
 
     var x = "white", 
 
     y = 2, 
 
     image = null; 
 

 
    
 
    function init() { 
 
     canvas = document.getElementById('can'); 
 
     ctx = canvas.getContext("2d"); 
 
     var imageObj = new Image(); //Canvas image Obj 
 

 
     imageObj.onload = function() { 
 
      image = imageObj; 
 
      ctx.drawImage(image, 69, 50); //Load Image on canvas 
 
     }; 
 
     imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; //Load Image 
 

 
     w = canvas.width; // Canvas Width 
 
     h = canvas.height; // Canvas Height 
 
     //Check Shape to be draw 
 
     eventListener(); 
 

 
    } 
 
    function eventListener(){ 
 
     if(currShape=='rectangle'){ 
 
      canvas.addEventListener("mousedown",function (e) { 
 
       mouseDown(e); 
 
      }, false); 
 
      canvas.addEventListener("mousemove",function (e){ 
 
       mouseXY(e); 
 
      }, false); 
 
      canvas.addEventListener("mouseup", function (e){ 
 
       mouseUp(e); 
 
      }, false); 
 
     } 
 
    } 
 

 
function mouseUp(eve) { 
 
    if (mouseIsDown !== 0) { 
 
     mouseIsDown = 0; 
 
     var pos = getMousePos(canvas, eve); 
 
     endX = pos.x; 
 
     endY = pos.y; 
 
     if(currShape=='rectangle') 
 
     { 
 
      drawSquare(); //update on mouse-up 
 
     } 
 
    } 
 
} 
 

 
function mouseDown(eve) { 
 
    mouseIsDown = 1; 
 
    var pos = getMousePos(canvas, eve); 
 
    startX = endX = pos.x; 
 
    startY = endY = pos.y; 
 
    if(currShape=='rectangle') 
 
    { 
 
     drawSquare(); //update on mouse-up 
 
    } 
 
} 
 

 
function mouseXY(eve) { 
 
    if (mouseIsDown !== 0) { 
 
     var pos = getMousePos(canvas, eve); 
 
     endX = pos.x; 
 
     endY = pos.y; 
 
     drawSquare(); 
 
    } 
 
} 
 

 
function drawSquare() { 
 

 
    // draw background image 
 
    if(image) { 
 
     ctx.drawImage(image, 69, 50); 
 
    } 
 

 
    // creating a square 
 
    var w = endX - startX; 
 
    var h = endY - startY; 
 
    var offsetX = (w < 0) ? w : 0; 
 
    var offsetY = (h < 0) ? h : 0; 
 
    var width = Math.abs(w); 
 
    var height = Math.abs(h); 
 
       
 
    ctx.beginPath(); 
 
    ctx.globalAlpha=0.7; 
 
    ctx.rect(startX + offsetX, startY + offsetY, width, height); 
 
    ctx.fillStyle = x; 
 
    ctx.fill(); 
 
    ctx.lineWidth = y; 
 
    ctx.strokeStyle = x; 
 
    ctx.stroke(); 
 
} 
 

 
function getMousePos(canvas, evt) { 
 
    var rect = canvas.getBoundingClientRect(); 
 
    return { 
 
     x: evt.clientX - rect.left, 
 
     y: evt.clientY - rect.top 
 
    }; 
 
}

.colortool div { 
 
     width: 15px; 
 
     height: 15px; 
 
     float: left; 
 
     margin-left: 2px; 
 
    } 
 
    .clear { 
 
     clear: both; 
 
    }

<!DOCTYPE HTML> 
 
<html> 
 
    <body onload="init()"> 
 
    <div class="canvasbody"> 
 
    <canvas id="can" width="400" height="400" style="border:1px dotted #eee;"></canvas> 
 
    </div> 
 
    </body> 
 
    </html>

Quelle

2016-11-03 22:56:47

Zeige Rechteck auf Leinwand, wenn Maus bewegt

Antwort

Verwandte Themen