Member Avatar for dsimonovski1

Hey.

Any ideas on how I can apply a given text on a certain 2D object, so the text would follow the object shape?

Imagine we have this object: http://prntscr.com/gmdv9w

I want to be able to type some text in a textbox and have the plugin automatically place in on the marked area.

Let me say that I don't even remotely know how can that be done, although I can work something out if you point me in the right direction.

This should preferably be done in JavaScript.

If you need any more details, let me know.

Thanks!

  • 3 Contributors
  • 2 Replies
  • 323 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by AndrisP

Recommended Answers

All 2 Replies

Member Avatar for kgweb

If your image is an arbitary bit map (for example jpeg, gif or png) then this is going to be very difficult since there is no 'object' along which to align the text - there is just a two-dimensional array of different coloured pixels. The 'object' which you see is just a shape which your brain interprets as representing something you know about in the real world.

The only possibility I can imagine to do what you want with an arbitary bit map (ie. you do not know before-hand what the picture looks like) would involve at least some processing server-side and fairly complex code which would search for edges, and even then it would probably not be a general solution.

If you only have one image and so a fixed shape to put your text on, or a vector-based image, which might be created using HTML5's canvas tag or SVG, then you could create or would already have a graphic object which the computer knows the shape of, and so could, at least in theory, string text along it.

It is a long time since I investigated SVG and cannot now remember for sure if it supports puting text along an arbitary line, but think it does, and I would assume that canvas in HTML5 also does. Note that you might have to limit the length of the text to make sure that there is room for it on the object you are applying it to.

W3schools no doubt has tutorials on SVG and HTML5 - always a good place to start, and a web search will return any number of lessons on these subjects. Hopefully my comments will at least get you started.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.