EffEPi / fabric.curvedText

Allows you to create curved text - extension to fabric.js
43 stars 41 forks source link

Support for shadows, text grouping and new line #25

Open CJX3M opened 8 years ago

CJX3M commented 8 years ago

I'm working on a little app where the user will be able to save and load saving the json string on a NoSQL DB.

Its works all right, but I'm having issues saving several text properties, like it would be shadow. This is a string of my of my test

{  
    "objects":[  
        {  
            "type":"group",
            "originX":"left",
            "originY":"top",
            "left":128.91,
            "top":-4.09,
            "width":228.41,
            "height":197.06,
            "fill":"rgb(0,0,0)",
            "stroke":null,
            "strokeWidth":1,
            "strokeDashArray":null,
            "strokeLineCap":"butt",
            "strokeLineJoin":"miter",
            "strokeMiterLimit":10,
            "scaleX":1,
            "scaleY":1,
            "angle":0,
            "flipX":false,
            "flipY":false,
            "opacity":1,
            "shadow":null,
            "visible":true,
            "clipTo":null,
            "backgroundColor":"",
            "fillRule":"nonzero",
            "globalCompositeOperation":"source-over",
            "id":"G1447269255066651",
            "objects":[  
                {  
                    "type":"curvedText",
                    "originX":"left",
                    "originY":"top",
                    "left":-51.2,
                    "top":-42.07,
                    "width":56.46,
                    "height":62.06,
                    "fill":"rgb(0,0,0)",
                    "stroke":null,
                    "strokeWidth":1,
                    "strokeDashArray":null,
                    "strokeLineCap":"butt",
                    "strokeLineJoin":"miter",
                    "strokeMiterLimit":10,
                    "scaleX":1,
                    "scaleY":1,
                    "angle":90.45,
                    "flipX":false,
                    "flipY":false,
                    "opacity":1,
                    "shadow":null,
                    "visible":true,
                    "clipTo":null,
                    "backgroundColor":"",
                    "fillRule":"nonzero",
                    "globalCompositeOperation":"source-over",
                    "id":"CT14472691661461451",
                    "text":"My",
                    "fontSize":40,
                    "fontWeight":"normal",
                    "fontFamily":"Times New Roman",
                    "fontStyle":"",
                    "lineHeight":1.16,
                    "textDecoration":"",
                    "textAlign":"left",
                    "textBackgroundColor":"",
                    "radius":"100.00",
                    "spacing":"10.00",
                    "reverse":false,
                    "effect":"curved",
                    "range":5,
                    "smallFont":10,
                    "largeFont":30
                },
                {  
                    "type":"curvedText",
                    "originX":"left",
                    "originY":"top",
                    "left":14.8,
                    "top":-98.02,
                    "width":98.91,
                    "height":195.35,
                    "fill":"rgb(0,0,0)",
                    "stroke":null,
                    "strokeWidth":1,
                    "strokeDashArray":null,
                    "strokeLineCap":"butt",
                    "strokeLineJoin":"miter",
                    "strokeMiterLimit":10,
                    "scaleX":1,
                    "scaleY":1,
                    "angle":0.41,
                    "flipX":false,
                    "flipY":false,
                    "opacity":1,
                    "shadow":null,
                    "visible":true,
                    "clipTo":null,
                    "backgroundColor":"",
                    "fillRule":"nonzero",
                    "globalCompositeOperation":"source-over",
                    "id":"CT14472691898188172",
                    "text":"ScrapBook",
                    "fontSize":40,
                    "fontWeight":"normal",
                    "fontFamily":"Times New Roman",
                    "fontStyle":"",
                    "lineHeight":1.16,
                    "textDecoration":"",
                    "textAlign":"left",
                    "textBackgroundColor":"",
                    "radius":"100.00",
                    "spacing":"10.00",
                    "reverse":false,
                    "effect":"curved",
                    "range":5,
                    "smallFont":10,
                    "largeFont":30
                }
            ]
        }
    ],
    "background":""
}

The shadow property its null, and it must be filled with the shadow left, top, right and color values. Where do I need to adjust the code for this to be saved and loaded onto the object? I can't find where to adjust the code.

Also, I'm getting an issue. When I try to group the curved elements, the position and rotation of some of the selected texts is altered.

As you can notice in the json, there's 2 curved text elements in a group. In order to achieve my desired position of the curved texts, I had to move them and rotate them around so when I select them to group them, I end up with the desired outcome.

As a final note, it would be nice to be able to write the text on several lines and that this line breaks appear correctly. I had't been able to figure out how to add this, but i'm pretty sure that when I get to find a line break, I need to increase the text group top position by the height of the letters, or something alike

panthar1 commented 8 years ago

+1 to shadows and strokes correctly rendering, as well as new line.

I took a look at it for a few minutes, but I could not figure out what was missing/what needed to be done. I might have some time to look at this again, if I do I will post the solution, but if original maintainer has any insight into what's going on/how to fix these bugs, that would be great.

mukeshcp commented 8 years ago

Any update on Multi Lines ??????