handle for text type

[flyingatm]

hello! thank you for your hard work! this is a nice library, lightweight and really easy to use!

I created a meme generator with Jcanvas, all fine but I guess It would be nice if we have text type in handle plugin.

thank you!

[caleb531]

@flyingatm Thank you for the feedback! The handles functionality isn't something I plan to build out, but if you could elaborate on what you mean, perhaps I can offer a workaround.

[flyingatm]

Thank you for your fast reply! Ofc!

I built a meme creator like that with Jcanvas. All I wanna is changing font-size by pulling it like:

this example.

[caleb531]

@flyingatm I think you could achieve this with a combination of two jCanvas features:

Handle Events: https://projects.calebevans.me/jcanvas/plugins/handles/#events Drag Groups: https://projects.calebevans.me/jcanvas/docs/draggableLayers/#drag-groups

With these two features:

1. Create your text layer and assign it to a drag group of your choice (see docs above); the font size and position of this text layer should be mathematically calculated per your bounding box layer below (you will need to do these calculations yourself based on the bounding box's width/height)
2. Create a rectangle layer (in the same drag group) that will serve as your invisible bounding box (i.e. a rectangle layer); this will be the layer with handles, and it should be drawn later (rather than sooner) so that the handles can be dragged above everything else.
3. Attach events to the layer with handles (per the docs above on Handle Events) so that you can detect when the handles are moved
4. When those handle events fire, you can use setLayer to dynamically update the size/position of your text layer, based on the calculations above

Please let me know if you have any questions on this.

[siripravi]

Hi Your plugin is working great. Thank you. I am facing trouble with circular text. The letter spacing is not uniform, I think this is because of the difference in widths of bounding box's for different characters. Is there any way that I can customize this behavior? Please Help me.

[caleb531]

@siripravi The only way I was able to make arc text work in jCanvas is to draw each letter individually. And because I don't have access to the kerning data for the font, each letter must be spaced equidistantly from adjacent letters.

However, you can use the letterSpacing property to tighten the spacing. It will still be equal between letters, but at least the text doesn't need to occupy so much space this way: https://projects.calebevans.me/jcanvas/docs/text/#text-along-an-arc

$('canvas').drawText({
  fillStyle: '#c33',
  fontFamily: 'Ubuntu, sans-serif',
  fontSize: 18,
  text: 'THIS IS THE FIRST LINE\nTHIS IS THE SECOND LINE\nTHIS IS THE THIRD LINE',
  x: 160, y: 200,
  radius: 150,
  letterSpacing: 0.02
});

[siripravi]

@siripravi The only way I was able to make arc text work in jCanvas is to draw each letter individually. And because I don't have access to the kerning data for the font, each letter must be spaced equidistantly from adjacent letters.

However, you can use the letterSpacing property to tighten the spacing. It will still be equal between letters, but at least the text doesn't need to occupy so much space this way: https://projects.calebevans.me/jcanvas/docs/text/#text-along-an-arc

$('canvas').drawText({
  fillStyle: '#c33',
  fontFamily: 'Ubuntu, sans-serif',
  fontSize: 18,
  text: 'THIS IS THE FIRST LINE\nTHIS IS THE SECOND LINE\nTHIS IS THE THIRD LINE',
  x: 160, y: 200,
  radius: 150,
  letterSpacing: 0.02
});

Thank your for quick reply. I would like to use my own algorithm to render circular text as a layer. Is it possible? If possible, can you please quote an example? I am interested in using TTF fonts by using This library

Thank you.