Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

text styles not working correctly on latest version (4.3.0) #6818

Closed
uea30475 opened this issue Jan 18, 2021 · 2 comments · Fixed by #6974
Closed

text styles not working correctly on latest version (4.3.0) #6818

uea30475 opened this issue Jan 18, 2021 · 2 comments · Fixed by #6974
Labels
fix-next needs_confirmation

Comments

@uea30475
Copy link

uea30475 commented Jan 18, 2021 •
edited
Loading

Description:

Underline and line-through display the wrong color. At the first time, the color of the underline and line-through are black when we update selected a portion of the text

Testing environment:

  • Nodejs v13 and chrome v87

image
image

<!DOCTYPE html>
<html>

<head>
    <title>Demo</title>
    <meta charset="utf-8" />
    <script src="http://fabricjs.com/lib/fabric.js"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.2.0/fabric.js"></script> -->
</head>

<body>
    <button onclick="updateStyle()">Underline</button>
    <canvas id="canvas" width="500" height="500" style="border: 1px solid red;"></canvas>
    <script type="text/javascript">
        var canvas = new fabric.Canvas("canvas");
        var itext = new fabric.IText('hello\nworld', {
            left: 50,
            top: 50,
            fontFamily: 'Helvetica',
            fill: '#333',
            lineHeight: 1.1,
            styles: {
                0: {
                    0: {
                        fill: 'red',
                        underline: true,
                        linethrough: true
                    },
                    1: {
                        fill: 'blue',
                        underline: true,
                        linethrough: true
                    },
                    2: {
                        fill: 'blue',
                        underline: true,
                        linethrough: true
                    },
                    3: {
                        fill: 'yellow',
                        underline: true,
                        linethrough: true
                    },
                },
            }
        });
        var itext2 = new fabric.IText('Version 4.2.0', {
            left: 150,
            top: 150,
            fontFamily: 'Helvetica',
            fill: 'blue',
            lineHeight: 1.1,
            styles: {
                0: {
                    0: {
                        underline: true,
                        linethrough: true
                    },
                    3: {
                        fill: 'red',
                        underline: true,
                        linethrough: true
                    },
                },
            }
        });
        canvas.add(itext);
        canvas.add(itext2);
        canvas.renderAll();

        function updateStyle() {
            var acitveObject = canvas.getActiveObject();
            if (!acitveObject) return;
            var start = acitveObject.selectionStart;
            var end = acitveObject.selectionEnd;
            acitveObject.setSelectionStyles({
                underline: true
            }, start, end);
            canvas.renderAll();

        }
    </script>
</body>

</html>

Expected:

  • Underline and line-through color display same as fill color

Actual:

  • Underline and line-through display with black
@asturur
Copy link
Member

asturur commented Jan 27, 2021

i did not check this yet, sorry. I ll get here

This was referenced Mar 31, 2021
Merged
Closed
Closed
@asturur
Copy link
Member

asturur commented Mar 31, 2021

@ickata @nuttwerx @LenkouAndrei

Thanks all for reporting it is a regression of the last version a pr is open to fix.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
fix-next needs_confirmation
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(fabric.Text): underline color with text style ( regression from textpath ) fabricjs/fabric.js
2 participants
@asturur @uea30475