Я хочу нарисовать изогнутый путь (дугу или кубическую кривую Безье) от точки к окружности. Известны следующие параметры: pX (x-позиция точки), pY (y-позиция точки), cX (x -позиция центра круга), cY (y-позиция центра круга) и cR (радиус круга).
Этот рисунок иллюстрирует проблему.
Круг не непрозрачен, и когда путь рисуется от точки к центру круга, он виден через круг (см. № 1 на связанном рисунке). Этого не должно происходить, поскольку существует некоторый фоновый контент, который должен быть виден через круг. Итак, решение, которое я представляю, состоит в том, чтобы нарисовать путь до границы круга.
Нарисуйте прямую линию, пока граница круга не станет легкой (см. № 2 на связанном рисунке):
var theta = Math.atan2(cY - pY, cX - pX);
var startX = pX;
var startY = pY;
var endX = cX - cR * Math.cos(theta);
var endY = cY - cR * Math.sin(theta);
line.attr('x1', startX).attr('y1', startY).attr('x2', endX).attr('y2', endY);
Если я применю тот же принцип к изогнутому пути, он будет нарисован неправильно (см. № 3 на связанном рисунке). Он должен сохранять форму, как если бы он указывал на центр круга, но заканчиваться, не перекрывая круг (см. № 4 на связанном рисунке).
Дополнительные наблюдения:
- кривая может быть такой же толстой, как круг
- одновременно в визуализации может существовать несколько сотен пар окружность-дуга, поэтому производительность также принимается во внимание
Любые предложения о том, как решить эту проблему? Заранее спасибо!
