Wie Kreis zeichnen an Mausposition zentriert, wenn eine Taste

gedrückt wird

Ich versuche, etwas dieses jQuery-Code zu ändern:Wie Kreis zeichnen an Mausposition zentriert, wenn eine Taste

jQuery(document).ready(function(){ 
$('#canvas').attr('height', $('#canvas').css('height')); 
$('#canvas').attr('width', $('#canvas').css('width')); 
    $("#special").click(function(e){ 

     var x = e.pageX - this.offsetLeft; 
     var y = e.pageY - this.offsetTop; 

     /* var c=document.getElementById("special"); */ 
     var ctx= this.getContext("2d"); /*c.getContext("2d");*/ 
     ctx.beginPath(); 
     ctx.arc(x, y, 50,0, 2*Math.PI); 
     ctx.stroke(); 

     $('#status').html(x +', '+ y); 
    }); 
})

Was ich mit diesem HTML-Code verwenden

<body> 
    <h2 id="status">0, 0</h2> 
    <canvas style="width: 1000px; height: 1000px; border:1px ridge green;" id="canvas"> 

    </canvas> 
</body> 
</html>

und zu versuchen, Kreise mit Radius 5 mit Tastendruck zeichnen.

Anstatt zu klicken, möchte ich einen Kreis auf der Leinwand erscheinen lassen, wenn ich eine Taste auf der Tastatur drücke. Daher sollte ich die Mausposition beibehalten.

Ich versuchte mousemove:

jQuery(document).ready(function(){ 
$('#canvas').attr('height', $('#canvas').css('height')); 
$('#canvas').attr('width', $('#canvas').css('width')); 
var x = -1; 
var y = -1; 
$("#canvas").mousemove(function(e) { 
    x = e.pageX; 
    y = e.pageY; 
}); 
$("#canvas").keypress(function(e){ 
    var ctx= this.getContext("2d"); 
    ctx.beginPath(); 
    ctx.arc(x, y, 5,0, 2*Math.PI); 
    ctx.stroke(); 

    $('#status').html(x +', '+ y); 
}); 

})

Welche nicht funktioniert hat.

Wie Sie erraten können, bin ich ziemlich neu bei jQuery. Daher könnte ich einige Syntaxfehler haben (was ich nicht glaube, weil mein Chrome-Debugger keine anzeigt).

Mein Ziel ist es, ziehbare Kreise mit Tastendruck zu erstellen. Dies ist mein erster Schritt. Kannst du mir helfen?

Quelle

2016-11-11 padawan

, wenn Sie diesem Link können Sie es ohne jQuery erreichen und Hörer das Hinzufügen http://www.dbp-consulting.com/tutorials/canvas/CanvasKeyEvents.html auf die Leinwand –

@JoseRojas das ist gut zu wissen, danke! Aber wie gesagt, mein ultimatives Ziel ist das Erstellen von ziehbaren Objekten. deshalb werde ich irgendwie jquery brauchen, nehme ich an. – padawan

Das Hauptproblem hier ist, dass Sie can't focus on a canvas und ohne Fokus, es nimmt keine Tastatureingabe. Richten Sie stattdessen einen keypress Listener auf der document ein und überprüfen Sie, ob Sie sich im Vordergrund befinden.

jQuery(document).ready(function() { 
 
    $('#canvas').attr('height', $('#canvas').css('height')); 
 
    $('#canvas').attr('width', $('#canvas').css('width')); 
 
    var x = -1; 
 
    var y = -1; 
 

 
    // Make sure the mouse is over the canvas 
 
    var overCanvas = false; 
 
    $('#canvas').mouseover(function() { 
 
    overCanvas = true; 
 
    }); 
 
    $('#canvas').mouseleave(function() { 
 
    overCanvas = false; 
 
    }); 
 
    $("#canvas").mousemove(function(e) { 
 
    // Use offset[X/Y] instead of page[X/Y] 
 
    // page[X/Y] will only be accurate if the canvas 
 
    // takes up the whole page 
 
    x = e.offsetX; 
 
    y = e.offsetY; 
 
    }); 
 
    $(document).keypress(function(e) { 
 
    if (!overCanvas) { 
 
     return; 
 
    } 
 
    var canvas = $('#canvas')[0]; 
 
    var ctx = canvas.getContext("2d"); 
 
    ctx.strokeStyle = '#FFF'; // Stroke in white 
 
    ctx.beginPath(); 
 
    ctx.arc(x, y, 5, 0, 2 * Math.PI); 
 
    ctx.stroke(); 
 

 
    $('#status').html(x + ', ' + y); 
 
    }); 
 

 
})

canvas { 
 
    display: block; 
 
    background: #000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<canvas id="canvas" width="320" height="240"></canvas> 
 
<span id="status"></span>

Quelle

2016-11-11 20:11:17

Genau das, was ich lernen wollte. Vielen Dank. – padawan

Wie Kreis zeichnen an Mausposition zentriert, wenn eine Taste

Antwort

Verwandte Themen