Функция thickLine
принимает координаты трёх точек и смещение, возвращает координаты трёх пар точек: левая и правая соседки для первой точки, левая и правая соседки для второй точки, левая и правая соседки для третьей точки.
Математика для крайних точек простая: направление отрезка поворачивается на девяносто градусов ((x, y) -> (-y, x)), длина нормализуется. Имея направление легко вычислить соседок точек.
Поворот вектора v обозначим как v^. Тогда левая соседка точки
a относительно отрезка (a, b) на расстоянии w будет:
na = (b - a)^ - нормаль к отрезку.
al = a + w na - левая соседка.
Левая соседка точки c относительно отрезка (b, c):
nc = (c - b)^ - нормаль к отрезку.
cl = c + w nc - левая соседка.
Левая соседка точки b. Направление в котором нужно двигаться вычисляется
как биссектриса направлений na и nc:
nb = na + nc.
Сама левая соседка:
bl = b + (2 w / ‖nb‖2) nb.
Покажем что отрезок (al, bl) параллелен (a,
b). Для этого он должен быть перпендикулярен na, то есть
надо проверить что скалярное произведение равно нулю:
na (bl - al) =
= na (b + (2 w / ‖nb‖2) nb - (a + w na)) =
= na ((b - a) + (2 w / ‖nb‖2) nb - w na) =
= na (b - a) + na ((2 w / ‖nb‖2) nb - w na) =
= 0 + na (w / ‖nb‖2) (2 nb - ‖nb‖2 na) =
= na (w / ‖nb‖2) (2 (na + nc) - ‖na + nc‖2 na) =
= (w / ‖nb‖2) (2 (na na + na nc) - ‖na + nc‖2 na na) =
= (w / ‖nb‖2) (2 (na na + na nc) - ((na + nc) (na + nc)) na na) =
= (w / ‖nb‖2) (2 (1 + na nc) - (na + nc) (na + nc)) =
= (w / ‖nb‖2) (2 (1 + na nc) - (na na + 2 na nc + nc nc)) =
= (w / ‖nb‖2) (2 (1 + na nc) - (1 + 2 na nc + 1)) =
= (w / ‖nb‖2) 0 =
= 0
Никакой тригонометрии не нужно. Самые сложные операции - деление и извлечение корня. Код может выдавать бесконечности и NaN
если точки совпадают или поворот на 180 градусов. В таких ситуациях задача неразрешима в принципе - нельзя определить нормали к отрезкам или определить места средних соседок:
// a, b, c - points, w - half width
const thickLine = (a, b, c, w) => {
const normal = (a, b) => {
const x = b[0] - a[0];
const y = b[1] - a[1];
const f = 1 / Math.sqrt(x ** 2 + y ** 2);
return [-y * f, x * f];
};
const na = normal(a, b);
const nc = normal(b, c);
const d = [na[0] + nc[0], na[1] + nc[1]];
const f = w * 2 / (d[0] ** 2 + d[1] ** 2);
const shift = (p, dir, w) => [
p[0] + dir[0] * w, p[1] + dir[1] * w
];
return [
shift(a, na, w),
shift(a, na, -w),
shift(b, d , f),
shift(b, d , -f),
shift(c, nc, w),
shift(c, nc, -w)
];
};
Полный работающий пример. Красные точки можно таскать:
// a, b, c - points, w - half width
const thickLine = (a, b, c, w) => {
const normal = (a, b) => {
const x = b[0] - a[0];
const y = b[1] - a[1];
const f = 1 / Math.sqrt(x ** 2 + y ** 2);
return [-y * f, x * f];
};
const na = normal(a, b);
const nc = normal(b, c);
const d = [na[0] + nc[0], na[1] + nc[1]];
const f = w * 2 / (d[0] ** 2 + d[1] ** 2);
const shift = (p, dir, w) => [
p[0] + dir[0] * w, p[1] + dir[1] * w
];
return [
shift(a, na, w),
shift(a, na, -w),
shift(b, d , f),
shift(b, d , -f),
shift(c, nc, w),
shift(c, nc, -w)
];
};
const makePoint = svg => {
const point = document.createElementNS(
'http://www.w3.org/2000/svg',
'circle'
);
point.setAttribute('r', 4);
point.setAttribute('stroke', 'blue');
point.setAttribute('fill', 'blue');
svg.appendChild(point);
const movePoint = (x, y) => {
if (!isFinite(x) || !isFinite(y)) {
return;
}
const ctm = point.getCTM();
ctm.e = x;
ctm.f = y;
const t = svg.createSVGTransform();
t.setMatrix(ctm);
point.transform.baseVal.initialize(t);
};
return {
'move': movePoint
};
};
const makeDraggablePoint = svg => {
const subscribers = [];
const group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
svg.appendChild(group);
const p = () => {
const ctm = group.getCTM();
return [ctm.e, ctm.f];
};
const moveGroup = (x, y) => {
const ctm = group.getCTM();
ctm.e = x;
ctm.f = y;
const t = svg.createSVGTransform();
t.setMatrix(ctm);
group.transform.baseVal.initialize(t);
subscribers.forEach(e => e());
};
const handle = document.createElementNS(
'http://www.w3.org/2000/svg',
'circle'
);
handle.setAttribute('r', 20);
handle.setAttribute('stroke', 'transparent');
handle.setAttribute('fill', 'transparent');
handle.style.cursor = 'grab';
group.appendChild(handle);
const point = document.createElementNS(
'http://www.w3.org/2000/svg',
'circle'
);
point.setAttribute('r', 4);
point.setAttribute('stroke', 'red');
point.setAttribute('fill', 'red');
point.style.cursor = 'grab';
group.appendChild(point);
const onPointerDown = e => {
e.preventDefault();
const [x, y] = p();
const offset_x = x - e.clientX;
const offset_y = y - e.clientY;
group.setPointerCapture(e.pointerId);
const oldMove = group.onpointermove;
const oldUp = group.onpointerup;
group.onpointermove = e => {
e.preventDefault();
const sx = e.clientX + offset_x;
const sy = e.clientY + offset_y;
moveGroup(sx, sy);
};
group.onpointerup = e => {
e.preventDefault();
group.onpointerup = oldUp;
group.onpointermove = oldMove;
group.releasePointerCapture(e.pointerId);
};
};
handle.onpointerdown = onPointerDown;
point.onpointerdown = onPointerDown;
return {
'subscribe': cb => subscribers.push(cb),
'p': p,
'move': moveGroup,
};
};
const makeSegment = svg => {
// <line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke-width="5"/>
const line = document.createElementNS(
'http://www.w3.org/2000/svg',
'line'
);
svg.appendChild(line);
line.setAttribute('stroke', 'black');
line.setAttribute('stroke-width', '2');
return {
'p1': () => [line.getAttribute('x1'), line.getAttribute('y1')],
'p2': () => [line.getAttribute('x2'), line.getAttribute('y2')],
'move1': (x, y) => {
if (isFinite(x) && isFinite(y)) {
line.setAttribute('x1', x);
line.setAttribute('y1', y);
}
},
'move2': (x, y) => {
if (isFinite(x) && isFinite(y)) {
line.setAttribute('x2', x);
line.setAttribute('y2', y);
}
}
};
};
(() => {
const body = document.getElementsByTagName('body')[0];
const svg = document.createElementNS(
'http://www.w3.org/2000/svg',
'svg'
);
svg.setAttribute('width', 400);
svg.setAttribute('height', 200);
body.appendChild(svg);
const s12 = makeSegment(svg);
const s23 = makeSegment(svg);
const s12l = makeSegment(svg);
const s12r = makeSegment(svg);
const s23l = makeSegment(svg);
const s23r = makeSegment(svg);
const p1l = makePoint(svg);
const p1r = makePoint(svg);
const p2l = makePoint(svg);
const p2r = makePoint(svg);
const p3l = makePoint(svg);
const p3r = makePoint(svg);
const p1 = makeDraggablePoint(svg);
const p2 = makeDraggablePoint(svg);
const p3 = makeDraggablePoint(svg);
const halfWidth = 20;
const updateLine = () => {
const points = thickLine(p1.p(), p2.p(), p3.p(), halfWidth);
p1l .move (...points[0]);
s12l.move1(...points[0]);
p1r .move (...points[1]);
s12r.move1(...points[1]);
p2l .move (...points[2]);
s12l.move2(...points[2]);
s23l.move1(...points[2]);
p2r .move (...points[3]);
s12r.move2(...points[3]);
s23r.move1(...points[3]);
p3l .move (...points[4]);
s23l.move2(...points[4]);
p3r .move (...points[5]);
s23r.move2(...points[5]);
};
p1.subscribe(() => {
s12.move1(...p1.p());
updateLine();
});
p2.subscribe(() => {
const [x, y] = p2.p();
s12.move2(x, y);
s23.move1(x, y);
updateLine();
});
p3.subscribe(() => {
s23.move2(...p3.p());
updateLine();
});
p1.move(100, 50);
p2.move(200, 50);
p3.move(200, 100);
})();
плоскости x и z
писать, это ни к чему. Вы случайно не "толстую линию" хотите нарисовать?