I needs your help urgently !!!

As i am working on fabric js text feature stuck at some level

Below is the text curve made by someone
http://jsfiddle.net/EffEPi/qpJTz/

I needs to make same feature but some issue in terms of spacing.

Can i manage to space and radius accordingly the canvas area while adding text ?
for example if i put text it should take a curve according to the canvas area and then i can change manually.

As now its like just fix the area if small or big canvas its take a fixed curve and fixed spacing so if user puts big text its creating circle with very bad shape and all

See your own jsfiddle and you will see it's broken now.

http://jsfiddle.net/EffEPi/qpJTz/

Hello,

I see you updated the code to work with fabric 2.0 beta, and it works with fabric beta, however, the newest master version does not work:

08:32:01.885 fabric.curvedText.js:39 Uncaught TypeError: Cannot set property 'backgroundColor' of undefined
at fabric.curvedText.js:39
at fabric.curvedText.js:566
08:32:01.928 jquery-git.js:3873 jQuery.Deferred exception: fabric.CurvedText is not a constructor TypeError: fabric.CurvedText is not a constructor
at HTMLDocument. (file:///C:/wamp/www/CurvedTest/index.html:46:20)
at mightThrow (http://code.jquery.com/jquery-git.js:3589:29)
at process (http://code.jquery.com/jquery-git.js:3657:12) undefined
jQuery.Deferred.exceptionHook @ jquery-git.js:3873
08:32:01.930 jquery-git.js:3882 Uncaught TypeError: fabric.CurvedText is not a constructor
at HTMLDocument. (index.html:46)
at mightThrow (jquery-git.js:3589)
at process (jquery-git.js:3657)

All the best

can we add single or double stroke active curved text please help me out im new in fabric js

Bug with Scale and CurvedText

1 - Open : https://jsfiddle.net/EffEPi/qpJTz/
2 - Scale the CurvedText Selection
3 - Change the Text (CurvedText)
4 - BUG : The CurvedText is in wrong position

Do you know how to fix this problem?

Thx a lot

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

When exporting the canvas to jSON then reloading from jSON causes an error:

• TypeError: Cannot read property 'async' of undefined

To replicate:

var canvas          = new fabric.Canvas('canvas');
var default_text = 'This is Curved Text';
$('#add-text-curved').click(function(){
var textSample = new fabric.curvedText(default_text, {
    left: 200,
    top: 200,
    fontFamily: 'arial',
    fill: '#000000'
    originX: 'center',
    hasRotatingPoint: true,
    align: 'center',
    radius: 70
});
canvas.add(textSample).renderAll();
var data = JSON.stringify(canvas)
canvas.clear();
canvas.loadFromJSON(data)

Preview here: http://jsfiddle.net/fxLqx/

In my fabric.curvedText perfectly work in my magento application. But that same not work in prestashop 1.7.x. In core file show the error
" var fabric=global.fabric||(global.fabric={}),
extend=fabric.util.object.extend,
clone=fabric.util.object.clone;"
Uncaught TypeError: Cannot read property 'object' of undefined.

See http://jsfiddle.net/jhundley9109/z7dw9ekn/

By simply selecting all the elements on the canvas, some, actually all elements except one shifts. When clicking off the the group select the elements go back to place. The item that does not shift seems to be based on the index of the item in the canvas.getActiveObjects() array. This is why I put a obj.bringToFront() in the fiddle.

Hi @EffEPi ,
Love your work on "curved text" for fabricjs. I myself was working with fabricjs for a customization design lab, and have added your plugin. But there seems to be an issue with letter spacing whenever applying some text with some stylish fonts. I tried solving the issue with changing the radius, spacing and even the following lines in the source code :
// align = (this.spacing / 1.85) * (this.text.length - 1);
// angleRadians = (curAngle * (Math.PI / 180)).toFixed(2);
but all in vein.

Can you please give me an optimal solution for this.

Loads of thanks in advance.....

The demo in jsfiddle has an error (Uncaught TypeError: undefined is not a function )
any idea how to solve this?

thanks in advance.

While I was using a script to hat uses this library as a base, I saw that the actual Curved text comes (sometimes) with a rather weird spacing. I think this is a problem related to two/three letters in particular, such as a-i-o.

I'm not a programmer myself, so I can't really help, but I still wanted to point it out.

Hoping someone will resolve this bug.

Good day.

If you use a negative radius or reverse: true, the position (only y) of the circle seems to change with every letter you add to your text-string.

I am facing a problem while adding svg and curved text on my canvas using fabric js 2.0.3, it replies as

"Uncaught (in promise) TypeError: Cannot read property 'fromObject' of undefined"

Hi,

I noticed an issue in this great tool and don't know what to do, any help would be appreciated

The _render is method is called twice and hence the response is very slow in IE10/11 but not on all systems.

How can we improve the performance of it? It is very slow on IE10 and 11 for most of the machines on some it works fine. However, this one works fine http://jsfiddle.net/NHs8t/ on these browsers but don't know what the difference is

I would really appreciate your help..

Fahad

I only copy instance from index.html and past in my script js, after I see this error

fabric.curvedText.js:39 Uncaught TypeError: Cannot set property 'backgroundColor' of undefined at fabric.curvedText.js:39 at fabric.curvedText.js:566 (anonymous) @ fabric.curvedText.js:39 (anonymous) @ fabric.curvedText.js:566

script.js:100 Uncaught TypeError: fabric.CurvedText is not a constructor at window.onload (script.js:100)

Is the planned library update for fabricjs 2.x?

Hi EffEPi,

Nice plugin. Thanks for devoting your time to make curve text available. I have a question though, is there anyway to make the curve text fit nicely inside its bounding border/control box? Right now the text is at a lower right corner and if radius or spacing is increase or reverse is set then the text is at one place and the control box is at another place, very hard to resize/rotate...I've been looking at the code and couldn't figure out why, is that because function _calcBounds() return incorrect value?

Unfortunately the creator of this repo passed away earlier this year after an illness, which is why it hasn't been maintained

I will be attempting to update the repo to be compatible with v2 of fabric.

if anyone is interested in potentially collaborating on this, feel free to email me, address is in my profile

After adding bulge or small to large text, updating the text object its not render properly in mozilla firrefox,safari,IE 10.

I use your demo to show you how to see it.
http://jsfiddle.net/EffEPi/qpJTz/
http://screencast.com/t/ZCnvnK7gvf

i've tried your script, its a cool idea but problem is after i add the text, it's non editable or removable the error i get is

Uncaught TypeError: Cannot call method 'indexOf' of undefined

Both the following fiddles are exactly the same apart from the version of fabricJS being used.

1.7.2 version:
http://jsfiddle.net/yynr4hu2/

1.7.3 version:
http://jsfiddle.net/v0djnj5n/

The 1.7.2. version works fine, the 1.7.3. version does not. The saving process seems fine, but when loading the JSON nothing seems to happen.

Looking at the release notes of 1.7.3 ( https://github.com/kangax/fabric.js/releases/tag/v1.7.3 ) it seems that a change to :

"Improvement: Better error managment in loadFromJSON #3586"

may be responsible. Any ideas?

It is rendering something like this ,

Where as it should be something like this,

1> In first screenshot The text(fabric.curvedText) by default is rendered vertically from the extension.
2>In second screenshot (Plain fabricText ) it is rendered horizontally by default .

http://www.html5canvastutorials.com/labs/html5-canvas-text-along-arc-path/

Look into the arc algorithm and test if it is better than the current one

First of all thanks for this addon, I was waiting a long time for something like this.

I notice that when curvedText is active, changes like color, stroke, transparence, etc does not take effect until mouse is over selected text.

In other way, I can't aply shadow, blur, shadowoffset. in Json log appears those values, but not in canvas.

Sorry for my English, I'm a Spanish developer.

Thanks again.

Hi. Does it work on node.js?

When I programmatically set angle to 180, position of text is changed (deflected). It should behave like same as when I change angle by rotating through controls of object.

See Here

Drag the text to the top left corner and click "Zoom":

http://jsfiddle.net/qpJTz/155/

Even though it only zooms to 1.5 (150% zoom), the curved text goes haywire.

I'm working on a small app where you can prepare a design (curved text included) on fronted which will be rendered later with nodejs.

First, thank you for the library: it is really really useful.

I noticed one small bug: The curved text is not rendered correctly after you call canvas.toJSON() and canvas.loadFromJSON() if the radius or spacing got updated.

Steps to reproduce:

• Create a CurvedText (radius=100)
• Update the radius to 150
• canvas.toJSON()
• canvas.loadFromJSON()
• You will notice that the position of the first rendered letter is not the same as it was before saving.

http://jsfiddle.net/yrmek0es/

Thank

Why the first letter is alaways displaying.
I explain :

• when I edit my text and remove all characters, the first one steel appears until I type another one.

Why it doesn't disappear like any other character or like in text object ?

I test it on "official" fiddle : http://jsfiddle.net/EffEPi/qpJTz/

It's not very important but it's a lit bit disturbing for users.

I want to know when the rendering is finished for the effect?
I want to call a function on parent but _render is called multiple times, render is called before, initialize is called at the start.

Can we add any function like finished?

Curved Text Effects :
I just try this library. It's working fine. But I can't found the solution to apply effects (curved, arc, STRAIGHT, smallToLarge, largeToSmallTop, largeToSmallBottom, bulge) to curved text.
Please help me to solve this issue.
Thanks in advance.

Hi
I am using this library for generating curved/reverse curved text, with it's initial configuration and I am getting my result rotated 90 deg.
Here is the code :

var textSample = new fabric.CurvedText("Text", {
      radius: 100,
      spacing  : 20,
      fontSize : 50,
      percentage : 10
});

and I am getting this result

it's rotated to 90 deg.

Do I need any further configuration to fix this ?

First of all thanks for the plugin. It's been a lifesaver for the application I'm creating.

I'm having a few problems with accessing the canvas or the curved text objects after they've been added. So here's an example of my code.

var canvas = new fabric.StaticCanvas('canvas');

//this works
console.log(canvas);

fabric.Image.fromURL('http://url/IMG_0007.jpg', function(oImg) {
canvas.add(oImg);
});

//still works
console.log(canvas);

topLineText = new fabric.CurvedText('Happy Birthday!',{
left: 613,
top: 0,
textAlign: 'center',
fill: '#fff',
radius: 414,
fontSize: 100,
spacing: 6,
fontFamily: 'Mystery Quest',
strokeWidth: 3,
stroke: '#3B3A30'
});
canvas.add(topLineText).renderAll();

//breaks here, returns nothing. I'm not sure how i would access the new curved text.
console.log(canvas);

//this works to get image
oImg = canvas.getObjects()[0];

//but nothing here for text
console.log( canvas.getObjects()[1]);

Any help would be appreciated. Thanks

how to remove curvedText object ?

i use canvas.getActiveObject().remove() in another object is working , but if i use this code in curvedText not working , why ?
help me :)

Made my fiddle, based on original curvedText fiddle. http://jsfiddle.net/qpJTz/283/ we just can't see the circle, because he moved down. If we start dragging curvedText to the top, we'll see the circle, seems like he joined this group of letters. So in my project i'm using sendToBack function, and when i'm apply this function to curvedText objects, ALL other objects lose their coords. It's a critical bug, i counting on your help.

For regular text objects, the globalCompositeOperation = source-atop works to prevent the text from going outside the canvas background shape.

For curved text objects, that property doesn't do anything.

See fiddle: https://jsfiddle.net/rivdiv/k4963a9q/2/ (click both buttons)