#Path1DEffect

How PathEffect.MakePath1D orients its replacement stamp along the source path. The stamp is a small Path (an arrow, a star, a glyph). The effect walks the stroked path and lays one stamp every advance units; the style decides whether each stamp keeps its original orientation, rotates to follow the tangent, or morphs to match the path's curvature.

The runtime namespace is CK.Path1DEffect (the d.ts type alias is Path1DEffectStyle — name and namespace diverge here).

const style = controls.select('style', ['Translate', 'Rotate', 'Morph'], 'Rotate');

const stamp = new CK.Path();
stamp.moveTo(0, -6);
stamp.lineTo(12, 0);
stamp.lineTo(0, 6);
stamp.close();

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(40, 90, 180, 1));
stroke.setAntiAlias(true);

loop(() => {
  const effect = CK.PathEffect.MakePath1D(stamp, 26, 0, CK.Path1DEffect[style()]);
  stroke.setPathEffect(effect);

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

  effect.delete();
  surface.flush();
});

Translate keeps every stamp axis-aligned (the arrow always points right). Rotate aligns each one to the local tangent of the curve so the arrows follow the path. Morph actually warps the stamp to bend with the curvature.

#All values

#See also

• PathEffect.MakePath1D — consumer of this enum.