artin/miniPaint
1
0
Fork 0
mirror of https://github.com/viliusle/miniPaint.git synced 2026-02-06 14:11:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Issue #295 - Fix the bug related to 2nd clipped layer

Browse Source
This commit is contained in:
Karlen Manaseryan 2022-02-20 19:00:55 +04:00
parent 7cc20aaaa6
commit 82f641631b
1 changed files with 20 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/js/core/base-layers.js
View File

@ -176,7 +176,9 @@ class Base_layers_class {
config.WIDTH
);
this.renderObjects(this.ctx, newCanvas, layers_sorted);
this.renderObjects(this.ctx, newCanvas, layers_sorted, ()=>{
this.ctx.save();
});
//grid
this.Base_gui.draw_grid(this.ctx);
@ -244,16 +246,14 @@ class Base_layers_class {
* @param {canvas.context} ctx - Main canvas context where it needs to be rendered
* @param {canvas} tempCanvas - A temporary canvas which is a copy of the original canvas, but will be used if there will be needed to isolate an effect from others
* @param {Object[]} layers - Array of layers
* @param {Function} prepare - An optional function to prepare temporary canvas before the render if needed
* @param {Function} prepare - An optional function to prepare temporary and main canvases before the render if needed
* @param {Function} shouldSkip - An optional boolean function for skipping those layers which are not needed to be rendered
*/
renderObjects(ctx, tempCanvas, layers, prepare, shouldSkip) {
const tempCtx = tempCanvas.getContext("2d");
// Prepare the temporary canvas if needed
prepare && prepare(tempCtx);
this.ctx.save();
prepare && prepare();
for (var i = layers.length - 1; i >= 0; i--) {
var layer = layers[i];
const nextLayer = layers[i - 1];
@ -299,8 +299,12 @@ class Base_layers_class {
ctx.restore();
ctx.drawImage(tempCanvas, 0, 0);
// After render, let's clear the temporary canvas just in case there are other layers having clipping mask
tempCtx.clearRect(0, 0, tempCanvas.width, tempCanvas.height);
// Prepare canvas to since we called restore
prepare && prepare();
// Clear temporary canvas
tempCtx.globalCompositeOperation = null;
tempCtx.clearRect(0, 0, 1200, 1200);
}
} else {
ctx.globalAlpha = layer.opacity / 100;
@ -318,12 +322,13 @@ class Base_layers_class {
this.ctx_preview.save();
this.ctx_preview.clearRect(0, 0, w, h);
//prepare scale
this.ctx_preview.scale(w / config.WIDTH, h / config.HEIGHT);
const newCanvas = this.createNewCanvas(this.ctx_preview);
this.renderObjects(this.ctx_preview, newCanvas, layers, (tempCtx) => {
tempCtx.scale(w / config.WIDTH, h / config.HEIGHT);
newCanvas.getContext("2d").scale(w / config.WIDTH, h / config.HEIGHT);
this.renderObjects(this.ctx_preview, newCanvas, layers, () => {
this.ctx_preview.save();
//prepare scale
this.ctx_preview.scale(w / config.WIDTH, h / config.HEIGHT);
});
this.ctx_preview.restore();
@ -714,7 +719,9 @@ class Base_layers_class {
ctx.canvas.height
);
const layers_sorted = this.get_sorted_layers();
this.renderObjects(ctx, newCanvas, layers_sorted, null, (value) => {
this.renderObjects(ctx, newCanvas, layers_sorted, ()=>{
ctx.save();
}, (value) => {
if (value.visible == false || value.type == null) {
return true;
}