Рисование прямоугольника с помощью щелчка, перемещения мыши и нажатия

Я пытаюсь нарисовать прямоугольник щелчком мыши, перемещением мыши и щелчком. В моем коде есть две проблемы.

Во-первых, после рисования одного прямоугольника автоматически предполагается, что будет нарисован другой. Во-вторых, начальной точкой второго прямоугольника является последний щелчок, который создал первый прямоугольник.

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

Ответы

Ответ 1

Ты был близок. Итак, вопрос не в том, что касается элемента canvas в HTML5, а в холсте, который действительно является 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>

Ответ 2

Здесь, как щелкнуть мышью, чтобы создать прямоугольник

Создайте эти переменные:

var isDrawing=false;
var startX;
var startY;

В обработчике событий mousedown:

Если это начальный щелчок, установите флаг isDrawing и установите startX/Y.
Если это конечный щелчок, снимите флажок isDrawing и нарисуйте прямоугольник.

Вы также можете изменить курсор мыши, чтобы пользователь знал, что он рисует.

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/

Вместо того, чтобы щелкнуть мышью, щелкните на кнопке drag, чтобы создать прямоугольник?

Создайте эти переменные:

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

Ответ 3

Для тех, кто столкнулся с проблемой прокрутки, я нашел исправление.
Вам необходимо получить смещение (используя window.pageYOffset) и уменьшить его из положения мыши в любом из рекомендуемых фрагментов. Вы также должны снять его с высоты.