Vẽ hình chữ nhật bằng cách nhấp chuột, di chuyển chuột và nhấp vào

Question

Tôi đang cố gắng vẽ hình chữ nhật bằng cách nhấp chuột của người dùng, di chuyển chuột và nhấp. Có hai vấn đề với mã của tôi.

Thứ nhất, sau khi một hình chữ nhật được vẽ, nó sẽ tự động giả định rằng một hình khác sẽ được vẽ. Thứ hai, điểm bắt đầu trên hình chữ nhật thứ hai là nhấp chuột cuối cùng đã tạo hình chữ nhật đầu tiên.

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

Answer 1

Dưới đây là làm thế nào để nhấp di chuyển chuột để tạo một hình chữ nhật

Tạo các biến:

var isDrawing=false; 
var startX; 
var startY; 

Trong xử lý sự kiện mousedown của bạn:

• Nếu đây là nhấp chuột bắt đầu, hãy đặt isDrawing flag và thiết lập startX/Y.
• Nếu đây là nhấp chuột kết thúc, hãy xóa cảnh isDrawing và vẽ hình chữ nhật.

Bạn cũng có thể muốn thay đổi con trỏ chuột để người dùng biết họ đang vẽ.

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

Đây là một Fiddle: http://jsfiddle.net/m1erickson/7uNfW/

Thay vì nhấp chuột di chuyển, làm thế nào về việc sử dụng kéo để tạo một hình chữ nhật?

Tạo các biến:

var mouseIsDown=false; 
var startX; 
var startY; 

Trong xử lý sự kiện mousedown của bạn, đặt cờ mouseIsDown và thiết lập startx/Y.

Tùy chọn, thay đổi con trỏ để người dùng biết họ đang kéo hình chữ nhật.

 mouseIsDown=true; 
     startX=mouseX; 
     startY=mouseY; 
     canvas.style.cursor="crosshair"; 

Trong xử lý sự kiện mouseup của bạn, rõ ràng cờ mouseIsDown và vẽ rect

Nếu bạn đã thay đổi con trỏ, thay đổi nó trở lại.

 mouseIsDown=false; 
     ctx.beginPath(); 
     ctx.rect(startX,startY,mouseX-startX,mouseY-startY); 
     ctx.fill(); 
     canvas.style.cursor="default"; 

Answer 2

Bạn đã đóng cửa. Vì vậy, câu hỏi không thực sự là về phần tử "canvas" trong HTML5, mà là một canvas thực sự là một div.

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

Để cho tôi để xem những gì mã của bạn đã cố gắng để hoàn thành, tôi phải dọn nó lên. Điều cần thiết xảy ra là theo dõi yếu tố hình vuông.

Chúng tôi đang thực hiện một trong hai việc mỗi lần chúng tôi nhấp vào canvas. Chúng tôi hoặc là tạo ra một yếu tố hình chữ nhật, hoặc hoàn thành một yếu tố hình chữ nhật. Vì vậy, khi chúng ta hoàn thành nó có ý nghĩa để thiết lập 'element' (trước đây có tên là 'd') thành null. Khi tạo một phần tử, chúng ta phải gán phần tử DOM mới cho 'phần tử'.

Mỗi khi chuột di chuyển, chúng tôi muốn nhận vị trí chuột. Nếu phần tử đang trong quá trình tạo (hoặc "không null"), thì chúng ta cần phải thay đổi kích thước phần tử.

Sau đó, chúng tôi quấn nó tất cả lên trong một chức năng, và đó là tất cả để có nó:

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

Cách sử dụng: Vượt qua yếu tố khối cấp mà bạn muốn thực hiện một khung hình chữ nhật. Ví dụ:

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

Answer 3

Đối với những người gặp phải sự cố cuộn, tôi đã tìm thấy bản sửa lỗi.
Bạn cần lấy bù đắp (bằng cách sử dụng window.pageYOffset) và giảm nó từ vị trí chuột trong bất kỳ đoạn trích được đề xuất nào. Bạn nên lấy nó ra khỏi chiều cao là tốt.