Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I don't think there's a built-in way in WPF to do that. You'll have to calculate the coordinates yourself and draw the lines yourself (e.g. using DrawingVisual).</p> <p>To calculate the coordinates, you would have to:</p> <h2>Step 1 Sample points along the bezier curve.</h2> <p>A bezier curve with 4 control points has the formula:</p> <pre><code>curve(t) = t^3 p1 + 3 t^2 (1-t) p2 + 3 t (1-t)^2 p3 + (1-t)^3 p4 d/dt curve(t) = 3 p3 - 3 p4 + 6 p2 t - 12 p3 t + 6 p4 t + 3 p1 t^2 - 9 p2 t^2 + 9 p3 t^2 - 3 p4 t^2 </code></pre> <p>With these formulas, you can calculate points on the curve, and their tangent directions. Rotating the tangent direction by 90° (i.e. swap X/Y and change the sign of Y) gives the normal direction.</p> <p>However, these points are not equidistant:</p> <p><img src="https://i.stack.imgur.com/RK2xq.png" alt="enter image description here"></p> <p>So if you used these points directly, you'd get a curve where some of the "spikes" are shorter than others:</p> <p><img src="https://i.stack.imgur.com/6JcJx.png" alt="enter image description here"></p> <h2>Step 2: Get equidistant points along the curve</h2> <p>You now have a list of points along the curve. You can calculate the euclidean distance between each point and the next. Summing all those distances up gives the total length of the curve. </p> <p>Let's say you want spikes that are (roughly) 10 pixels wide. Then you need <code>n=round(TotalLength / 10)</code> points. The points are at <code>s(i) = TotalLength / n * i</code>.</p> <p>So if you want to e.g. find the value of <code>t</code> for the 3rd equidistant point, you'd calculate <code>s(3) = TotalLength / n * 3</code>. Then you'd iterate over the set of sampled points, summing up the distances as you go, until you reach a point that has a total distance along the curve > s(3). Now you know the points immediately before and after the point you're looking for, and you can use the rule of three to calculate the t in between.</p> <p>Now you have a set of points that are the same distance apart along the curve:</p> <p><img src="https://i.stack.imgur.com/cmLmz.png" alt="enter image description here"></p> <h2>Step 3: Drawing the spikes</h2> <p>This is the easiest part: At each of your equidistant points, calculate the normal (using the derivative formula above). Divide that normal by its length to get the unit normal. Then add to each even point <code>+d * UnitNormal</code> and to each odd point <code>-d * UnitNormal</code>, where <code>d</code> is the "depth" of the spike, i.e. the distance of the tip to the curve.</p> <p><img src="https://i.stack.imgur.com/LOW6g.png" alt="enter image description here"></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload