703 lines
24 KiB
JavaScript
703 lines
24 KiB
JavaScript
/**
|
||
* 交互工具：对象捕捉、测量、批注。
|
||
*
|
||
* 三者都只操作世界坐标，屏幕换算全部交给 Renderer，
|
||
* 因此缩放平移后测量线和批注会跟着图纸走，不会漂。
|
||
*/
|
||
|
||
import { ellipsePt } from './render.js'
|
||
|
||
const TAU = Math.PI * 2
|
||
|
||
// ---------------------------------------------------------------- 对象捕捉
|
||
|
||
const SNAP_LABEL = { end: '端点', mid: '中点', center: '圆心', quad: '象限点', near: '最近点', node: '节点' }
|
||
|
||
export class Snapper {
|
||
constructor(renderer) {
|
||
this.r = renderer
|
||
this.enabled = true
|
||
this.modes = { end: true, mid: true, center: true, quad: true, near: true }
|
||
}
|
||
|
||
/**
|
||
* @param {number} px CSS 像素
|
||
* @returns {{x:number,y:number,type:string,shape:number}|null}
|
||
*/
|
||
find(px, py, tolPx = 12) {
|
||
const r = this.r
|
||
if (!this.enabled || !r.index) return null
|
||
const w = r.toWorld(px, py)
|
||
const tol = (tolPx * r.dpr) / r.view.scale
|
||
const tol2 = tol * tol
|
||
const box = [w.x - tol, w.y - tol, w.x + tol, w.y + tol]
|
||
let best = null, bestScore = Infinity
|
||
|
||
for (const i of r.index.query(box)) {
|
||
const s = r.shapes[i]
|
||
if (!s || r.hidden.has(s.layer)) continue
|
||
if (s.kind === 'text' || s.kind === 'mtext') continue
|
||
const b = s.bbox
|
||
if (w.x < b[0] - tol || w.x > b[2] + tol || w.y < b[1] - tol || w.y > b[3] + tol) continue
|
||
|
||
const consider = (x, y, type, prio) => {
|
||
const d = (x - w.x) ** 2 + (y - w.y) ** 2
|
||
if (d > tol2) return
|
||
// 优先级压过距离：端点比最近点更值得捕捉
|
||
const score = d + prio * tol2 * 0.35
|
||
if (score < bestScore) { bestScore = score; best = { x, y, type, shape: i } }
|
||
}
|
||
|
||
if (s.kind === 'poly' || s.kind === 'segs') {
|
||
const p = s.pts
|
||
const step = s.kind === 'segs' ? 4 : 2
|
||
for (let k = 0; k + 1 < p.length; k += step) {
|
||
if (this.modes.end) consider(p[k], p[k + 1], 'end', 0)
|
||
}
|
||
if (s.kind === 'poly' && this.modes.mid) {
|
||
for (let k = 0; k + 3 < p.length; k += 2) {
|
||
consider((p[k] + p[k + 2]) / 2, (p[k + 1] + p[k + 3]) / 2, 'mid', 1)
|
||
}
|
||
}
|
||
if (s.kind === 'segs' && this.modes.end) {
|
||
for (let k = 2; k + 1 < p.length; k += 4) consider(p[k], p[k + 1], 'end', 0)
|
||
}
|
||
} else if (s.kind === 'arc') {
|
||
if (this.modes.center) consider(s.cx, s.cy, 'center', 0)
|
||
if (this.modes.end) {
|
||
const a = ellipsePt(s, s.a0), b2 = ellipsePt(s, s.a1)
|
||
consider(a[0], a[1], 'end', 0)
|
||
consider(b2[0], b2[1], 'end', 0)
|
||
}
|
||
if (this.modes.quad) {
|
||
for (let q = 0; q < 4; q++) {
|
||
const t = (q * Math.PI) / 2
|
||
if (!angleInArc(t, s.a0, s.a1)) continue
|
||
const p = ellipsePt(s, t)
|
||
consider(p[0], p[1], 'quad', 1)
|
||
}
|
||
}
|
||
if (this.modes.mid) {
|
||
let sweep = s.a1 - s.a0
|
||
while (sweep <= 0) sweep += TAU
|
||
const p = ellipsePt(s, s.a0 + sweep / 2)
|
||
consider(p[0], p[1], 'mid', 1)
|
||
}
|
||
} else if (s.kind === 'point') {
|
||
consider(s.x, s.y, 'node', 0)
|
||
}
|
||
}
|
||
|
||
if (!best && this.modes.near) {
|
||
const idx = r.pick(px, py, tolPx)
|
||
if (idx != null) {
|
||
const p = nearestOnShape(r.shapes[idx], w.x, w.y)
|
||
if (p) best = { x: p[0], y: p[1], type: 'near', shape: idx }
|
||
}
|
||
}
|
||
return best
|
||
}
|
||
|
||
static label(type) { return SNAP_LABEL[type] || '' }
|
||
}
|
||
|
||
function angleInArc(a, a0, a1) {
|
||
let sweep = a1 - a0
|
||
while (sweep <= 0) sweep += TAU
|
||
if (sweep >= TAU - 1e-9) return true
|
||
let d = a - a0
|
||
while (d < 0) d += TAU
|
||
while (d > TAU) d -= TAU
|
||
return d <= sweep
|
||
}
|
||
|
||
/** 图元上离给定点最近的点 */
|
||
export function nearestOnShape(s, x, y) {
|
||
if (!s) return null
|
||
if (s.kind === 'poly' || s.kind === 'segs') {
|
||
const p = s.pts
|
||
let best = null, bd = Infinity
|
||
const step = s.kind === 'segs' ? 4 : 2
|
||
for (let i = 0; i + 3 < p.length; i += step) {
|
||
const q = closestOnSeg(x, y, p[i], p[i + 1], p[i + 2], p[i + 3])
|
||
const d = (q[0] - x) ** 2 + (q[1] - y) ** 2
|
||
if (d < bd) { bd = d; best = q }
|
||
}
|
||
if (s.kind === 'poly' && s.closed && p.length >= 4) {
|
||
const q = closestOnSeg(x, y, p[p.length - 2], p[p.length - 1], p[0], p[1])
|
||
const d = (q[0] - x) ** 2 + (q[1] - y) ** 2
|
||
if (d < bd) best = q
|
||
}
|
||
return best
|
||
}
|
||
if (s.kind === 'arc') {
|
||
const c = Math.cos(-s.rot), sn = Math.sin(-s.rot)
|
||
const dx = x - s.cx, dy = y - s.cy
|
||
const lx = dx * c - dy * sn, ly = dx * sn + dy * c
|
||
let t = Math.atan2(ly / (s.ry || 1e-9), lx / (s.rx || 1e-9))
|
||
if (!angleInArc(t, s.a0, s.a1)) t = s.a0
|
||
return ellipsePt(s, t)
|
||
}
|
||
if (s.kind === 'point') return [s.x, s.y]
|
||
return null
|
||
}
|
||
|
||
function closestOnSeg(px, py, x0, y0, x1, y1) {
|
||
const dx = x1 - x0, dy = y1 - y0
|
||
const len = dx * dx + dy * dy
|
||
let t = len === 0 ? 0 : ((px - x0) * dx + (py - y0) * dy) / len
|
||
t = t < 0 ? 0 : t > 1 ? 1 : t
|
||
return [x0 + t * dx, y0 + t * dy]
|
||
}
|
||
|
||
// ---------------------------------------------------------------- 测量
|
||
|
||
export const MEASURE_MODES = [
|
||
{ id: 'coord', name: '坐标', icon: 'view-tool-coordinate.png', pts: 1 },
|
||
{ id: 'p2p', name: '点到点', icon: 'view-tool-pointToPoint.png', pts: 2 },
|
||
{ id: 'cont', name: '连续', icon: 'view-tool-continuityLength.png', pts: 0 },
|
||
{ id: 'seg', name: '线段长', icon: 'view-tool-segmentlength.png', pick: true },
|
||
{ id: 'arclen', name: '弧长', icon: 'view-tool-arcLength.png', pick: true },
|
||
{ id: 'p2l', name: '点到线', icon: 'view-tool-pointToLine.png', mixed: true },
|
||
{ id: 'l2l', name: '线到线', icon: 'view-tool-lineToLine.png', picks: 2 },
|
||
{ id: 'linear', name: '线性', icon: 'view-tool-LinearMeasurement.png', pts: 2 },
|
||
{ id: 'angle', name: '角度', icon: 'view-tool-angel.png', pts: 3 },
|
||
{ id: 'radius', name: '半径', icon: 'view-tool-radius.png', pick: true },
|
||
{ id: 'area', name: '面积', icon: 'view-tool-Area.png', pts: 0 },
|
||
]
|
||
|
||
export class MeasureTool {
|
||
constructor(renderer, snapper, onChange) {
|
||
this.r = renderer
|
||
this.snap = snapper
|
||
this.onChange = onChange || (() => {})
|
||
this.mode = null
|
||
this.results = [] // {type, text, geom}
|
||
this.pending = [] // 已点的世界坐标
|
||
this.pendingShapes = [] // 已选的图元下标
|
||
this.cursor = null // 当前捕捉点
|
||
this.unit = 'mm'
|
||
this.precision = 3
|
||
}
|
||
|
||
setMode(mode) { this.mode = mode; this.reset(); this.onChange() }
|
||
reset() { this.pending = []; this.pendingShapes = []; }
|
||
clear() { this.results = []; this.reset(); this.onChange() }
|
||
remove(i) { this.results.splice(i, 1); this.onChange() }
|
||
|
||
fmt(v) {
|
||
const n = Math.abs(v) >= 1e6 ? v.toExponential(3) : v.toFixed(this.precision).replace(/\.?0+$/, '')
|
||
return `${n} ${this.unit}`
|
||
}
|
||
fmtAngle(a) { return `${((a * 180) / Math.PI).toFixed(2)}°` }
|
||
|
||
/** 鼠标移动：更新捕捉预览 */
|
||
hover(px, py) {
|
||
const s = this.snap.find(px, py)
|
||
this.cursor = s || { ...this.r.toWorld(px, py), type: null, shape: null }
|
||
return this.cursor
|
||
}
|
||
|
||
/** 左键点击；返回 true 表示消费了这次点击 */
|
||
click(px, py) {
|
||
const def = MEASURE_MODES.find((m) => m.id === this.mode)
|
||
if (!def) return false
|
||
const p = this.hover(px, py)
|
||
|
||
if (def.pick || def.picks) {
|
||
const idx = p.shape != null ? p.shape : this.r.pick(px, py, 8)
|
||
if (idx == null) return true
|
||
this.pendingShapes.push(idx)
|
||
if (this.pendingShapes.length >= (def.picks || 1)) this._finishShapes(def)
|
||
return true
|
||
}
|
||
if (def.mixed) {
|
||
// 点到线：先点一个点，再点一条线
|
||
if (this.pending.length === 0) this.pending.push([p.x, p.y])
|
||
else {
|
||
const idx = p.shape != null ? p.shape : this.r.pick(px, py, 8)
|
||
if (idx == null) return true
|
||
this.pendingShapes.push(idx)
|
||
this._finishShapes(def)
|
||
}
|
||
return true
|
||
}
|
||
this.pending.push([p.x, p.y])
|
||
if (def.pts && this.pending.length >= def.pts) this._finishPoints(def)
|
||
return true
|
||
}
|
||
|
||
/** 双击 / 回车：结束连续型测量 */
|
||
finish() {
|
||
const def = MEASURE_MODES.find((m) => m.id === this.mode)
|
||
if (!def || def.pts !== 0) return
|
||
if (this.pending.length >= 2) this._finishPoints(def)
|
||
else this.reset()
|
||
}
|
||
|
||
cancel() { this.reset(); this.onChange() }
|
||
|
||
/**
|
||
* 记一条测量结果。
|
||
* @param {() => [string, string?]} make 惰性格式化，返回 [列表文字, 图上标签]。
|
||
* 之所以存函数而不是定值：改了单位或小数位以后，已有结果要能跟着变。
|
||
*/
|
||
_push(type, make, geom) {
|
||
const rec = { type, make, geom }
|
||
this._apply(rec)
|
||
this.results.push(rec)
|
||
this.reset()
|
||
this.onChange()
|
||
}
|
||
|
||
_apply(rec) {
|
||
const [text, label] = rec.make()
|
||
rec.text = text
|
||
if (rec.geom) rec.geom.label = label === undefined ? text : label
|
||
}
|
||
|
||
/** 单位 / 小数位变了以后刷新全部结果 */
|
||
refresh() {
|
||
for (const r of this.results) this._apply(r)
|
||
}
|
||
|
||
_finishPoints(def) {
|
||
const p = this.pending.slice()
|
||
switch (def.id) {
|
||
case 'coord':
|
||
this._push('坐标',
|
||
() => [`X=${p[0][0].toFixed(this.precision)} Y=${p[0][1].toFixed(this.precision)}`, ''],
|
||
{ kind: 'pts', pts: p })
|
||
break
|
||
case 'p2p': {
|
||
const d = Math.hypot(p[1][0] - p[0][0], p[1][1] - p[0][1])
|
||
this._push('距离', () => [this.fmt(d)], { kind: 'line', pts: p })
|
||
break
|
||
}
|
||
case 'linear': {
|
||
const dx = Math.abs(p[1][0] - p[0][0]), dy = Math.abs(p[1][1] - p[0][1])
|
||
this._push('线性', () => [`ΔX=${this.fmt(dx)} ΔY=${this.fmt(dy)}`], { kind: 'linear', pts: p })
|
||
break
|
||
}
|
||
case 'cont': {
|
||
let total = 0
|
||
for (let i = 1; i < p.length; i++) total += Math.hypot(p[i][0] - p[i - 1][0], p[i][1] - p[i - 1][1])
|
||
this._push('连续长度', () => [this.fmt(total)], { kind: 'poly', pts: p })
|
||
break
|
||
}
|
||
case 'angle': {
|
||
const a = Math.atan2(p[0][1] - p[1][1], p[0][0] - p[1][0])
|
||
const b = Math.atan2(p[2][1] - p[1][1], p[2][0] - p[1][0])
|
||
let d = Math.abs(a - b)
|
||
if (d > Math.PI) d = TAU - d
|
||
this._push('角度', () => [this.fmtAngle(d)], { kind: 'angle', pts: p })
|
||
break
|
||
}
|
||
case 'area': {
|
||
let area = 0, peri = 0
|
||
for (let i = 0; i < p.length; i++) {
|
||
const q = p[(i + 1) % p.length]
|
||
area += p[i][0] * q[1] - q[0] * p[i][1]
|
||
peri += Math.hypot(q[0] - p[i][0], q[1] - p[i][1])
|
||
}
|
||
area = Math.abs(area) / 2
|
||
this._push('面积',
|
||
() => [`${area.toFixed(this.precision)} ${this.unit}² 周长 ${this.fmt(peri)}`,
|
||
`${area.toFixed(Math.min(2, this.precision))} ${this.unit}²`],
|
||
{ kind: 'area', pts: p })
|
||
break
|
||
}
|
||
default: this.reset()
|
||
}
|
||
}
|
||
|
||
_finishShapes(def) {
|
||
const shapes = this.pendingShapes.map((i) => this.r.shapes[i])
|
||
switch (def.id) {
|
||
case 'seg': {
|
||
const len = shapeLength(shapes[0])
|
||
if (len == null) { this.reset(); this.onChange(); return }
|
||
this._push('长度', () => [this.fmt(len)], { kind: 'shape', shape: this.pendingShapes[0] })
|
||
break
|
||
}
|
||
case 'arclen': {
|
||
const s = shapes[0]
|
||
if (s.kind !== 'arc') { this.reset(); this.onChange(); return }
|
||
let sweep = s.a1 - s.a0
|
||
while (sweep <= 0) sweep += TAU
|
||
const len = sweep * ((s.rx + s.ry) / 2)
|
||
this._push('弧长', () => [this.fmt(len)], { kind: 'shape', shape: this.pendingShapes[0] })
|
||
break
|
||
}
|
||
case 'radius': {
|
||
const s = shapes[0]
|
||
if (s.kind !== 'arc') { this.reset(); this.onChange(); return }
|
||
const round = Math.abs(s.rx - s.ry) < 1e-6
|
||
this._push('半径',
|
||
() => [round ? `R=${this.fmt(s.rx)} ⌀=${this.fmt(s.rx * 2)}`
|
||
: `长半轴=${this.fmt(s.rx)} 短半轴=${this.fmt(s.ry)}`,
|
||
round ? `R${this.fmt(s.rx)}` : this.fmt(s.rx)],
|
||
{ kind: 'shape', shape: this.pendingShapes[0] })
|
||
break
|
||
}
|
||
case 'p2l': {
|
||
const pt = this.pending[0]
|
||
const q = nearestOnShape(shapes[0], pt[0], pt[1])
|
||
if (!q) { this.reset(); this.onChange(); return }
|
||
const d = Math.hypot(q[0] - pt[0], q[1] - pt[1])
|
||
this._push('点到线', () => [this.fmt(d)], { kind: 'line', pts: [pt, q] })
|
||
break
|
||
}
|
||
case 'l2l': {
|
||
const [a, b] = shapes
|
||
const da = shapeDir(a), db = shapeDir(b)
|
||
if (!da || !db) { this.reset(); this.onChange(); return }
|
||
let ang = Math.abs(Math.atan2(da[1], da[0]) - Math.atan2(db[1], db[0]))
|
||
if (ang > Math.PI) ang = TAU - ang
|
||
if (ang > Math.PI / 2) ang = Math.PI - ang
|
||
if (ang < 1e-3) {
|
||
// 平行：量垂直距离
|
||
const p0 = [a.pts[0], a.pts[1]]
|
||
const q = nearestOnShape(b, p0[0], p0[1])
|
||
const d = q ? Math.hypot(q[0] - p0[0], q[1] - p0[1]) : 0
|
||
this._push('线到线', () => [`平行 间距 ${this.fmt(d)}`, this.fmt(d)], { kind: 'line', pts: [p0, q] })
|
||
} else {
|
||
this._push('线到线', () => [`夹角 ${this.fmtAngle(ang)}`, this.fmtAngle(ang)],
|
||
{ kind: 'shapes', shapes: this.pendingShapes.slice() })
|
||
}
|
||
break
|
||
}
|
||
default: this.reset()
|
||
}
|
||
}
|
||
|
||
// ------------------------------------------------------------ 绘制
|
||
|
||
draw(ctx, r) {
|
||
ctx.save()
|
||
ctx.lineWidth = 1.6 * r.dpr
|
||
ctx.strokeStyle = '#2b9ae8'
|
||
ctx.fillStyle = '#2b9ae8'
|
||
ctx.font = `${12 * r.dpr}px "Microsoft YaHei", sans-serif`
|
||
|
||
for (const res of this.results) this._drawGeom(ctx, r, res.geom, '#2b9ae8')
|
||
if (this.mode) {
|
||
// 未完成的测量用橙色预览
|
||
const g = { kind: this.mode === 'area' ? 'area' : 'poly', pts: this.pending, open: true }
|
||
if (this.pending.length) this._drawGeom(ctx, r, g, '#ff9800')
|
||
for (const i of this.pendingShapes) this._outline(ctx, r, i, '#ff9800')
|
||
if (this.cursor) this._drawSnap(ctx, r, this.cursor)
|
||
}
|
||
ctx.restore()
|
||
}
|
||
|
||
_drawSnap(ctx, r, c) {
|
||
// 用 sx/sy 而不是 toScreen：overlay 的画布变换里已经带了视图旋转，
|
||
// 再用含旋转的 toScreen 会转两次
|
||
const x = r.sx(c.x), y = r.sy(c.y)
|
||
const s = 5 * r.dpr
|
||
ctx.strokeStyle = '#ff5722'
|
||
ctx.lineWidth = 1.6 * r.dpr
|
||
ctx.beginPath()
|
||
if (c.type === 'end' || c.type === 'node') ctx.rect(x - s, y - s, s * 2, s * 2)
|
||
else if (c.type === 'mid') { ctx.moveTo(x - s, y + s); ctx.lineTo(x, y - s); ctx.lineTo(x + s, y + s); ctx.closePath() }
|
||
else if (c.type === 'center') ctx.arc(x, y, s, 0, TAU)
|
||
else if (c.type === 'quad') { ctx.moveTo(x, y - s); ctx.lineTo(x + s, y); ctx.lineTo(x, y + s); ctx.lineTo(x - s, y); ctx.closePath() }
|
||
else { ctx.moveTo(x - s, y - s); ctx.lineTo(x + s, y + s); ctx.moveTo(x + s, y - s); ctx.lineTo(x - s, y + s) }
|
||
ctx.stroke()
|
||
const lb = Snapper.label(c.type)
|
||
if (lb) {
|
||
ctx.fillStyle = '#ff5722'
|
||
ctx.fillText(lb, x + s + 4 * r.dpr, y - s)
|
||
}
|
||
}
|
||
|
||
_outline(ctx, r, idx, color) {
|
||
const s = r.shapes[idx]
|
||
if (!s) return
|
||
ctx.strokeStyle = color
|
||
ctx.lineWidth = 3 * r.dpr
|
||
ctx.beginPath()
|
||
r._path(ctx, s)
|
||
ctx.stroke()
|
||
}
|
||
|
||
_drawGeom(ctx, r, g, color) {
|
||
if (!g) return
|
||
const S = (p) => [r.sx(p[0]), r.sy(p[1])]
|
||
ctx.strokeStyle = color
|
||
ctx.fillStyle = color
|
||
ctx.lineWidth = 1.6 * r.dpr
|
||
const pts = g.pts || []
|
||
switch (g.kind) {
|
||
case 'pts':
|
||
for (const p of pts) mark(ctx, r, S(p), color)
|
||
break
|
||
case 'line':
|
||
case 'poly': {
|
||
if (pts.length < 1) break
|
||
ctx.beginPath()
|
||
const a = S(pts[0])
|
||
ctx.moveTo(a[0], a[1])
|
||
for (let i = 1; i < pts.length; i++) { const b = S(pts[i]); ctx.lineTo(b[0], b[1]) }
|
||
ctx.stroke()
|
||
for (const p of pts) mark(ctx, r, S(p), color)
|
||
break
|
||
}
|
||
case 'linear': {
|
||
if (pts.length < 2) break
|
||
const a = S(pts[0]), b = S(pts[1])
|
||
ctx.setLineDash([4 * r.dpr, 3 * r.dpr])
|
||
ctx.beginPath()
|
||
ctx.moveTo(a[0], a[1]); ctx.lineTo(b[0], a[1]); ctx.lineTo(b[0], b[1])
|
||
ctx.stroke()
|
||
ctx.setLineDash([])
|
||
ctx.beginPath(); ctx.moveTo(a[0], a[1]); ctx.lineTo(b[0], b[1]); ctx.stroke()
|
||
mark(ctx, r, a, color); mark(ctx, r, b, color)
|
||
break
|
||
}
|
||
case 'angle': {
|
||
if (pts.length < 3) break
|
||
const a = S(pts[0]), v = S(pts[1]), b = S(pts[2])
|
||
ctx.beginPath()
|
||
ctx.moveTo(a[0], a[1]); ctx.lineTo(v[0], v[1]); ctx.lineTo(b[0], b[1])
|
||
ctx.stroke()
|
||
const rr = 26 * r.dpr
|
||
const a0 = Math.atan2(a[1] - v[1], a[0] - v[0])
|
||
const a1 = Math.atan2(b[1] - v[1], b[0] - v[0])
|
||
ctx.beginPath(); ctx.arc(v[0], v[1], rr, a0, a1); ctx.stroke()
|
||
for (const p of [a, v, b]) mark(ctx, r, p, color)
|
||
break
|
||
}
|
||
case 'area': {
|
||
if (pts.length < 2) break
|
||
ctx.beginPath()
|
||
const a = S(pts[0]); ctx.moveTo(a[0], a[1])
|
||
for (let i = 1; i < pts.length; i++) { const b = S(pts[i]); ctx.lineTo(b[0], b[1]) }
|
||
if (!g.open) ctx.closePath()
|
||
ctx.stroke()
|
||
if (!g.open) { ctx.globalAlpha = 0.14; ctx.fill(); ctx.globalAlpha = 1 }
|
||
for (const p of pts) mark(ctx, r, S(p), color)
|
||
break
|
||
}
|
||
case 'shape':
|
||
this._outline(ctx, r, g.shape, color)
|
||
break
|
||
case 'shapes':
|
||
for (const i of g.shapes) this._outline(ctx, r, i, color)
|
||
break
|
||
default: break
|
||
}
|
||
if (g.label && pts.length) {
|
||
const c = S(pts[pts.length - 1])
|
||
drawLabel(ctx, r, c[0] + 10 * r.dpr, c[1] - 10 * r.dpr, g.label, color)
|
||
} else if (g.label && g.kind === 'shape') {
|
||
const s = r.shapes[g.shape]
|
||
if (s) drawLabel(ctx, r, r.sx((s.bbox[0] + s.bbox[2]) / 2), r.sy(s.bbox[3]) - 10 * r.dpr, g.label, color)
|
||
}
|
||
}
|
||
}
|
||
|
||
function mark(ctx, r, p, color) {
|
||
const s = 3 * r.dpr
|
||
ctx.fillStyle = color
|
||
ctx.fillRect(p[0] - s, p[1] - s, s * 2, s * 2)
|
||
}
|
||
|
||
function drawLabel(ctx, r, x, y, text, color) {
|
||
ctx.font = `${12 * r.dpr}px "Microsoft YaHei", sans-serif`
|
||
const w = ctx.measureText(text).width + 10 * r.dpr
|
||
const h = 18 * r.dpr
|
||
ctx.fillStyle = color
|
||
ctx.globalAlpha = 0.92
|
||
roundRect(ctx, x, y - h, w, h, 3 * r.dpr)
|
||
ctx.fill()
|
||
ctx.globalAlpha = 1
|
||
ctx.fillStyle = '#fff'
|
||
ctx.textBaseline = 'middle'
|
||
ctx.fillText(text, x + 5 * r.dpr, y - h / 2)
|
||
ctx.textBaseline = 'alphabetic'
|
||
}
|
||
|
||
function roundRect(ctx, x, y, w, h, r) {
|
||
ctx.beginPath()
|
||
ctx.moveTo(x + r, y)
|
||
ctx.arcTo(x + w, y, x + w, y + h, r)
|
||
ctx.arcTo(x + w, y + h, x, y + h, r)
|
||
ctx.arcTo(x, y + h, x, y, r)
|
||
ctx.arcTo(x, y, x + w, y, r)
|
||
ctx.closePath()
|
||
}
|
||
|
||
function shapeLength(s) {
|
||
if (!s) return null
|
||
if (s.kind === 'poly') {
|
||
let len = 0
|
||
const p = s.pts
|
||
for (let i = 0; i + 3 < p.length; i += 2) len += Math.hypot(p[i + 2] - p[i], p[i + 3] - p[i + 1])
|
||
if (s.closed && p.length >= 4) len += Math.hypot(p[0] - p[p.length - 2], p[1] - p[p.length - 1])
|
||
return len
|
||
}
|
||
if (s.kind === 'arc') {
|
||
let sweep = s.a1 - s.a0
|
||
while (sweep <= 0) sweep += TAU
|
||
return sweep * ((s.rx + s.ry) / 2)
|
||
}
|
||
return null
|
||
}
|
||
|
||
function shapeDir(s) {
|
||
if (!s || s.kind !== 'poly' || s.pts.length < 4) return null
|
||
const p = s.pts
|
||
const dx = p[p.length - 2] - p[0], dy = p[p.length - 1] - p[1]
|
||
const l = Math.hypot(dx, dy)
|
||
return l > 0 ? [dx / l, dy / l] : null
|
||
}
|
||
|
||
// ---------------------------------------------------------------- 批注
|
||
|
||
export const ANNO_MODES = [
|
||
{ id: 'text', name: '文字', icon: 'view-tool-annoText.png' },
|
||
{ id: 'free', name: '自由线', icon: 'view-tool-freehandLine.png' },
|
||
{ id: 'line', name: '直线', icon: 'view-tool-annoLine.png' },
|
||
{ id: 'arrow', name: '箭头', icon: 'view-tool-annoArrow.png' },
|
||
{ id: 'rect', name: '矩形', icon: 'view-tool-rectangleAnno.png' },
|
||
{ id: 'circle', name: '圆', icon: 'view-tool-circleAnno.png' },
|
||
{ id: 'cloud', name: '云线', icon: 'view-tool-cloudLine.png' },
|
||
]
|
||
|
||
export class AnnoTool {
|
||
constructor(renderer, onChange) {
|
||
this.r = renderer
|
||
this.onChange = onChange || (() => {})
|
||
this.mode = null
|
||
this.items = []
|
||
this.color = '#e60012'
|
||
this.width = 2
|
||
this.draft = null
|
||
}
|
||
|
||
setMode(m) { this.mode = m; this.draft = null; this.onChange() }
|
||
clear() { this.items = []; this.draft = null; this.onChange() }
|
||
undo() { this.items.pop(); this.onChange() }
|
||
|
||
down(px, py) {
|
||
if (!this.mode) return false
|
||
const w = this.r.toWorld(px, py)
|
||
if (this.mode === 'text') {
|
||
const t = window.prompt('批注文字')
|
||
if (t) this.items.push({ kind: 'text', x: w.x, y: w.y, text: t, color: this.color, size: 14 })
|
||
this.onChange()
|
||
return true
|
||
}
|
||
this.draft = { kind: this.mode, pts: [[w.x, w.y], [w.x, w.y]], color: this.color, width: this.width }
|
||
return true
|
||
}
|
||
|
||
move(px, py) {
|
||
if (!this.draft) return false
|
||
const w = this.r.toWorld(px, py)
|
||
if (this.draft.kind === 'free') this.draft.pts.push([w.x, w.y])
|
||
else this.draft.pts[1] = [w.x, w.y]
|
||
return true
|
||
}
|
||
|
||
up() {
|
||
if (!this.draft) return false
|
||
const d = this.draft
|
||
this.draft = null
|
||
const [a, b] = [d.pts[0], d.pts[d.pts.length - 1]]
|
||
if (d.kind !== 'free' && Math.hypot(b[0] - a[0], b[1] - a[1]) < 1e-9) return true
|
||
this.items.push(d)
|
||
this.onChange()
|
||
return true
|
||
}
|
||
|
||
draw(ctx, r) {
|
||
ctx.save()
|
||
for (const it of this.items) this._one(ctx, r, it)
|
||
if (this.draft) this._one(ctx, r, this.draft)
|
||
ctx.restore()
|
||
}
|
||
|
||
_one(ctx, r, it) {
|
||
ctx.strokeStyle = it.color
|
||
ctx.fillStyle = it.color
|
||
ctx.lineWidth = (it.width || 2) * r.dpr
|
||
ctx.lineJoin = 'round'
|
||
ctx.lineCap = 'round'
|
||
const S = (p) => [r.sx(p[0]), r.sy(p[1])]
|
||
if (it.kind === 'text') {
|
||
const p = S([it.x, it.y])
|
||
ctx.font = `${(it.size || 14) * r.dpr}px "Microsoft YaHei", sans-serif`
|
||
ctx.fillText(it.text, p[0], p[1])
|
||
return
|
||
}
|
||
const a = S(it.pts[0]), b = S(it.pts[it.pts.length - 1])
|
||
ctx.beginPath()
|
||
switch (it.kind) {
|
||
case 'free': {
|
||
const p0 = S(it.pts[0])
|
||
ctx.moveTo(p0[0], p0[1])
|
||
for (let i = 1; i < it.pts.length; i++) { const p = S(it.pts[i]); ctx.lineTo(p[0], p[1]) }
|
||
ctx.stroke()
|
||
return
|
||
}
|
||
case 'line':
|
||
ctx.moveTo(a[0], a[1]); ctx.lineTo(b[0], b[1]); ctx.stroke()
|
||
return
|
||
case 'arrow': {
|
||
ctx.moveTo(a[0], a[1]); ctx.lineTo(b[0], b[1]); ctx.stroke()
|
||
const ang = Math.atan2(b[1] - a[1], b[0] - a[0])
|
||
const h = 10 * r.dpr
|
||
ctx.beginPath()
|
||
ctx.moveTo(b[0], b[1])
|
||
ctx.lineTo(b[0] - h * Math.cos(ang - 0.4), b[1] - h * Math.sin(ang - 0.4))
|
||
ctx.lineTo(b[0] - h * Math.cos(ang + 0.4), b[1] - h * Math.sin(ang + 0.4))
|
||
ctx.closePath(); ctx.fill()
|
||
return
|
||
}
|
||
case 'rect':
|
||
ctx.rect(Math.min(a[0], b[0]), Math.min(a[1], b[1]), Math.abs(b[0] - a[0]), Math.abs(b[1] - a[1]))
|
||
ctx.stroke()
|
||
return
|
||
case 'circle': {
|
||
const rr = Math.hypot(b[0] - a[0], b[1] - a[1])
|
||
ctx.arc(a[0], a[1], rr, 0, TAU); ctx.stroke()
|
||
return
|
||
}
|
||
case 'cloud': {
|
||
cloudPath(ctx, Math.min(a[0], b[0]), Math.min(a[1], b[1]), Math.abs(b[0] - a[0]), Math.abs(b[1] - a[1]), 12 * r.dpr)
|
||
ctx.stroke()
|
||
return
|
||
}
|
||
default: return
|
||
}
|
||
}
|
||
}
|
||
|
||
/** 修订云线：沿矩形边界画一串外凸圆弧 */
|
||
function cloudPath(ctx, x, y, w, h, bulge) {
|
||
const r = Math.max(6, bulge)
|
||
const seg = (x0, y0, x1, y1, dir) => {
|
||
const len = Math.hypot(x1 - x0, y1 - y0)
|
||
const n = Math.max(1, Math.round(len / (r * 2)))
|
||
for (let i = 0; i < n; i++) {
|
||
const t0 = i / n, t1 = (i + 1) / n
|
||
const ax = x0 + (x1 - x0) * t0, ay = y0 + (y1 - y0) * t0
|
||
const bx = x0 + (x1 - x0) * t1, by = y0 + (y1 - y0) * t1
|
||
const mx = (ax + bx) / 2, my = (ay + by) / 2
|
||
const dx = bx - ax, dy = by - ay
|
||
const l = Math.hypot(dx, dy) || 1
|
||
const nx = (-dy / l) * dir * (l / 3), ny = (dx / l) * dir * (l / 3)
|
||
ctx.moveTo(ax, ay)
|
||
ctx.quadraticCurveTo(mx + nx, my + ny, bx, by)
|
||
}
|
||
}
|
||
ctx.beginPath()
|
||
seg(x, y, x + w, y, -1)
|
||
seg(x + w, y, x + w, y + h, -1)
|
||
seg(x + w, y + h, x, y + h, -1)
|
||
seg(x, y + h, x, y, -1)
|
||
}
|