使用单击、鼠标移动和单击绘制矩形 | 鼠标移动和单击绘制矩形

本文介绍了使用单击、鼠标移动和单击绘制矩形的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试通过用户单击、鼠标移动和单击来绘制矩形.我的代码有两个问题.

I'm trying to draw a rectangle by a user click, mouse move, and click. There are two problems with my code.

首先，在绘制一个矩形后，会自动假定将绘制另一个矩形.其次，第二个矩形的起点是创建第一个矩形的最后一次单击.

Firstly, after one rectangle is drawn it is automatically assumed that another one will be drawn. Secondly, the starting point on the second rectangle is the last click that created the first rectangle.

http://jsbin.com/uqonuw/3/edit

推荐答案

你已经接近了.所以，问题不在于 HTML5 中的canvas"元素，而是一个真正是 div 的画布.

You were close. So, the question isn't really about the "canvas" element in HTML5, but a canvas that is really a div.

http://jsfiddle.net/d9BPz/546/

为了让我看到你的代码试图完成什么，我必须把它整理一下.需要发生的是跟踪方形元素.

In order for me to see what your code was trying to accomplish, I had to tidy it up. What needed to happen was tracking of the square element.

每次点击画布时，我们都在做两件事之一.我们要么创建一个矩形元素，要么完成一个矩形元素.因此，当我们完成时，将 'element'(以前称为 'd')设置为 null 是有意义的.创建元素时，我们必须将新的 DOM 元素分配给元素".

We are doing one of two things everytime we click on the canvas. We are either creating a rectangle element, or finishing a rectangle element. So, when we're finished it makes sense to set 'element' (previously named 'd') to null. When creating an element, we have to assign the new DOM element to 'element'.

每次鼠标移动时，我们都想获取鼠标位置.如果元素正在创建过程中(或非空")，那么我们需要调整元素的大小.

Everytime the mouse moves, we want to get the mouse position. If the element is in the process of creation (or "not null"), then we need to resize the element.

然后我们将它全部封装在一个函数中，这就是它的全部内容:

Then we wrap it all up in a function, and that's all there is to it:

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";
        }
    }
}

用法:传递您想要制作矩形画布的块级元素.示例:

Usage: Pass the block-level element that you would like to make a rectangle canvas.Example:

<!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>

这篇关于使用单击、鼠标移动和单击绘制矩形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！