search

fabricjs / fabric.js

Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser
http://fabricjs.com
Other
29.12k stars 3.52k forks source link

Curve Text Feature [$200] #729

Closed dean555 closed 4 years ago

dean555 commented 11 years ago

Hi

Loving the product but we desperatly need curve text. I've seen that it's on the roadmap but would like to ask if there is any progress or anything that can be done to help?

Great work guys!

There is a $200 open bounty on this issue. Add to the bounty at Bountysource.

mojo5000 commented 11 years ago

Have you looked at something like this: http://tympanus.net/Development/Arctext/

Or is the challenge to get curved text in the canvas with object controls?

On Mon, Jul 1, 2013 at 9:20 AM, dean555 notifications@github.com wrote:

Hi

Loving the product but we desperatly need curve text. I've seen that it's on the roadmap but would like to ask if there is any progress or anything that can be done to help?

Great work guys!

— Reply to this email directly or view it on GitHubhttps://github.com/kangax/fabric.js/issues/729 .

dean555 commented 11 years ago

Hi mojo5000

We need it to work with fabric :(

kirkh34 commented 11 years ago

I need this functionality as well. I'm using fabric to create a T-shirt designer app. I think this is a common app using fabric. All good T-shirt apps allow text warping. It is huge in T-shirt design. Please someone write this!! Fabric is 99% perfect and this is the missing link!

imomin commented 11 years ago

I am working on T-shirt designer app as well. I wonder if we should join hands rather than competing with each other ;). BTW check out the https://github.com/imomin/fabric.curvedText.

kirkh34 commented 11 years ago

I tried the new code but still can't get it to work for me. Are you able to use this code to curve text successfully? I'm working on a t-shirt app that will have layers similar to photoshop w/ hide/lock functions for each layer/canvas item. Can you post a jsfiddle of this working for you?

imomin commented 11 years ago

Here you go! http://jsfiddle.net/NHs8t/

somecodemonkey commented 11 years ago

@imomin you are a godsend thx

dean555 commented 11 years ago

Hi @imomin

Nice work but you cannot make the text straight also you have 3 sliders. Can we make it using one single slider so that user adds a text which is straight and then he can curve it up/down using a slider.

And the curve text should also work with load from SVG and JSON and export as well.

But excellent job till now.

imomin commented 11 years ago

@dean555 FYI, I pulled somebody else's project and made minor changes. So, the credit goes to him. In my project I am using only spacement slider with curve up, curve down and in-line button. Based on the option selected, curve up/down or in-line I swap between Curve Text or standard Text object.

I started my project few weeks ago and I haven't got to SVG/JSON export yet. I will make changes to it as I move forward.

somecodemonkey commented 11 years ago

I noticed its a group of fabric.text objects is there any performance advantages of using this rather than rendering each letter individually?

Jochuaf commented 11 years ago

Hi all, I've just started with fabricjs a few weeks ago. Since I want to work with curved text, I've implemented your code into my project. My question will probably seem very stupid for you (actually, I am a beginner), but I would like to know how you can select the text group, like "canvas.getActiveObject()" for a regular text ? I hope I will get a reply. Anyway, thanks to Imomin & Skritz for your amazing work. ps : sorry for my english level, I am french

EffEPi commented 11 years ago

I started to work on my own curved text, I am NEW to fabric and OO javascript and HTML5/Canvas, so I am having some issues trying to make it work.

http://jsfiddle.net/t4VPQ/

Any hint would be greatly appreciated.

My Goal is to make a fabric object that acts like the others (getText, setText, set properties, export SVN, JSON, etc...)

imomin commented 11 years ago

In your $(function(){....} on line 643 add var canvas = new fabric.Canvas('c'); and add comma after left:50,.Hopefully this will help you move forward. http://jsfiddle.net/t4VPQ/14/

EffEPi commented 11 years ago

yes, Thank you, saw that after I updated the comment :-) was a copy/paste error. The problem is that I can't seems to render the text on the main canvas.

EffEPi commented 11 years ago

Ok, a lot of functionality is ready... I just can't figure it out how to refresh the render on the fly.. dang

EffEPi commented 11 years ago

I have a almost fully working example. I need to figure out how to make the resize work as well as test the exports (SVG and jSON)

EffEPi commented 11 years ago

You want curved Text that acts like normal TEXT ??

Here it is :-D

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

https://github.com/EffEPi/fabric.curvedText

tiredenzo commented 11 years ago

Nice work @EffEPi :) I was really looking towards this feature I was actually thinking of implementing a SVG like method http://www.svgbasics.com/text2.html http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-text-path-tutorial/

EffEPi commented 11 years ago

That gives me a new idea.. freehand Text. Using the drawing mode create a path and then set the text around that path.. but this is out of the scope of this thread

tiredenzo commented 11 years ago

A bit like http://csswarp.eleqtriq.com/ ? :)

kangax commented 11 years ago

Yeah, looks pretty badass. We're planning to have text-on-path sometime in the future!

On Sun, Sep 29, 2013 at 5:22 PM, tiredenzo notifications@github.com wrote:

A bit like http://csswarp.eleqtriq.com/ ? :)

— Reply to this email directly or view it on GitHubhttps://github.com/kangax/fabric.js/issues/729#issuecomment-25322161 .

Jochuaf commented 11 years ago

@EffEPi : Whoaaaaaw! I wish I had your skills...

EffEPi commented 11 years ago

@Jochuaf let me know if you have any improvements for it. I am already planning on a new rewrite that maybe doesn't use grouping and export to SVN as paths and also imports from path... to do that I have to learn SVN rendering a bit better

Jochuaf commented 11 years ago

EffEPi : thanks for the answer. I've managed to implement your code into my the project I am working on (light product customizer). I have to say it works very well. Attaching text to path would be also great and I think I wouldn't be the only one interested in that :-)

dean555 commented 10 years ago

Hi everyone

Have there been any developments with getting curve text to work? getting desperate now... :(

maza23 commented 10 years ago

@EffEPi how would you do this extending from IText instead of Text? I need the text to be editable.

goldguy23 commented 10 years ago

Has anyone solved this issue yet? My site is waiting on a solution that uses a slider to curve text. Willing to pay a developer to develop this.

kangax commented 10 years ago

@goldguy23 no solution yet and there's too much other stuff for me to go through until I can get to this. There's already $100 bounty on this, but this is almost certainly very small for a feature like this (worth at least 1K+; a lot of stuff to consider)

goldguy23 commented 10 years ago

If I made the bounty 1000 when do you think you could work on this. We are trying to launch our new site by mid September. If you can't get to this then I understand and we would just wait another year as it's a nice to have not a need to have.

Marc Goldberg Founder www.tasseltoppers.com

On Aug 6, 2014, at 8:09 AM, Juriy Zaytsev notifications@github.com wrote:

@goldguy23 no solution yet and there's too much other stuff for me to go through until I can get to this. There's already $100 bounty on this, but this is almost certainly very small for a feature like this (worth at least 1K+; a lot of stuff to consider)

— Reply to this email directly or view it on GitHub.

kangax commented 10 years ago

No time to work on this now, sorry.

kangax

On Wed, Aug 6, 2014 at 2:27 PM, goldguy23 notifications@github.com wrote:

If I made the bounty 1000 when do you think you could work on this. We are trying to launch our new site by mid September. If you can't get to this then I understand and we would just wait another year as it's a nice to have not a need to have.

Marc Goldberg Founder www.tasseltoppers.com

On Aug 6, 2014, at 8:09 AM, Juriy Zaytsev notifications@github.com wrote:

@goldguy23 no solution yet and there's too much other stuff for me to go through until I can get to this. There's already $100 bounty on this, but this is almost certainly very small for a feature like this (worth at least 1K+; a lot of stuff to consider)

— Reply to this email directly or view it on GitHub.

— Reply to this email directly or view it on GitHub https://github.com/kangax/fabric.js/issues/729#issuecomment-51327514.

EffEPi commented 10 years ago

@maza23 don't have much time for extending this right now, but as soon as I can I will @goldguy23 have you looked at my plugin ? maybe it will be a nice patch until you can have a fully supported curved text

goldguy23 commented 10 years ago

@EffEPi We have spent many hours trying to manipulate the plugin you have created but are not able to get it on a simple sliding bar to bend the text evenly upwards and downwards. We cannot get the spacing right. We will wait patiently for a solution

EffEPi commented 10 years ago

Can you make a jfiddle and post it so I can check the problem?

Sent via the Samsung GALAXY S®4, an AT&T 4G LTE smartphone

-------- Original message --------
From: goldguy23 notifications@github.com
Date:08/17/2014 21:03 (GMT-05:00)
To: "kangax/fabric.js" fabric.js@noreply.github.com
Cc: EffEPi fabrizio@bibivu.com
Subject: Re: [fabric.js] Curve Text Feature [$200](#729)
@EffEPi We have spent many hours trying to manipulate the plugin you have created but are not able to get it on a simple sliding bar to bend the text evenly upwards and downwards. We cannot get the spacing right. We will wait patiently for a solution — Reply to this email directly or view it on GitHub.
EffEPi commented 10 years ago

Just uploaded a new version.

@goldguy23 I believe you want to look into the manipulation of the spacing and radius at the same time, as the radius decrease (start with a very high radius), the spacing needs to increase

goldguy23 commented 10 years ago

@EffEPi where is the link to view the new changes?

EffEPi commented 10 years ago

I will create a fiddle very soon and add it to the page.

Sent via the Samsung GALAXY S®4, an AT&T 4G LTE smartphone

-------- Original message --------
From: goldguy23 notifications@github.com
Date:09/06/2014 14:02 (GMT-05:00)
To: "kangax/fabric.js" fabric.js@noreply.github.com
Cc: EffEPi fabrizio@bibivu.com
Subject: Re: [fabric.js] Curve Text Feature [$200](#729)
@EffEPi where is the link to view the new changes? — Reply to this email directly or view it on GitHub.
goldguy23 commented 10 years ago

I see you are adding a "Path" to the text to implement the curve feature, that is not bad, but can you implement the range input to curve the text instead of using the mouse drag and drop.

From: lirmont [mailto:notifications@github.com] Sent: Wednesday, September 10, 2014 1:13 PM To: kangax/fabric.js Cc: goldguy23 Subject: Re: [fabric.js] Curve Text Feature $200

In response to the bounty, I've added the ability to assign a fabric.Path to a fabric.Text-like object (i.e. fabric.Text and fabric.IText). Demo available here: http://darkabstraction.com/showOff/fabricjs/

[image: boing] https://cloud.githubusercontent.com/assets/811142/4221828/81c46384-390d-11e4-942b-1e148d249b47.png

For the demo, be sure to hide the options when not in use for best performance. Also, while the demo has a lot of features, it was primarily used to test the actual curve text feature, so I do not guarantee that it is bug free. It should also not be used as a reference, because I am not familiar enough with Fabric.js to write code of that particular quality.

In-place solution (hotfix) available here (include it anytime after fabric.js is loaded; it quietly extends fabric.Point, fabric.Path, fabric.Text, and fabric.IText): http://darkabstraction.com/showOff/fabricjs/CurveDependencies.prepatch.js In-source solution has been pushed to github here: https://github.com/lirmont/fabric.js/tree/Curve-Text

The only difference between the two solutions is that the in-place one has an extra property, "debug", which, if true, will draw the bounding boxes it uses.

I've likely missed some features as this is my first time using Fabric.js. Point them out to me, and I'll fix them. You can reach me at: https://twitter.com/lirmont

— Reply to this email directly or view it on GitHub https://github.com/kangax/fabric.js/issues/729#issuecomment-55148545.

goldguy23 commented 10 years ago

Thanks…

I would prefer it to have the same functionality as my current site: https://www.tasseltoppers.com/design-your-own

Add text and then click on it. The curve feature sliding bar is the exact same feature I am looking for.

From: lirmont [mailto:notifications@github.com] Sent: Wednesday, September 10, 2014 1:42 PM To: kangax/fabric.js Cc: goldguy23 Subject: Re: [fabric.js] Curve Text Feature $200

@goldguy23 https://github.com/goldguy23 I'd be happy to. As an application of this feature (rather than the feature itself), that would be another demo (demonstrating the feature). If you have a specific idea (mock-up) or other reference, please send it my way. Otherwise, I can't guarantee it'll be what you want. Thanks.

— Reply to this email directly or view it on GitHub https://github.com/kangax/fabric.js/issues/729#issuecomment-55152876.

somecodemonkey commented 10 years ago

If this gets merged into fabric can the code for curved/path be refactored into a separate subclass, something like fabric.ITextPath? Kind of like how fabric.IText subclasses fabric.Text. That way it wont over complicate the already complicated IText while maintaining functionality plus it keeps the classes cleaner.

somecodemonkey commented 10 years ago

I noticed that but still, imo fabric.Text is fabric.Text not fabric.Text + feature xyz else they might as well have put fabric.IText into fabric.Text.

goldguy23 commented 10 years ago

@lirmont can you confirm if this functionality supports loadFromJSON and toJSON fabricjs functions.

goldguy23 commented 10 years ago

@lirmont we still need to implement that feature, otherwise the design cannot be saved/loaded. That would be the final step

dean555 commented 10 years ago

Just found a perfect example for this @ http://www.ooshirts.com/designapp/#5cb3e31887764e15

goldguy23 commented 10 years ago

I am having my developers look into this. Give me a few days. Thanks so much

goldguy23 commented 10 years ago

One last question: Can this be used directly in an html range input? Is so, we can confirm that the functionality is ready to be used.

goldguy23 commented 10 years ago

Ok great job!!!

From: lirmont [mailto:notifications@github.com] Sent: Friday, September 26, 2014 6:00 PM To: kangax/fabric.js Cc: goldguy23 Subject: Re: [fabric.js] Curve Text Feature $200

@goldguy23 https://github.com/goldguy23 There's nothing special about my choice to choose fabric for the input. To use a regular range slider (i.e. HTML element "input" with type="range"), you'd listen for the "input" event on the range slider, look up the valueAsNumber beneath the target in the event passed to the event handler, and then you're looking at a range of 0 to 100 (default). Because your specific concerns are about up and down, you probably want this range divided into a positive and negative range (re: up and down). So, you'll probably want to additionally specify the following attributes on the slider: "min", "max", and "step". Values of -1, 1, and 0.01 will give you a range of two whole sets of numbers (i.e. from -1 to 0 and from 0 to 1). Driven by that number, you can alter the path object by some arbitrary value, and then render the scene.

— Reply to this email directly or view it on GitHub https://github.com/kangax/fabric.js/issues/729#issuecomment-57026068.

yusidabcs commented 9 years ago

Hello there, anyone have example how make it work with multiple instance of text object? thank you

Godweed commented 9 years ago

Hello,

Can we add this patch in node js server side also? thank you

asturur commented 9 years ago

this patch will be merged soon. is not yet merged.

Eseperio commented 9 years ago

I have modified the text function to allow circular text. Im testing it and when i got it will publish here. fabric