Add squiggly line option for annotations

This commit is contained in:
John Factotum
2023-03-15 00:39:15 +08:00
parent 59971fe343
commit c7a4f5ef46
+28
View File
@@ -72,6 +72,34 @@ export class Overlayer {
} }
return g return g
} }
static squiggly(rects, options = {}) {
const { color = 'red', width: strokeWidth = 2, writingMode } = options
const g = createSVGElement('g')
g.setAttribute('fill', 'none')
g.setAttribute('stroke', color)
g.setAttribute('stroke-width', strokeWidth)
const block = strokeWidth * 1.5
if (writingMode === 'vertical-rl' || writingMode === 'vertical-lr')
for (const { right, top, height } of rects) {
const el = createSVGElement('path')
const n = Math.round(height / block / 1.5)
const inline = height / n
const ls = Array.from({ length: n },
(_, i) => `l${i % 2 ? -block : block} ${inline}`).join('')
el.setAttribute('d', `M${right} ${top}${ls}`)
g.append(el)
}
else for (const { left, bottom, width } of rects) {
const el = createSVGElement('path')
const n = Math.round(width / block / 1.5)
const inline = width / n
const ls = Array.from({ length: n },
(_, i) => `l${inline} ${i % 2 ? block : -block}`).join('')
el.setAttribute('d', `M${left} ${bottom}${ls}`)
g.append(el)
}
return g
}
static highlight(rects, options = {}) { static highlight(rects, options = {}) {
const { color = 'red' } = options const { color = 'red' } = options
const g = createSVGElement('g') const g = createSVGElement('g')