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

Quick fix for zoom to cursor and brush erase blur

Browse source 
Quick fix to some issues pointed out by @raivshard at #177

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
This commit is contained in:
Victor Seiji Hariki 2023-01-22 09:18:47 -03:00
parent e92d8fa9b6
commit fc8e6fb557
3 changed files with 17 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
index.html
View file

@ -358,7 +358,7 @@
<script src="js/lib/ui.js?v=fe9b702" type="text/javascript"></script> <script src="js/lib/ui.js?v=fe9b702" type="text/javascript"></script>
<script <script
src="js/initalize/layers.populate.js?v=8bc8815" src="js/initalize/layers.populate.js?v=066dc8e"
type="text/javascript"></script> type="text/javascript"></script>
<!-- Configuration --> <!-- Configuration -->
@ -386,7 +386,7 @@
src="js/ui/tool/maskbrush.js?v=d88810f" src="js/ui/tool/maskbrush.js?v=d88810f"
type="text/javascript"></script> type="text/javascript"></script>
<script <script
src="js/ui/tool/colorbrush.js?v=3f8c01a" src="js/ui/tool/colorbrush.js?v=6f1d2f4"
type="text/javascript"></script> type="text/javascript"></script>
<script <script
src="js/ui/tool/select.js?v=f290e83" src="js/ui/tool/select.js?v=f290e83"

24
js/initalize/layers.populate.js
View file

@ -307,28 +307,28 @@ mouse.listen.camera.onwheel.on((evn) => {
evn.evn.preventDefault(); evn.evn.preventDefault();
// Get cursor world position // Get cursor world position
const cursorPosition = viewport.viewToCanvas(evn.x, evn.y); const wcursor = viewport.viewToCanvas(evn.x, evn.y);
// Get viewport center // Get viewport center
const pcx = viewport.cx; const wcx = viewport.cx;
const pcy = viewport.cy; const wcy = viewport.cy;
// Apply zoom // Apply zoom
viewport.zoom *= 1 + evn.delta * 0.0002; viewport.zoom *= 1 + evn.delta * 0.0002;
// Get cursor new world position
const nwcursor = viewport.viewToCanvas(evn.x, evn.y);
// Apply normal zoom (center of viewport) // Apply normal zoom (center of viewport)
viewport.cx = pcx; viewport.cx = wcx;
viewport.cy = pcy; viewport.cy = wcy;
// Move viewport to keep cursor in same location
viewport.cx += wcursor.x - nwcursor.x;
viewport.cy += wcursor.y - nwcursor.y;
viewport.transform(imageCollection.element); viewport.transform(imageCollection.element);
// Calculate new viewport center and move
//const newCursorPosition = viewport.viewToCanvas(evn.x, evn.y);
//viewport.cx = pcx - (newCursorPosition.x - cursorPosition.x);
//viewport.cy = pcy - (newCursorPosition.y - cursorPosition.y);
//viewport.transform(imageCollection.element);
toolbar._current_tool.redrawui && toolbar._current_tool.redrawui(); toolbar._current_tool.redrawui && toolbar._current_tool.redrawui();
}); });

3
js/ui/tool/colorbrush.js
View file

@ -22,8 +22,10 @@ const _color_brush_draw_callback = (evn, state) => {
}; };
const _color_brush_erase_callback = (evn, state, ctx) => { const _color_brush_erase_callback = (evn, state, ctx) => {
ctx.save();
ctx.strokeStyle = "black"; ctx.strokeStyle = "black";
ctx.filter = "blur(" + state.brushBlur + "px)";
ctx.lineWidth = state.brushSize; ctx.lineWidth = state.brushSize;
ctx.beginPath(); ctx.beginPath();
ctx.moveTo( ctx.moveTo(
@ -33,6 +35,7 @@ const _color_brush_erase_callback = (evn, state, ctx) => {
ctx.lineTo(evn.x, evn.y); ctx.lineTo(evn.x, evn.y);
ctx.lineJoin = ctx.lineCap = "round"; ctx.lineJoin = ctx.lineCap = "round";
ctx.stroke(); ctx.stroke();
ctx.restore();
}; };
const colorBrushTool = () => const colorBrushTool = () =>