Нарисуйте изогнутый путь до границы круга в D3.js - PullRequest
Новая
       101

Нарисуйте изогнутый путь до границы круга в D3.js

0 голосов
/ 22 февраля 2019

Я хочу нарисовать изогнутую траекторию (дуга или кубическая кривая Безье) от точки к кругу.Известны следующие параметры: pX (x-позиция точки), pY (y-позиция точки), cX (x-позицияцентр круга), cY (y-позиция центра круга) и cR (радиус круга).

Этот рисунок иллюстрирует проблему.

enter image description here

Круг не является непрозрачным, и когда путь рисуется от точки к центру круга, он виден через круг (см. № 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 на связанном рисунке).

Дополнительные наблюдения:

  • кривая может быть такой же толщины, как и круг
  • . В визуализации одновременно может существовать несколько сотен пар дуг окружности, поэтому производительность также принимается во внимание

Любые предложенияна как это решить?Заранее спасибо!

1 Ответ

0 голосов
/ 22 февраля 2019

Посмотрите на эту картинку:

The resulting curve together with its control points.

Красная точка - это ваша точка (pX, pY), черная точка - центр круга,Вы выбираете зеленую точку где-то на плоскости (вы можете поэкспериментировать с ее местоположением, чтобы найти нужную вам кривую) и построить синюю точку как пересечение вашего круга с прямой линией, соединяющей черные и зеленые точки.

Теперь вы используете красную точку, зеленую точку и синюю точку в качестве контрольного многоугольника для построения квадратичной кривой Безье.Он начнется с красной точки, оканчивается синей точкой на круге, а его касательная будет к центру круга.

Если ваша кривая будет действительно толстой, этого простого решения может оказаться недостаточно.В этом случае я рекомендую делать так, как рекомендует @ rioV8.

...