Làm thế nào để vẽ bên ngoài của một phần tử khung HTML?

Question

Tôi có phần tử canvas HTML và đã triển khai một bàn chải ghi lại các sự kiện mousedown, mousemove và mouseup của phần tử canvas. Điều này tất cả hoạt động tốt để vẽ trên vải. Tuy nhiên, tôi không nghĩ rằng tôi thích cách bạn không thể tiếp tục vẽ nếu con chuột của bạn rời khỏi canvas giữa đột quỵ. Nó chỉ cắt nó đi. Nó rất không tha thứ cho người đó và không thân thiện với người dùng theo ý kiến ​​của tôi.

Nếu bạn mở Microsoft Paint và bắt đầu vẽ bằng cọ hoặc hình elip hoặc một cái gì đó, miễn là bạn bắt đầu trong canvas, bạn có thể kéo chuột bất cứ nơi nào trên màn hình và nhập lại canvas bất cứ nơi nào. Nó cũng làm cho nó dễ dàng, ví dụ, để vẽ vòng tròn quý trong góc vì bạn có thể kéo công cụ hình elip ngoài màn hình. Tôi hy vọng điều này có ý nghĩa.

Dù sao thì, tôi đã tự hỏi liệu có cách nào để thực hiện điều này với canvas HTML5 hay không, tôi sẽ thực hiện điều này như thế nào. Người dùng sẽ không bao giờ thực sự nhìn thấy bất cứ thứ gì được vẽ trên đó; nó chủ yếu chỉ là một tính năng cho khả năng sử dụng.

Chỉnh sửa: Sự cố với nhiều giải pháp này là cách xử lý tọa độ. Hiện tại canvas của tôi nằm ở giữa màn hình và phía trên cùng bên trái của canvas là (0, 0) và phía dưới bên phải là (500, 500). Công việc dịch thuật của các tọa độ cũng phải được xem xét.

Chỉnh sửa2: Tôi phát hiện ra rằng dường như bạn có thể rút ra các giới hạn canvas tốt. Ví dụ: bạn có thể cung cấp độ rộng, chiều cao và tọa độ phủ định và phần tử canvas sẽ xử lý nó tốt. Vì vậy, về cơ bản giải pháp có thể sẽ chỉ liên quan đến việc chụp tài liệu của mousemove và mouseup và chỉ dịch x và y để bắt đầu ở góc trên cùng bên trái của canvas.

Answer 1

Dưới đây là một dự thảo đầu tiên cực kỳ thô như thế nào bạn có thể nghe cho các sự kiện chuột trên cửa sổ chứ không phải là vải để có thể rút ra liên tục:

var logger = document.getElementById("logger"), 
 
    mState = document.getElementById("mState"), 
 
    mX = document.getElementById("mX"), 
 
    mY = document.getElementById("mY"), 
 
    cX = document.getElementById("cX"), 
 
    cY = document.getElementById("cY"), 
 
    c = document.getElementById("canvas"), 
 
    ctx = c.getContext("2d"); 
 

 
var mouse = { 
 
    x: 0, 
 
    y: 0, 
 
    state: "" 
 
}; 
 

 
function printCanvasLocation() { 
 
    var b = c.getBoundingClientRect(); 
 
    cX.innerHTML = b.top; 
 
    cY.innerHTML = b.left; 
 
} 
 

 
function setState(mouseE, state) { 
 
    mouse.x = mouseE.clientX; 
 
    mouse.y = mouseE.clientY; 
 

 
    mX.innerHTML = mouseE.clientX; 
 
    mY.innerHTML = mouseE.clientY; 
 
    if (state) { 
 
    mState.innerHTML = state; 
 
    mouse.state = state; 
 
    } 
 
} 
 

 
window.addEventListener("mousedown", function(mouseE) { 
 
    setState(mouseE, "down"); 
 
}); 
 

 
window.addEventListener("mouseup", function(mouseE) { 
 
    setState(mouseE, "up"); 
 
}); 
 

 
window.addEventListener("mousemove", function(mouseE) { 
 
    var offset = c.getBoundingClientRect(); 
 

 
    var fix = { 
 
    x1: (mouse.x - offset.left), 
 
    y1: (mouse.y - offset.top), 
 
    x2: (mouseE.clientX - offset.left), 
 
    y2: (mouseE.clientY - offset.top) 
 
    }; 
 

 
    if (mouse.state === "down") { 
 
    ctx.moveTo(fix.x1, fix.y1); 
 
    ctx.lineTo(fix.x2, fix.y2); 
 
    ctx.strokeStyle = "#000"; 
 
    ctx.stroke(); 
 
    } 
 
    setState(mouseE); 
 
}); 
 

 
window.addEventListener("resize", function() { 
 
    printCanvasLocation(); 
 
}); 
 

 
printCanvasLocation();

  .center { 
 

 
       text-align: center; 
 

 
      } 
 

 
      canvas { 
 

 
       background-color: lightblue; 
 

 
      }

<main> 
 
    <div class="center"> 
 
    <canvas id="canvas" width="128" height="128">If you can see me, you should update your browser</canvas> 
 
    </div> 
 
    <div id="logger" role="log"> 
 
    <span>State: </span><span id="mState">Unknown</span> 
 
    <span>X: </span><span id="mX">Unknown</span> 
 
    <span>Y: </span><span id="mY">Unknown</span> 
 
    <span>Canvas X: </span><span id="cX">Unknown</span> 
 
    <span>Canvas Y: </span><span id="cY">Unknown</span> 
 
    </div> 
 
</main>

Answer 2

Dưới đây là một cách để bạn có thể giữ cho bản vẽ khi nhập lại canvas:

• Tạo một biến toàn cầu và thiết lập rằng một true trên mousedown
• Thêm một sự kiện toàn cầu cho mouseup, do đó bạn có thể bắt nếu ai đó làm điều đó bên ngoài vải, và nếu như vậy, thiết lập biến toàn cầu là false, và nhu cầu mouseup các yếu tố canvas của tất nhiên cũng để thiết lập cùng một biến
• On MouseMove, kiểm tra các biến toàn cầu đến mức khó tin trước khi vẽ

Để vẽ "bên ngoài" canvas, như hình tứ giác trong một góc, tôi sẽ di chuyển tất cả các sự kiện sang cấp tài liệu dưới dạng trình xử lý toàn cục và nắm bắt phần tử canvas khi nhấp và chuyển tọa độ khách hàng để được tính toán với tọa độ tài liệu .