Mask erasing
This commit is contained in:
parent
d563e8ba3a
commit
ff9d930956
2 changed files with 31 additions and 8 deletions
|
@ -69,8 +69,10 @@
|
|||
<input type="checkbox" id="cbxEnableErasing" onchange="changeEnableErasing()"><br />
|
||||
<label for="cbxPaint">Mask mode?</label>
|
||||
<input type="checkbox" id="cbxPaint" onchange="changePaintMode()"><br />
|
||||
<!-- Having to tick a box to erase is jank as fuck, same goes for image erasing
|
||||
<label for="cbxErase"><s>Erase mask?</s></label>
|
||||
<input type="checkbox" id="cbxErase" onchange="changeEraseMode()" disabled="disabled"><br />
|
||||
-->
|
||||
<label for="cbxHRFix">Auto txt2img HRfix?</label>
|
||||
<input type="checkbox" id="cbxHRFix" onchange="changeHiResFix()"><br />
|
||||
<label for="overMaskPx">Overmask px (0 to disable):</label>
|
||||
|
@ -88,6 +90,7 @@
|
|||
<button onclick="downloadCanvas()">Save canvas</button><br />
|
||||
<button onclick="newImage()">Clear canvas</button>
|
||||
</div>
|
||||
<!-- Degub info -->
|
||||
<button type="button" class="collapsible">Debug info</button>
|
||||
<div id="coords" class="content">
|
||||
<label for="mouseX">mouseX:</label>
|
||||
|
@ -106,7 +109,9 @@
|
|||
<span id="snapX"></span>
|
||||
<br />
|
||||
<label for="snapY">snapY:</label>
|
||||
<span id="snapY"></span>
|
||||
<span id="snapY"></span><br>
|
||||
<label for="heldButton">Mouse button:</label>
|
||||
<span id="heldButton"></span>
|
||||
<br />
|
||||
<hr>
|
||||
</div>
|
||||
|
|
22
js/index.js
22
js/index.js
|
@ -92,6 +92,7 @@ var mouseX = 0;
|
|||
var mouseY = 0;
|
||||
var canvasX = 0;
|
||||
var canvasY = 0;
|
||||
var heldButton = 0;
|
||||
var snapX = 0;
|
||||
var snapY = 0;
|
||||
var drawThis = {};
|
||||
|
@ -124,6 +125,7 @@ let canvasXInfo = document.getElementById("canvasX");
|
|||
let canvasYInfo = document.getElementById("canvasY");
|
||||
let snapXInfo = document.getElementById("snapX");
|
||||
let snapYInfo = document.getElementById("snapY");
|
||||
let heldButtonInfo = document.getElementById("heldButton");
|
||||
|
||||
// canvases and related
|
||||
const ovCanvas = document.getElementById("overlayCanvas"); // where mouse cursor renders
|
||||
|
@ -371,12 +373,14 @@ function mouseMove(evt) {
|
|||
const rect = ovCanvas.getBoundingClientRect() // not-quite pixel offset was driving me insane
|
||||
const canvasOffsetX = rect.left;
|
||||
const canvasOffsetY = rect.top;
|
||||
heldButton = evt.buttons;
|
||||
mouseXInfo.innerText = mouseX = evt.clientX;
|
||||
mouseYInfo.innerText = mouseY = evt.clientY;
|
||||
canvasXInfo.innerText = canvasX = parseInt(evt.clientX - rect.left);
|
||||
canvasYInfo.innerText = canvasY = parseInt(evt.clientY - rect.top);
|
||||
snapXInfo.innerText = canvasX + snap(canvasX);
|
||||
snapYInfo.innerText = canvasY + snap(canvasY);
|
||||
heldButtonInfo.innerText = heldButton;
|
||||
ovCtx.clearRect(0, 0, ovCanvas.width, ovCanvas.height); // clear out the previous mouse cursor
|
||||
if (placingArbitraryImage) {
|
||||
// ugh refactor so this isn't duplicated between arbitrary image and dream reticle modes
|
||||
|
@ -428,6 +432,19 @@ function mouseMove(evt) {
|
|||
maskPaintCtx.lineJoin = maskPaintCtx.lineCap = 'round';
|
||||
maskPaintCtx.stroke();
|
||||
}
|
||||
// Erase mask if right button is held
|
||||
// no reason to have to tick a checkbox for this, more intuitive for both erases (mask and actual images) to just work on right click and inform the user about it
|
||||
if (evt.buttons == 2) {
|
||||
maskPaintCtx.globalCompositeOperation = 'destination-out';
|
||||
maskPaintCtx.beginPath();
|
||||
maskPaintCtx.strokeStyle = "#FFFFFFFF";
|
||||
maskPaintCtx.lineWidth = 8 * scaleFactor;
|
||||
maskPaintCtx.moveTo(prevMouseX, prevMouseY);
|
||||
maskPaintCtx.lineTo(mouseX, mouseY);
|
||||
maskPaintCtx.lineJoin = maskPaintCtx.lineCap = 'round';
|
||||
maskPaintCtx.stroke();
|
||||
|
||||
}
|
||||
prevMouseX = mouseX;
|
||||
prevMouseY = mouseY;
|
||||
}
|
||||
|
@ -463,8 +480,8 @@ function mouseDown(evt) {
|
|||
nextBox.h = basePixelCount * scaleFactor;
|
||||
drawTargets.push(nextBox);
|
||||
}
|
||||
} else if (evt.button == 2 && enableErasing && !paintMode) { // right click, also gotta make sure mask blob isn't being used as it's visually inconsistent with behavior of erased region
|
||||
// erase the canvas underneath the cursor,
|
||||
} else if (evt.button == 2){
|
||||
if(enableErasing && !paintMode) { // right click, also gotta make sure mask blob isn't being used as it's visually inconsistent with behavior of erased region
|
||||
ctx = imgCanvas.getContext('2d');
|
||||
if (snapToGrid) {
|
||||
ctx.clearRect(canvasX + snap(canvasX) - ((basePixelCount * scaleFactor) / 2), canvasY + snap(canvasY) - ((basePixelCount * scaleFactor) / 2), basePixelCount * scaleFactor, basePixelCount * scaleFactor);
|
||||
|
@ -473,6 +490,7 @@ function mouseDown(evt) {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function mouseUp(evt) {
|
||||
if (evt.button == 0) { // left click
|
||||
|
|
Loading…
Reference in a new issue