mirror of
https://github.com/john-okeefe/foliate-js.git
synced 2026-09-09 11:29:14 -04:00
Add squiggly line option for annotations
This commit is contained in:
@@ -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')
|
||||||
|
|||||||
Reference in New Issue
Block a user