some... i guess performance improvements for chrome
also fixes pixelated view for chrome Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
This commit is contained in:
parent
4afb1467be
commit
6222975825
6 changed files with 25 additions and 9 deletions
|
@ -60,5 +60,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#layer-render.pixelated canvas {
|
#layer-render.pixelated canvas {
|
||||||
|
image-rendering: pixelated;
|
||||||
image-rendering: crisp-edges;
|
image-rendering: crisp-edges;
|
||||||
}
|
}
|
||||||
|
|
|
@ -146,6 +146,7 @@ select > option:checked::after {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
margin: 3px;
|
margin: 3px;
|
||||||
|
|
||||||
|
-webkit-mask-position: center;
|
||||||
mask-position: center;
|
mask-position: center;
|
||||||
|
|
||||||
-webkit-mask-size: contain;
|
-webkit-mask-size: contain;
|
||||||
|
|
|
@ -12,9 +12,11 @@ const bgLayer = imageCollection.registerLayer("bg", {
|
||||||
});
|
});
|
||||||
const imgLayer = imageCollection.registerLayer("image", {
|
const imgLayer = imageCollection.registerLayer("image", {
|
||||||
name: "Image",
|
name: "Image",
|
||||||
|
ctxOptions: {desynchronized: true},
|
||||||
});
|
});
|
||||||
const maskPaintLayer = imageCollection.registerLayer("mask", {
|
const maskPaintLayer = imageCollection.registerLayer("mask", {
|
||||||
name: "Mask Paint",
|
name: "Mask Paint",
|
||||||
|
ctxOptions: {desynchronized: true},
|
||||||
});
|
});
|
||||||
const ovLayer = imageCollection.registerLayer("overlay", {
|
const ovLayer = imageCollection.registerLayer("overlay", {
|
||||||
name: "Overlay",
|
name: "Overlay",
|
||||||
|
@ -42,7 +44,7 @@ const debugCtx = debugLayer.ctx;
|
||||||
const uiCanvas = document.getElementById("layer-overlay"); // where mouse cursor renders
|
const uiCanvas = document.getElementById("layer-overlay"); // where mouse cursor renders
|
||||||
uiCanvas.width = uiCanvas.clientWidth;
|
uiCanvas.width = uiCanvas.clientWidth;
|
||||||
uiCanvas.height = uiCanvas.clientHeight;
|
uiCanvas.height = uiCanvas.clientHeight;
|
||||||
const uiCtx = uiCanvas.getContext("2d");
|
const uiCtx = uiCanvas.getContext("2d", {desynchronized: true});
|
||||||
|
|
||||||
debugLayer.hide(); // Hidden by default
|
debugLayer.hide(); // Hidden by default
|
||||||
|
|
||||||
|
|
|
@ -256,12 +256,6 @@ commands.createCommand(
|
||||||
state.context = context;
|
state.context = context;
|
||||||
|
|
||||||
// Saving what was in the canvas before the command
|
// Saving what was in the canvas before the command
|
||||||
const imgData = context.getImageData(
|
|
||||||
options.x,
|
|
||||||
options.y,
|
|
||||||
options.w,
|
|
||||||
options.h
|
|
||||||
);
|
|
||||||
state.box = {
|
state.box = {
|
||||||
x: options.x,
|
x: options.x,
|
||||||
y: options.y,
|
y: options.y,
|
||||||
|
@ -272,7 +266,19 @@ commands.createCommand(
|
||||||
const cutout = document.createElement("canvas");
|
const cutout = document.createElement("canvas");
|
||||||
cutout.width = state.box.w;
|
cutout.width = state.box.w;
|
||||||
cutout.height = state.box.h;
|
cutout.height = state.box.h;
|
||||||
cutout.getContext("2d").putImageData(imgData, 0, 0);
|
cutout
|
||||||
|
.getContext("2d")
|
||||||
|
.drawImage(
|
||||||
|
context.canvas,
|
||||||
|
options.x,
|
||||||
|
options.y,
|
||||||
|
options.w,
|
||||||
|
options.h,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
options.w,
|
||||||
|
options.h
|
||||||
|
);
|
||||||
state.original = new Image();
|
state.original = new Image();
|
||||||
state.original.src = cutout.toDataURL();
|
state.original.src = cutout.toDataURL();
|
||||||
}
|
}
|
||||||
|
|
|
@ -87,6 +87,7 @@ const layers = {
|
||||||
* @param {{w: number, h: number}} options.resolution
|
* @param {{w: number, h: number}} options.resolution
|
||||||
* @param {?string} options.group
|
* @param {?string} options.group
|
||||||
* @param {object} options.after
|
* @param {object} options.after
|
||||||
|
* @param {object} options.ctxOptions
|
||||||
* @returns
|
* @returns
|
||||||
*/
|
*/
|
||||||
registerLayer: (key = null, options = {}) => {
|
registerLayer: (key = null, options = {}) => {
|
||||||
|
@ -108,6 +109,9 @@ const layers = {
|
||||||
|
|
||||||
// If set, will insert the layer after the given one
|
// If set, will insert the layer after the given one
|
||||||
after: null,
|
after: null,
|
||||||
|
|
||||||
|
// Context creation options
|
||||||
|
ctxOptions: {},
|
||||||
});
|
});
|
||||||
|
|
||||||
// Calculate resolution
|
// Calculate resolution
|
||||||
|
@ -137,7 +141,7 @@ const layers = {
|
||||||
options.after.canvas.after(canvas);
|
options.after.canvas.after(canvas);
|
||||||
}
|
}
|
||||||
|
|
||||||
const ctx = canvas.getContext("2d");
|
const ctx = canvas.getContext("2d", options.ctxOptions);
|
||||||
|
|
||||||
// Path used for logging purposes
|
// Path used for logging purposes
|
||||||
const _layerlogpath = key
|
const _layerlogpath = key
|
||||||
|
|
|
@ -56,9 +56,11 @@ const colorBrushTool = () =>
|
||||||
|
|
||||||
state.drawLayer = imageCollection.registerLayer(null, {
|
state.drawLayer = imageCollection.registerLayer(null, {
|
||||||
after: imgLayer,
|
after: imgLayer,
|
||||||
|
ctxOptions: {willReadFrequently: true},
|
||||||
});
|
});
|
||||||
state.eraseLayer = imageCollection.registerLayer(null, {
|
state.eraseLayer = imageCollection.registerLayer(null, {
|
||||||
after: imgLayer,
|
after: imgLayer,
|
||||||
|
ctxOptions: {willReadFrequently: true},
|
||||||
});
|
});
|
||||||
state.eraseLayer.canvas.style.display = "none";
|
state.eraseLayer.canvas.style.display = "none";
|
||||||
state.eraseLayer.hide();
|
state.eraseLayer.hide();
|
||||||
|
|
Loading…
Reference in a new issue