Approach for stroke with.

[MeraX]

To keep issues clean, I start a new one to add something to Roeljs taught about stroke width https://github.com/roelj/inklingreader/issues/2#issuecomment-33298517

Given the 3 points (x1,y1), (x2,y2), (x3,y3) and pressures p1,2 and p2,3 between this points I made a sketch how to acess the problem with the stroke width: w is taught as an factor to link the pressure and the stroke width (should be configurable in the end). The black lines are parallel to the connection line between adjacent points. To find the edges of the filled outline, we have to calculate the red marked intersections (A2,B2) and (a2,b2).

If the pressure is not given as the pressure in between two points but as an information for one point we can make a similar approach: The dashed lines are authogonal to the two strokes and the green line is just in the middle of these two, such that the blue angular are the same. Once we have the green line, we can calculate the red marks as edges of the outline.

To solve one or the other approach, we have to do some linear maths. If you want me to, I can help you with that and figure out equations to calculate the edges for given x1, x2, x3, y1, y2, y3 and pressures.

[roelj]

I have a sample that displays the problem I am having with pressure data. You can download it here.

It seems that for every coordinate there is pressure data available. The problem I'm having right now is that I don't know how to draw an outline and fill it. If you could point me to some documentation or an example I can probably implement it pretty quickly.

[MeraX]

I think you have to draw the outline like a circle. You first have to set all the "A" points and than append the "a" points in reversed order. So you first draw one side of the outline and that the other side. http://www.w3schools.com/svg/svg_path.asp

[roelj]

Maybe I don't understand this properly, but the problem I run into now is that with the path element there's always a sequence of instructions that will produce a line (a straight line or a bezier curve between points).

Let me explain how I see it now.

Let's suppose we have a line that has the following points:

10,10 15,15 20,20

Now, that line has a variable thickness:

10,10 <thickness of 2> 15,15 <thickness of 4> 20,20 <thickness of 1>

The way to model this in an SVG would be to make two lines and fill the range within these lines:

Line 1:

9,9 13,13 19.5,19.5

Line 2:

11,11 17,17 20.5,20.5

The same problem arises when you try to draw thickness with a pen that always draws an equally thick line. You have to draw two lines and color the space between the lines to get thickness.

Drawing two lines would be done using two path elements.

I hope I am missing some information on creating SVGs so that I'm completely wrong with the assumptions of having to draw two lines..

[MeraX]

I think you have to draw some kind of polygon:

M 9,9 L 13,13 L 19.5,19.5 L 20.5,20.5 L 17,17 L 11,11 Z

This example makes the order clear: first draw line 1 and than add line 2 with reversed order of points.

[roelj]

I worked it out the way you described, but something funny happens. Here's an example of what happens: SKETCH79.WPI SKETCH79.svg

The WPI file is the original data and the SVG is the converted data with the code I haven't pushed yet. Before I push the code I want fix this. I could put the code in another branch so you can experiment with it as well.

[MeraX]

Indeed its an interesting behaviour. I think it happens, when the left line and the right line of a stroke crosses. How do you actually calculate the two lines? You probably can not draw the second line as an offset always in the same direction, the direction has do depend of the direction of the actual stroke. Looking at the source code in an experimental branch sounds interesting.

[roelj]

I first draw the points minus pressure and after all points in the stroke are drawn I draw the points in reversed order plus the pressure. So:

(x1 - pressure1, y1 - pressure1) L (x2 - pressure1, y2 - pressure2) L (x2 + pressure2, y2 + pressure2) L (x1 + pressure1, x1 + pressure1)

Another issue is when two lines are drawn on top of each other in a single stroke (for example when writing a "p" or an "m") the outline is incorrectly generated (I don't know the proper wording for the problem).

The experimental branch will be up in a few minutes.

[roelj]

I created a branch "stroke-pressure" and pushed the changes to it.

The interesting stuff is in src/converters/svg.c. Starting at line 188 the coordinates are added. Starting at line 148 the reversed path is added to the stroke.

[roelj]

It works for all my test data as well. This is beautiful! Thank you! I merged this into 'master' as well.