1

I have an svg path, like this:

M 41.2182,164.1220 C 13.6452,82.5160 62.9412,163.9160 62.9412,116.0000 C 62.9412,68.0840 8.5452,148.8960 16.8656,53.5000 C 109.8628,55.6260 41.8662,16.0000 79.3662,16.0000 C 116.8662,16.0000 48.5802,54.7680 134.9682,70.3720 L 134.9682,70.3720 134.9682,164.1220 L 134.9682,164.1220 41.2182,164.1220 z

It is composed of bezier curves and lines.

I would like to extrude the path. So, for example, from the black shape below to the red outline+black shape (I only need the outer path). With just lines it is easy... just get their intersection points, split the outer angle, and draw a line. But with beziers, I don't know what to do. Help!

Manually created approximation of outline, using extra curves: m 37.686605,169.10481 c -15.950092,-43.07847 -8.814378,-46.55517 -3.439729,-48.17135 3.317221,-0.99751 3.754458,-0.55056 17.225155,5.45981 4.885348,2.17974 5.745421,1.64914 6.540252,-10.05611 0.356018,-5.24296 -1.094238,-9.82175 -2.184765,-11.1066 -3.109381,-3.66345 -16.718471,4.26962 -26.573753,2.65045 C 16.244152,105.7436 7.8796828,96.203068 12.257927,48.341063 56.160695,48.272875 66.26206,45.191096 63.408865,33.358556 61.025609,23.474907 58.817562,10.862728 78.588842,10.862728 c 14.658605,0 20.132228,6.154277 17.509481,16.595821 -4.555364,18.135583 -7.562305,29.557766 43.773547,38.73031 L 139.9791,169.1237 z

image

Community
  • 1
Agamemnus
  • 111
  • So you wish to perform dilation on a shape formed by a Bézier curves? – peterwhy Dec 23 '14 at 05:05
  • If you can calculate a unit normal to the Bézier curve and add a multiply of that at every point, that should suffice. (Maybe someone will do this in an answer). – Milo Brandt Dec 23 '14 at 05:06
  • (Non-mathematical answer) There is an SVG filter for dilation. – peterwhy Dec 23 '14 at 05:06
  • If dilation is the same as using pixels to create a border (like http://stackoverflow.com/questions/12702955/svg-dilate-erode-filter-vs-illustrator-offset-path), that isn't what I want because I want an actual path. I guess maybe something more correct is a series of offsets... as I am a programmer, it would be great to see some sort of pseudo code instead of a bunch of complex formulas. :X!! – Agamemnus Dec 23 '14 at 05:31
  • Is it an option for you to create (Red + Black) and mask (Black) to obtain a (Red) only? – peterwhy Dec 23 '14 at 09:40
  • No, I need to have the actual path... – Agamemnus Dec 23 '14 at 21:23

2 Answers2

2

It is offset curve you are looking for. The offset curve of a polynomial curve (such as Bezier curve) is in general not a polynomial curve. So, you cannot represent the offset curve as another Bezier curve. You can only approximate it. For offsetting a profile (or path) consists of multiple Bezier curves and lines (and perhaps circular arcs), not only you have to compute the offset curve, you also have to compute their intersections with neighbor offset curves and trim the curve back to the intersection points. Sometimes, when the offset distance is large, the offset curve will even self-intersect and you will have to deal with such problems as well. All in all, offset a profile reliably is a very tough issue to tackle with.

Alternatively, I suggest that you simply calculate points from your path and the normal direction at that point, offset the point in the normal direction by the desired distance and create a new path from these offset points.

fang
  • 3,570
  • I see what you mean, but I don't care about keeping the same amount of bezier curves. If you just add some extra curves it should be possible to do an offset.. I just don't know how to do this. Also: the alternative won't work... I can't just do an offset of the x, y points because I need it to be an outline. – Agamemnus Dec 23 '14 at 21:48
  • Can't you create a path object from those offset points? – fang Dec 24 '14 at 00:19
  • Yes, but as you said it won't be an outline because I'd need more curves, and also because I will need to adjust the curve angles.... so I need to know how to do this... an incredibly technical math paper like http://www.cs.technion.ac.il/~gershon/papers/offset-compare.pdf.gz won't help... need something algorithmic that I can plug in. – Agamemnus Dec 24 '14 at 03:09
  • In your post, you said that if the path is all lines, then you know how to offset the path. Can you sample points on Bezier curves and treat it as a sequence of lines? This way, you will only deal with lines. – fang Dec 24 '14 at 07:53
  • Yeah, I probably can figure the sampling part out, but that is going to need a very large number of lines to approximate the curves and so it's not feasible for where I need to use this, which is real-time rendering on old/slow phones. – Agamemnus Dec 24 '14 at 19:52
  • Then, the final suggestion I have is to offset the control polygon of the Bezier curve and then create Bezier curve from the offset control polygon. This will generate an approximated offset curve and will not require you to sample points on the Bezier curve. – fang Dec 24 '14 at 22:27
  • Sadly, I don't have a clue of what that means... I was able to create pretty close approximations of the offset using at most two extra points in the curve (edited initial post). Really looking for an algorithm that will do that for me. – Agamemnus Dec 24 '14 at 22:56
  • For a cubic Bezier curve (assuming this is what is being used by SVG path), there are 4 points: start pt, control pt1, control pt2 and end pt. The control polygon of a cubic Bezier curve is the polyline formed by these 4 points in order, which is essentially 3 line segments. You can offset these 3 line segments to get back 4 new points from the offset lines' end points. From these 4 new points, you can create another cubic Bezier curve, which can be a good approximation of the original curve if offset distance is not too big. – fang Dec 25 '14 at 00:38
2

A nice simple algorithm for offsetting a Bézier curve is the one due to Tiller and Hanson. Look at this answer for a discussion and a picture. To implement it, all you need is a function for intersecting two lines; and you will need this function anyway, to handle the lines in your outline.

If you want to get serious about the problem, and really understand it, please refer to this answer and the papers it cites.

Community
  • 1
bubba
  • 43,483
  • 3
  • 61
  • 122
  • Thanks, the graphic helps here... I will try this I guess. Gah, I feel like I stepped on an ant-hill. :-O – Agamemnus Dec 26 '14 at 06:21