#ContourMeasure

Walks along a single contour of a path and lets you ask "what point is at distance t along this contour?" — and "what's the local tangent there?". Useful for animating things along a path (a dot tracing a curve, text along a path, particle emission from an outline). Built by iterating a ContourMeasureIter over a Path.

ContourMeasure is a WASM object — .delete() when done.

const path = new CK.Path();
path.moveTo(40, 130);
path.cubicTo(140, 30, 280, 230, 380, 130);

const stroke = new CK.Paint();
stroke.setStyle(CK.PaintStyle.Stroke);
stroke.setStrokeWidth(2);
stroke.setColor(CK.Color(160, 160, 160, 1));
stroke.setAntiAlias(true);

const dot = new CK.Paint();
dot.setColor(CK.Color(220, 60, 60, 1));
dot.setAntiAlias(true);

const iter = new CK.ContourMeasureIter(path, false, 1);
const cm = iter.next();
const length = cm.length();

let t = 0;
loop(() => {
  t = (t + 0.5) % length;

  canvas.clear(CK.WHITE);
  canvas.drawPath(path, stroke);

  const pt = cm.getPosTan(t);
  canvas.drawCircle(pt[0], pt[1], 5, dot);
  surface.flush();
});

getPosTan(t) returns a Float32Array(4) of [x, y, tanX, tanY] — position and unit tangent at distance t along the contour.

#Members

#See also

• ContourMeasureIter — iterator that produces these.
• Path.