Closed lavrton closed 4 months ago
We have rendering issues with text elements with they have both shadow + stroke.
Steps to reproduce:
{ "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 }
Set minimal store scale: store.setScale(0.05)
store.setScale(0.05)
Export store into image.
You will see that such text is blurred:
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?
Fixed
We have rendering issues with text elements with they have both shadow + stroke.
Steps to reproduce:
Set minimal store scale:
store.setScale(0.05)
Export store into image.
You will see that such text is blurred:
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?