按下键时如何绘制以鼠标位置为中心的圆 [英] How to draw circle centered at mouse location when a key is pressed
问题描述
我正在尝试略微更改此jQuery代码:
I am trying to change this jQuery code slightly:
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);
});
})
我与该HTML代码一起使用
Which I use with this HTML code
<body>
<h2 id="status">0, 0</h2>
<canvas style="width: 1000px; height: 1000px; border:1px ridge green;" id="canvas">
</canvas>
</body>
</html>
并尝试通过按键绘制半径为5的圆.
and trying to draw circles with radius 5 with key press.
我希望单击键盘上的某个键时，画布上会出现一个圆圈，而不是单击.因此，我应该保持鼠标位置.
Instead of clicking, I want a circle to appear on canvas whenever I press a key on the keyboard. Therefore, I should keep the mouse position.
我尝试了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);
});
})
哪个没用.
您可以猜到，我对jQuery很陌生.因此，我可能会遇到一些语法错误(我相信不会，因为我的Chrome调试器未显示任何错误).
As you can guess, I am pretty new to jQuery. Therefore, I might have some syntax errors (which I believe I do not because my Chrome debugger does not show any).
我的最终目标是使用按键创建可拖动的圆圈.这是我的第一步.你能帮我吗?
My ultimate goal is to create draggable circles with keypresses. This is my first step. Can you help me?
推荐答案
The main problem here is that you can't focus on a canvas and without focus, it doesn't take keyboard input. Instead, setup a keypress listener on the document and check if you're over the canvas.
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>
这篇关于按下键时如何绘制以鼠标位置为中心的圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
