makeArrowhead

Returns a notched arrowhead at a tip, pointing along a direction, as an SVG polygon and the point the line it caps should end at.

@internote/canvas-sdkFunction
On this page
import { makeArrowhead } from '@internote/canvas-sdk';

points is the four-point polygon's points attribute. trimX and trimY are where the line should end, inside the notch, so the stroke does not poke through the tip.

#Signature

(
    tipX: number,
    tipY: number,
    cos: number,
    sin: number,
    arrowSize: number,
    base: number,
): {
    points: string;
    trimX: number;
    trimY: number;
}

#Parameters

tipX
The tip's x, in pixels.
tipY
The tip's y, in pixels.
cos
The cosine of the direction the arrow points in.
sin
The sine of that direction.
arrowSize
The head's width, in pixels.
base
The head's length from tip to back, in pixels.

#Example

const angle = Math.atan2(y2 - y1, x2 - x1);
const head = makeArrowhead(x2, y2, Math.cos(angle), Math.sin(angle), 12, 14);
<line x1={x1} y1={y1} x2={head.trimX} y2={head.trimY} /><polygon points={head.points} />

Declared in packages/canvas-sdk/src/geometry/arrowheads.ts:37.

Last updated