Как нарисовать вне элемента холста HTML?

Question

У меня есть элемент холста HTML и реализована кисть, которая захватывает события в элементе canvas mousedown, mousemove и mouseup. Все это прекрасно подходит для рисования на холсте. Тем не менее, я не думаю, что мне нравится, как вы не можете продолжить рисование, если ваша мышь выйдет из холста среднего такта. Это просто отрубает. Это очень неумолимо для человека и, по моему мнению, не очень удобно.

Если вы открываете Microsoft Paint и начинаете рисовать с помощью кисти или эллипса или что-то в этом роде, пока вы начинаете на холсте, вы можете перетаскивать мышью в любом месте экрана и снова вводить холст где угодно. Это также облегчает, например, рисование четверть кругов в углах, потому что вы можете перетаскивать инструмент эллипса за пределы экрана. Я надеюсь в этом есть смысл.

В любом случае, мне было интересно, есть ли способ реализовать это с помощью холста HTML5 или как я буду заниматься реализацией такого рода вещей. Пользователь никогда не должен был бы видеть что-то нарисованное там; это в основном просто функция для удобства использования.

Редактировать: Проблема с множеством этих решений заключается в том, как обрабатывать координаты. В настоящее время мой холст находится посередине экрана, а верхний левый холст - (0, 0), а нижний правый - (500, 500). Должна рассматриваться и работа по переводу координат.

Edit2: Я узнал, что, по-видимому, вы можете легко снять границы холста. Например, вы можете указать отрицательную ширину, высоту и координаты, и элемент canvas справится с этим просто отлично. Таким образом, в основном решение, скорее всего, связано с захватом документа mousemove и mouseup и просто переводом x и y для начала в верхнем левом углу холста.

Answer 1

Вот очень грубый первый проект, как вы можете прослушивать события мыши на окне, а не на холсте, чтобы иметь возможность постоянно рисовать:

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

Вот один из способов вы можете сохранить рисунок, когда повторно ввести холст:

• Создать глобальную переменную и установить, что один в истинна на MouseDown
• Добавить глобальное событие для MouseUp, так что вы можете поймать, если кто-то сделать это за пределами холст, и если да, то установить глобальную переменную в ложь, и необходимость MouseUp холста элемента, конечно же, чтобы установить ту же переменную
• на MouseMove, проверьте глобальной переменной, чтобы быть правдой, прежде чем рисовать

Чтобы нарисовать «за пределами» холста, как четверть кругов в углу, я бы переместил все события на уровень документа в качестве глобального обработчика и поймал элемент холста при щелчке и передал его координаты клиента, которые будут вычислены с помощью координат документа ,