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

Merge pull request #296 from kmanaseryan/fix/clipping-mask-2nd-layer-295

Browse Source 
Issue #295 - Fix the bug related to 2nd clipped layer
This commit is contained in:
Vilius 2022-02-22 22:32:26 +02:00 committed by GitHub
commit ff82f90435
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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;
}