Loading ...
Sorry, an error occurred while loading the content.

Re: Warp Text functions in SVG?

Expand Messages
  • Sherm
    Phillipe, You are right on target with what I m trying to accomplish. In high-end graphics apps like CorelDRAW and Illustrator, you can apply an envelope
    Message 1 of 5 , Oct 29, 2004
    • 0 Attachment
      Phillipe,

      You are right on target with what I'm trying to accomplish.

      In high-end graphics apps like CorelDRAW and Illustrator, you can
      apply an 'envelope' function to an object that gives you the ability
      to shape the object like putty.

      Illustrator has an envelope 'mesh' that allows you to warp individual
      sectors of an object (or the entire object) with a grid overlay, in
      the manner you describe.

      I'm trying to accomplish the same thing in SVG, to allow the site
      visitors to shape their text in several pre-defined ways - in a
      vertical arc (convex top, concave bottom, vertical sides) or a
      bridged arc (concave bottom/flat top, vertical sides).

      I can 'fake' it using your technique, faking the arc by moving the
      base and skewing the text vertically, but it's not accurate enough.
      The customer's goal is to be able to convert the final SVG art into
      Corel or Illustrator files for color separation and printing.

      Sherm

      --- In svg-developers@yahoogroups.com, Philippe Lhoste <pl-mlnl@G...>
      wrote:
      > Philippe Lhoste wrote:
      > >> Any ideas for direction on how to accomplish this? Am I going to
      have
      > >> to write my own function that warps the text into the shapes
      they
      > >> want? I can't seem to find any sort of envelope or morphing
      > >> capabilities built into SVG 1.1.
      > >
      > > I fear no. You may have to do matrix transformations on each
      letter.
      > > Or perhaps even more complex transformation, if each node of the
      letter
      > > path need a specific transformation, like deforming the initial
      > > rectangle bound by moving each corner in arbitrary location, eg.
      to do a
      > > pyramid.
      > > I am not good enough in geometry to see if that can be done in
      native
      > > SVG 1.1.
      >
      > Well, the geometry seems to be quite simple after all. I make
      yesterday
      > the needed maths, I just have to put this in a script to see if it
      works...
      >
      > Caveat: The needed transformations can be done only on path
      elements.
      > Ie. with my method, you can't transform shapes like circle, rect or
      even
      > plain text.
      > That mean that you must put all your drawing into path. This is
      simple
      > for most basic shapes, but harder for text.
      >
      > You have to transform your TrueType font to SVG font (I know a
      couple of
      > Java programs that can do that), but then you have to transform
      again
      > the generated glyphs to plain SVG (they are upside down and they
      use
      > their own viewbox) as we must apply the transform to each letter,
      > relative to its position (ie. a T on the left may have a different
      > transform that a T on the right).
      >
      > That done, my little math is quite simple to apply if you do only a
      > simple rectangle deforming, eg. to a trapezoid.
      > If you need more complex transformations, like applying a grid on a
      > graphics, and deforming this grid to make, say, a flag, a concave
      or
      > convex cushion, etc., we need to compute also the intersection of
      the
      > graphics with the grid, otherwise the results wouldn't be good
      (long
      > stripe not following curvature, etc.).
      > I can do that using Kevin Lindsey's intersection algorithms, but it
      will
      > take some time.
      >
      > I believe I will first do a proof of concept script, doing a static
      > transformation of path using static grid deformation data.
      >
      > Ideally, one should write a SVG file where a grid would be overlaid
      on a
      > graphics, allowing to move grid nodes around with some constraints,
      and
      > computing transformation either when clicking on a button, or if
      speed
      > allows, in real time (or on button up).
      >
      > I have to improve my JS/Dom knowledge before doing such thing...
      >
      > Funny that nobody I know did such a thing before. I visited a lot
      of
      > SVG-related sites (not all existing!) and this seems to be an
      unexplored
      > field.
      >
      > --
      > Philippe Lhoste
      > -- (near) Paris -- France
      > -- Professional programmer and amateur artist
      > -- http://Phi.Lho.free.fr
      > -- -- -- -- -- -- -- -- -- -- -- --
    Your message has been successfully submitted and would be delivered to recipients shortly.