путь прорисовки в SVG с дугой 90 ° между перпендикулярными линиями

Question

Я хотел бы нарисовать два перпендикулярных сегмента между двумя точками в пространстве.

Вместо визуального эффекта 90 ° между двумя точками, я хотел бы нарисовать дугу (четверть круга), чтобывизуально сглаживать угол.

Я изо всех сил пытаюсь понять, как можно сформировать траекторию, если использовать безье дуг - не могли бы вы показать решение и объяснить, что делают параметры?

Мне также интересно, как рисовать контурыведут себя вычислительно - насколько они выполняют пути только с параметрами MHV, соблюдают кривые рисования или кривые Безье?

Я читал направляющие, но пока не достиг желаемых результатов.

---

Пример:

пока у меня есть:

// draw two perpendicular segments between points (0,0) and (100, 100)
<svg viewBox="0 0 200 200">
        <path 
              d="
                M 0,0
                H 100 
                V 100
                 "
              />
    </svg> 

Это визуально выглядит как ломаная линия, образованная двумя перпендикулярными отрезками между точками A (0,0) и C (100,100), которые пересекаются в точке B(100,0).

Теперь я хотел бы нарисовать два перпендикулярных отрезка между точками A и C и поместить дугу четверти окружности вместо точки B, ориентированной таким образом, чтобыДва сегмента образуют непрерывную линию, а не «ломаную» (не на английском языке, надеюсь, вы поняли, что я имею в виду под «ломаной»).

Это самое лучшее решение, которое я придумал, но все еще не работает:

// attempt to draw a " curve " between 2 perpendicular segments > failed

<svg viewBox="0 0 200 200">
        <path 
              d="
                M 0,80
                H 80
                Q 100,100 100, 100
                V 200
                 "
              />
    </svg> 

Answer 1

Разные люди учатся по-разному, поэтому примите это как некоторые общие советы о том, как узнать, как работают команды пути:

• основным источником, очевидно, является спецификация
• Нарисуйте пути с помощью визуального редактора и проверьте полученный код. Inkscape имеет удобный встроенный редактор XML, который позволяет вам видеть отображаемый путь и его определение рядом.

В вашем примере я думаю, что основной проблемой было использованиекоманды H и V.Они являются сокращенными для команд L, где координаты x или y пропускаются и копируются из последней контрольной точки.Эти два пути эквивалентны:

M 0,80   L 90,80
M 0,80   H 90

, как и эти

M 100,90 L 100,200
M 100,90 V     200

А пока соедините два с прямым отрезком:

M 0,80   L 90,80   L 100,90   L 100,200

Теперь,Вы должны обменять прямую линию между (90,80) и (100,90) с кривой.Это может быть квадратичный Безье (вторая строка - сокращенная форма):

M 0,80   L 90,80   Q 100,80 100,90   L 100,200
M 0,80   H 90      Q 100,80 100,90   V 200

Кривая начинается в (90,80), средняя контрольная точка находится в (100,80), а конец - в (100,90).

Или вы можете использовать истинную дугу:

M 0,80   L 90,80   A 10 10 0 0 1 100,90   L 100,200
M 0,80   H 90      A 10 10 0 0 1 100,90   V 200

Начальная и конечная точки остаются неизменными.Остальная часть этой команды немного сложнее:

• первые два числа - горизонтальный и вертикальный радиус дуги
• третье число будет вращать эти две оси, 0 говорит, что нетвращение
• 0 на четвертом месте говорит, что дуга проходит менее чем на 180 градусов вокруг эллипса (1 означает> 180)
• 1 на пятом месте говорит, что дуга идет по часовой стрелке (1 будетпротив часовой стрелки)

Сложно?У spec есть хороший пример, чтобы объяснить это.

path {
    fill:none;
    stroke:black;
}

<svg viewBox="0 0 300 200">
    <path d="M   0,80   L  90,80   Q 100,80 100,90        L 100,200" />
    <path d="M 100,80   L 190,80   A 10 10 0 0 1 200,90   L 200,200" />
</svg>