Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 | 428x | import type { Types } from '@cornerstonejs/core';
import type { SVGDrawingHelper } from '../types';
import drawLine from './drawLine';
const svgns = 'http://www.w3.org/2000/svg';
/**
* Draws an arrow annotation using SVG elements. The arrow can be drawn in two ways:
* 1. Using a marker element (via markerEndId) - better for consistent arrowheads.
* 2. Using two additional lines for the arrowhead - the older "legacy" method.
*/
export default function drawArrow(
svgDrawingHelper: SVGDrawingHelper,
annotationUID: string,
arrowUID: string,
start: Types.Point2,
end: Types.Point2,
options = {}
): void {
if (isNaN(start[0]) || isNaN(start[1]) || isNaN(end[0]) || isNaN(end[1])) {
return;
}
const {
viaMarker = false,
color = 'rgb(0, 255, 0)',
markerSize = 10,
} = options as {
viaMarker?: boolean;
color?: string;
markerSize?: number;
markerEndId?: string;
};
// If NOT using the marker-based approach, fall back to your two-line "legacy" approach:
if (!viaMarker) {
legacyDrawArrow(
svgDrawingHelper,
annotationUID,
arrowUID,
start,
end,
options as {
color?: string;
width?: number;
lineWidth?: number;
lineDash?: string;
}
);
return;
}
const layerId = svgDrawingHelper.svgLayerElement.id;
const markerBaseId = `arrow-${annotationUID}`;
const markerFullId = `${markerBaseId}-${layerId}`;
const defs = svgDrawingHelper.svgLayerElement.querySelector('defs');
let arrowMarker = defs.querySelector(`#${markerFullId}`);
if (!arrowMarker) {
// Marker doesn't exist for this annotationUID, so create it
arrowMarker = document.createElementNS(svgns, 'marker');
arrowMarker.setAttribute('id', markerFullId);
// Basic marker attributes
arrowMarker.setAttribute('viewBox', '0 0 10 10');
arrowMarker.setAttribute('refX', '8');
arrowMarker.setAttribute('refY', '5');
arrowMarker.setAttribute('markerWidth', `${markerSize}`);
arrowMarker.setAttribute('markerHeight', `${markerSize}`);
arrowMarker.setAttribute('orient', 'auto');
// Create the <path> for the arrowhead shape
const arrowPath = document.createElementNS(svgns, 'path');
arrowPath.setAttribute('d', 'M 0 0 L 10 5 L 0 10 z');
arrowPath.setAttribute('fill', color);
arrowMarker.appendChild(arrowPath);
defs.appendChild(arrowMarker);
} else {
// Marker already exists for this annotationUID; update color & size
arrowMarker.setAttribute('markerWidth', `${markerSize}`);
arrowMarker.setAttribute('markerHeight', `${markerSize}`);
const arrowPath = arrowMarker.querySelector('path');
if (arrowPath) {
arrowPath.setAttribute('fill', color);
}
}
(options as { markerEndId?: string }).markerEndId = markerFullId;
drawLine(svgDrawingHelper, annotationUID, arrowUID, start, end, options);
}
function legacyDrawArrow(
svgDrawingHelper: SVGDrawingHelper,
annotationUID: string,
arrowUID: string,
start: Types.Point2,
end: Types.Point2,
options = {} as {
color?: string;
width?: number;
lineWidth?: number;
lineDash?: string;
}
): void {
const { color = 'rgb(0, 255, 0)', width = 2, lineWidth, lineDash } = options;
// Drawing the head arrow with two lines
// Variables to be used when creating the arrow
const headLength = 10;
const angle = Math.atan2(end[1] - start[1], end[0] - start[0]);
const firstLine = {
start: [
end[0] - headLength * Math.cos(angle - Math.PI / 7),
end[1] - headLength * Math.sin(angle - Math.PI / 7),
] as Types.Point2,
end: end,
};
const secondLine = {
start: [
end[0] - headLength * Math.cos(angle + Math.PI / 7),
end[1] - headLength * Math.sin(angle + Math.PI / 7),
] as Types.Point2,
end: end,
};
// the main line
drawLine(svgDrawingHelper, annotationUID, arrowUID, start, end, {
color,
width,
lineWidth,
lineDash,
});
drawLine(
svgDrawingHelper,
annotationUID,
'2',
firstLine.start,
firstLine.end,
{
color,
width,
lineWidth,
lineDash,
}
);
drawLine(
svgDrawingHelper,
annotationUID,
'3',
secondLine.start,
secondLine.end,
{
color,
width,
lineWidth,
lineDash,
}
);
}
|