23 javascript canvas
我正在尝试通过用户单击,鼠标移动和单击来绘制矩形.我的代码有两个问题.
首先,在绘制一个矩形后,会自动假设将绘制另一个矩形.其次,第二个矩形的起点是创建第一个矩形的最后一次点击.
Spe*_*art 34
你很亲密 所以,问题不在于HTML5中的"canvas"元素,而是一个真正的div画布.
http://jsfiddle.net/d9BPz/546/
为了让我看到你的代码试图完成什么,我不得不整理它.需要做的是跟踪方形元素.
每次点击画布时我们都会做两件事之一.我们要么创建一个矩形元素,要么完成一个矩形元素.所以,当我们完成时,将'element'(以前称为'd')设置为null是有意义的.在创建元素时,我们必须将新的DOM元素分配给'element'.
每次鼠标移动时,我们都希望获得鼠标位置.如果元素处于创建过程中(或"非null"),那么我们需要调整元素的大小.
然后我们将它全部包装在一个函数中,这就是它的全部内容:
function initDraw(canvas) {
var mouse = {
x: 0,
y: 0,
startX: 0,
startY: 0
};
function setMousePosition(e) {
var ev = e || window.event; //Moz || IE
if (ev.pageX) { //Moz
mouse.x = ev.pageX + window.pageXOffset;
mouse.y = ev.pageY + window.pageYOffset;
} else if (ev.clientX) { //IE
mouse.x = ev.clientX + document.body.scrollLeft;
mouse.y = ev.clientY + document.body.scrollTop;
}
};
var element = null;
canvas.onmousemove = function (e) {
setMousePosition(e);
if (element !== null) {
element.style.width = Math.abs(mouse.x - mouse.startX) + 'px';
element.style.height = Math.abs(mouse.y - mouse.startY) + 'px';
element.style.left = (mouse.x - mouse.startX < 0) ? mouse.x + 'px' : mouse.startX + 'px';
element.style.top = (mouse.y - mouse.startY < 0) ? mouse.y + 'px' : mouse.startY + 'px';
}
}
canvas.onclick = function (e) {
if (element !== null) {
element = null;
canvas.style.cursor = "default";
console.log("finsihed.");
} else {
console.log("begun.");
mouse.startX = mouse.x;
mouse.startY = mouse.y;
element = document.createElement('div');
element.className = 'rectangle'
element.style.left = mouse.x + 'px';
element.style.top = mouse.y + 'px';
canvas.appendChild(element)
canvas.style.cursor = "crosshair";
}
}
}
用法:传递要制作矩形画布的块级元素.例:
<!doctype html>
<html>
<head>
<style>
#canvas {
width:2000px;
height:2000px;
border: 10px solid transparent;
}
.rectangle {
border: 1px solid #FF0000;
position: absolute;
}
</style>
</head>
<body>
<div id="canvas"></div>
<script src="js/initDraw.js"></script>
<script>
initDraw(document.getElementById('canvas'));
</script>
</body>
</html>
mar*_*rkE 12
以下是单击 - 移动 - 单击以创建矩形的方法
创建这些变量:
var isDrawing=false;
var startX;
var startY;
在你的mousedown事件处理程序中:
您可能还想更改鼠标光标,以便用户知道他们正在绘制.
if(isDrawing){
isDrawing=false;
ctx.beginPath();
ctx.rect(startX,startY,mouseX-startX,mouseY-startY);
ctx.fill();
canvas.style.cursor="default";
}else{
isDrawing=true;
startX=mouseX;
startY=mouseY;
canvas.style.cursor="crosshair";
}
这是一个小提琴:http://jsfiddle.net/m1erickson/7uNfW/
而不是单击 - 单击 - 移动单击,如何使用拖动来创建矩形？
创建这些变量:
var mouseIsDown=false;
var startX;
var startY;
在mousedown事件处理程序中,设置mouseIsDown标志并设置startX/Y.
(可选)更改光标,以便用户知道拖动矩形.
mouseIsDown=true;
startX=mouseX;
startY=mouseY;
canvas.style.cursor="crosshair";
在mouseup事件处理程序中,清除mouseIsDown标志并绘制rect
如果您更改了光标,请将其更改回来.
mouseIsDown=false;
ctx.beginPath();
ctx.rect(startX,startY,mouseX-startX,mouseY-startY);
ctx.fill();
canvas.style.cursor="default";
| 归档时间： |
|
| 查看次数： |
59613 次 |
| 最近记录： |