sneedgroup-holder/openOutpaint
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

solid color mask and migration to new input method

Browse source 
reimplements mask using the new input lib, makes mask use a solid color
(masks shouldn't become darker the more you draw over itself) and the
mask layer is now rendered with the alpha using css.

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
This commit is contained in:
Victor Seiji Hariki 2022-11-20 23:29:50 -03:00
parent 217b89efef
commit d6435abf2e
2 changed files with 15 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
css/index.css
View file

@ -12,23 +12,23 @@
} }
.maskPaintCanvas { .maskPaintCanvas {
border: 3px dotted #993355C0 border: 3px dotted #993355c0;
} }
.overlayCanvas { .overlayCanvas {
border: 1px solid #F00; border: 1px solid #f00;
} }
.tempCanvas { .tempCanvas {
border: 3px dotted #007AFFC0; border: 3px dotted #007affc0;
} }
.targetCanvas { .targetCanvas {
border: 2px dashed #0F0; border: 2px dashed #0f0;
} }
.canvas { .canvas {
border: 2px dotted #00F; border: 2px dotted #00f;
} }
.mainHSplit { .mainHSplit {
@ -45,7 +45,6 @@
grid-template-rows: 1fr; grid-template-rows: 1fr;
grid-column-gap: 5px; grid-column-gap: 5px;
grid-row-gap: 5px; grid-row-gap: 5px;
} }
#infoContainer { #infoContainer {
@ -53,10 +52,9 @@
width: 250px; width: 250px;
height: auto; height: auto;
z-index: 999; z-index: 999;
} }
#draggable{ #draggable {
cursor:move cursor: move;
} }
#DraggableTitleBar { #DraggableTitleBar {
@ -153,7 +151,6 @@ button.tool:hover {
cursor: auto; cursor: auto;
} }
.canvasHolder { .canvasHolder {
position: relative; position: relative;
width: 2560px; width: 2560px;
@ -180,6 +177,10 @@ button.tool:hover {
position: absolute; position: absolute;
} }
.maskPaintCanvas {
filter: opacity(40%);
}
.strokeText { .strokeText {
-webkit-text-stroke: 1px #888; -webkit-text-stroke: 1px #888;
font-size: 150%; font-size: 150%;

13
js/index.js
View file

@ -430,6 +430,9 @@ function mouseMove(evt) {
} }
} }
/**
* Mask implementation
*/
mouse.listen.canvas.onmousemove.on((evn) => { mouse.listen.canvas.onmousemove.on((evn) => {
if (paintMode) { if (paintMode) {
// draw big translucent red blob cursor // draw big translucent red blob cursor
@ -456,16 +459,6 @@ mouse.listen.canvas.left.onpaint.on((evn) => {
mouse.listen.canvas.right.onpaint.on((evn) => { mouse.listen.canvas.right.onpaint.on((evn) => {
if (paintMode) { if (paintMode) {
ovCtx.beginPath();
ovCtx.arc(evn.x, evn.y, 4 * scaleFactor, 0, 2 * Math.PI, true); // for some reason 4x on an arc is === to 8x on a line???
ovCtx.fillStyle = '#00FF00';
ovCtx.fill();
ovCtx.beginPath();
ovCtx.arc(evn.px, evn.py, 4 * scaleFactor, 0, 2 * Math.PI, true); // for some reason 4x on an arc is === to 8x on a line???
ovCtx.fillStyle = '#0000FF';
ovCtx.fill();
maskPaintCtx.globalCompositeOperation = 'destination-out'; maskPaintCtx.globalCompositeOperation = 'destination-out';
maskPaintCtx.strokeStyle = '#FFFFFFFF'; maskPaintCtx.strokeStyle = '#FFFFFFFF';