github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-08-06 21:08:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

WIP

Browse Source
This commit is contained in:
Alejandro Alonso 2023-12-22 07:38:57 +01:00
parent 4cf1406cae
commit fa84b1e67d
1 changed files with 31 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
frontend/src/app/main/ui/workspace/viewport/sk_impl.js
View File

@ -85,25 +85,27 @@ class CanvasKit {
drawRect(canvas, shape) { drawRect(canvas, shape) {
let blur = null let blur = null
const paint = new this.CanvasKit.Paint(); const paint = new this.CanvasKit.Paint();
paint.setAntiAlias(true);
paint.setBlendMode(this.getBlendModeFromObject(shape)); paint.setBlendMode(this.getBlendModeFromObject(shape));
const rx = shape['rx'] || shape['r1'] || 0; const rx = shape['rx'] || shape['r1'] || 0;
const ry = shape['ry'] || shape['r1'] || 0; const ry = shape['ry'] || shape['r1'] || 0;
if (shape.blur) { 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 && (shape.shadow.length > 0)) { if (shape.shadow) {
const paintShadow = new this.CanvasKit.Paint(); for (const shadow of shape.shadow.reverse()) {
const [first] = shape.shadow const paintShadow = new this.CanvasKit.Paint();
const color = this.CanvasKit.parseColorString(first.color.color) const color = this.CanvasKit.parseColorString(shadow.color.color)
color[3] = first.color.opacity color[3] = shadow.color.opacity
const shadow = this.CanvasKit.ImageFilter.MakeDropShadowOnly(first['offset-x'], first['offset-y'], first.blur, first.blur, color, blur); const shadowFilter = this.CanvasKit.ImageFilter.MakeDropShadowOnly(shadow['offset-x'], shadow['offset-y'], shadow.blur, shadow.blur, color, blur);
const shadowRect = this.CanvasKit.RRectXY( const shadowRect = this.CanvasKit.RRectXY(
this.CanvasKit.LTRBRect(shape.x, shape.y, shape.x + shape.width, shape.y + shape.height), this.CanvasKit.LTRBRect(shape.x, shape.y, shape.x + shape.width, shape.y + shape.height),
rx, rx,
ry) ry)
paintShadow.setImageFilter(shadow) paintShadow.setImageFilter(shadowFilter)
canvas.drawRRect(shadowRect, paintShadow) canvas.drawRRect(shadowRect, paintShadow)
paintShadow.delete() paintShadow.delete()
}
} }
// Drawing fills // Drawing fills
if (shape.fills) { if (shape.fills) {
@ -162,21 +164,22 @@ class CanvasKit {
paint.setAntiAlias(true); paint.setAntiAlias(true);
paint.setBlendMode(this.getBlendModeFromObject(shape)); paint.setBlendMode(this.getBlendModeFromObject(shape));
if (shape.blur) { 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 && (shape.shadow.length > 0)) { if (shape.shadow) {
const paintShadow = new this.CanvasKit.Paint(); for (const shadow of shape.shadow.reverse()) {
const [first] = shape.shadow const paintShadow = new this.CanvasKit.Paint();
const color = this.CanvasKit.parseColorString(first.color.color) const color = this.CanvasKit.parseColorString(shadow.color.color)
color[3] = first.color.opacity color[3] = shadow.color.opacity
const shadow = this.CanvasKit.ImageFilter.MakeDropShadowOnly(first['offset-x'], first['offset-y'], first.blur, first.blur, color, blur); const shadowFilter = this.CanvasKit.ImageFilter.MakeDropShadowOnly(shadow['offset-x'], shadow['offset-y'], shadow.blur, shadow.blur, color, blur);
const shadowRect = this.CanvasKit.RRectXY( const shadowRect = this.CanvasKit.RRectXY(
this.CanvasKit.LTRBRect(shape.x, shape.y, shape.x + shape.width, shape.y + shape.height), this.CanvasKit.LTRBRect(shape.x, shape.y, shape.x + shape.width, shape.y + shape.height),
0, 0,
0) 0)
paintShadow.setImageFilter(shadow) paintShadow.setImageFilter(shadowFilter)
canvas.drawOval(shadowRect, paintShadow) canvas.drawOval(shadowRect, paintShadow)
paintShadow.delete() paintShadow.delete()
}
} }
// Drawing fills // Drawing fills
if (shape.fills) { if (shape.fills) {
@ -214,7 +217,6 @@ class CanvasKit {
} }
if (shape.blur) { if (shape.blur) {
const paintBlur = new this.CanvasKit.Paint(); 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) { if (!shape.shadow) {
const blurRect = this.CanvasKit.RRectXY( const blurRect = this.CanvasKit.RRectXY(
this.CanvasKit.LTRBRect(shape.x, shape.y, shape.x + shape.width, shape.y + shape.height), this.CanvasKit.LTRBRect(shape.x, shape.y, shape.x + shape.width, shape.y + shape.height),