polotno-project / polotno-board

Roadmap and bug-tracker for the Polotno project.
https://polotno.dev/
9 stars 1 forks source link

Rendering bug #68

Closed lavrton closed 4 months ago

lavrton commented 1 year ago

We have rendering issues with text elements with they have both shadow + stroke.

Steps to reproduce:

  1. Load this JSON:
{
    "width": 1000,
    "height": 1000,
    "fonts": [],
    "pages": [
        {
            "id": "ljlJ9M2caA",
            "children": [
                {
                    "id": "Zb-qdd2hZ2",
                    "type": "text",
                    "name": "",
                    "opacity": 1,
                    "visible": true,
                    "selectable": true,
                    "removable": true,
                    "alwaysOnTop": false,
                    "showInExport": true,
                    "x": -33.22361639105268,
                    "y": 45.46290404061439,
                    "width": 1088,
                    "height": 407,
                    "rotation": 0,
                    "animations": [],
                    "blurEnabled": false,
                    "blurRadius": 0,
                    "brightnessEnabled": false,
                    "brightness": 0,
                    "sepiaEnabled": false,
                    "grayscaleEnabled": false,
                    "shadowEnabled": false,
                    "shadowBlur": 0,
                    "shadowOffsetX": 19.40011852399264,
                    "shadowOffsetY": 19.40011852399264,
                    "shadowColor": "#000",
                    "shadowOpacity": 0.5,
                    "draggable": true,
                    "resizable": true,
                    "contentEditable": true,
                    "styleEditable": true,
                    "text": "PNG",
                    "placeholder": "",
                    "fontSize": 338,
                    "fontFamily": "Anton",
                    "fontStyle": "normal",
                    "fontWeight": "normal",
                    "textDecoration": "",
                    "fill": "rgba(250,8,75,1)",
                    "align": "center",
                    "verticalAlign": "top",
                    "strokeWidth": 32,
                    "stroke": "black",
                    "lineHeight": 1.2,
                    "letterSpacing": 0.1,
                    "backgroundEnabled": false,
                    "backgroundColor": "#7ED321",
                    "backgroundOpacity": 1,
                    "backgroundCornerRadius": 0.5,
                    "backgroundPadding": 0.5
                },
                {
                    "id": "lOQpDDcgEG",
                    "type": "text",
                    "name": "",
                    "opacity": 1,
                    "visible": true,
                    "selectable": true,
                    "removable": true,
                    "alwaysOnTop": false,
                    "showInExport": true,
                    "x": 106.7763836089473,
                    "y": 395.90734848506196,
                    "width": 808,
                    "height": 407,
                    "rotation": 0,
                    "animations": [],
                    "blurEnabled": false,
                    "blurRadius": 10,
                    "brightnessEnabled": false,
                    "brightness": 0,
                    "sepiaEnabled": false,
                    "grayscaleEnabled": false,
                    "shadowEnabled": true,
                    "shadowBlur": 0,
                    "shadowOffsetX": 20,
                    "shadowOffsetY": 20,
                    "shadowColor": "black",
                    "shadowOpacity": 0.5,
                    "draggable": true,
                    "resizable": true,
                    "contentEditable": true,
                    "styleEditable": true,
                    "text": "PNG",
                    "placeholder": "",
                    "fontSize": 338,
                    "fontFamily": "Anton",
                    "fontStyle": "normal",
                    "fontWeight": "normal",
                    "textDecoration": "",
                    "fill": "rgba(250,8,75,1)",
                    "align": "center",
                    "verticalAlign": "top",
                    "strokeWidth": 32,
                    "stroke": "black",
                    "lineHeight": 1.2,
                    "letterSpacing": 0,
                    "backgroundEnabled": false,
                    "backgroundColor": "#7ED321",
                    "backgroundOpacity": 1,
                    "backgroundCornerRadius": 0.5,
                    "backgroundPadding": 0.5
                }
            ],
            "width": "auto",
            "height": "auto",
            "background": "white",
            "bleed": 0,
            "duration": 5000
        }
    ],
    "unit": "px",
    "dpi": 300
}
  1. Set minimal store scale: store.setScale(0.05)

  2. Export store into image.

You will see that such text is blurred:

polotno (10)

Why is it blurred? I think a stroke + shadow fire "buffer canvas" render logic. But because the scale is small, it produced smaller number of pixels. Do we need to fix it from the Konva side?

lavrton commented 4 months ago

Fixed