diff --git a/frontend/src/app/main/ui/workspace/viewport/sk_impl.js b/frontend/src/app/main/ui/workspace/viewport/sk_impl.js index 57b490fac7..37a6307ef8 100644 --- a/frontend/src/app/main/ui/workspace/viewport/sk_impl.js +++ b/frontend/src/app/main/ui/workspace/viewport/sk_impl.js @@ -83,10 +83,28 @@ class CanvasKit { } drawRect(canvas, shape) { + let blur = null const paint = new this.CanvasKit.Paint(); paint.setBlendMode(this.getBlendModeFromObject(shape)); const rx = shape['rx'] || shape['r1'] || 0; const ry = shape['ry'] || shape['r1'] || 0; + if (shape.blur) { + const paintBlur = new this.CanvasKit.Paint(); + } + if (shape.shadow && (shape.shadow.length > 0)) { + const paintShadow = new this.CanvasKit.Paint(); + const [first] = shape.shadow + const color = this.CanvasKit.parseColorString(first.color.color) + color[3] = first.color.opacity + const shadow = this.CanvasKit.ImageFilter.MakeDropShadowOnly(first['offset-x'], first['offset-y'], first.blur, first.blur, color, blur); + const shadowRect = this.CanvasKit.RRectXY( + this.CanvasKit.LTRBRect(shape.x, shape.y, shape.x + shape.width, shape.y + shape.height), + rx, + ry) + paintShadow.setImageFilter(shadow) + canvas.drawRRect(shadowRect, paintShadow) + paintShadow.delete() + } // Drawing fills if (shape.fills) { for (const fill of shape.fills.reverse()) { @@ -123,10 +141,8 @@ class CanvasKit { canvas.drawRRect(rr, paint); } } - let blur = null if (shape.blur) { const paintBlur = new this.CanvasKit.Paint(); - blur = this.CanvasKit.ImageFilter.MakeBlur(shape.blur.value, shape.blur.value, this.CanvasKit.TileMode.Decal, null); if (!shape.shadow) { const blurRect = this.CanvasKit.RRectXY( this.CanvasKit.LTRBRect(shape.x, shape.y, shape.x + shape.width, shape.y + shape.height), @@ -137,6 +153,17 @@ class CanvasKit { paintBlur.delete() } } + paint.delete(); + } + + drawCircle(canvas, shape) { + let blur = null + const paint = new this.CanvasKit.Paint(); + paint.setAntiAlias(true); + paint.setBlendMode(this.getBlendModeFromObject(shape)); + if (shape.blur) { + const paintBlur = new this.CanvasKit.Paint(); + } if (shape.shadow && (shape.shadow.length > 0)) { const paintShadow = new this.CanvasKit.Paint(); const [first] = shape.shadow @@ -145,19 +172,12 @@ class CanvasKit { const shadow = this.CanvasKit.ImageFilter.MakeDropShadowOnly(first['offset-x'], first['offset-y'], first.blur, first.blur, color, blur); const shadowRect = this.CanvasKit.RRectXY( this.CanvasKit.LTRBRect(shape.x, shape.y, shape.x + shape.width, shape.y + shape.height), - rx, - ry) + 0, + 0) paintShadow.setImageFilter(shadow) - canvas.drawRRect(shadowRect, paintShadow) + canvas.drawOval(shadowRect, paintShadow) paintShadow.delete() } - paint.delete(); - } - - drawCircle(canvas, shape) { - const paint = new this.CanvasKit.Paint(); - paint.setAntiAlias(true); - paint.setBlendMode(this.getBlendModeFromObject(shape)); // Drawing fills if (shape.fills) { for (const fill of shape.fills.reverse()) { @@ -192,7 +212,6 @@ class CanvasKit { canvas.drawOval(rr, paint); } } - let blur = null if (shape.blur) { const paintBlur = new this.CanvasKit.Paint(); blur = this.CanvasKit.ImageFilter.MakeBlur(shape.blur.value, shape.blur.value, this.CanvasKit.TileMode.Decal, null); @@ -206,20 +225,6 @@ class CanvasKit { paintBlur.delete() } } - if (shape.shadow && (shape.shadow.length > 0)) { - const paintShadow = new this.CanvasKit.Paint(); - const [first] = shape.shadow - const color = this.CanvasKit.parseColorString(first.color.color) - color[3] = first.color.opacity - const shadow = this.CanvasKit.ImageFilter.MakeDropShadowOnly(first['offset-x'], first['offset-y'], first.blur, first.blur, color, blur); - const shadowRect = this.CanvasKit.RRectXY( - this.CanvasKit.LTRBRect(shape.x, shape.y, shape.x + shape.width, shape.y + shape.height), - 0, - 0) - paintShadow.setImageFilter(shadow) - canvas.drawOval(shadowRect, paintShadow) - paintShadow.delete() - } paint.delete(); }