3

У меня есть 4 координаты (2 для обозначения начала и конца прямой, 2 для того, чтобы показать на сколько она закругляется).

Она рисуется вот так (в SVG):

<path class="arrays" d="M'+start_x+','+start_y+' C600,400 530,356 '+end_x+','+end_y+'"  />

Берем start_x, start_y, end_x, end_y - любые. По этим координатам мы можем построить прямую, но мне нужно как-то высчитать, как необходимо расположить 2 средние координаты (точки): 600,400 и 530,356, чтобы фигура имела нужное мне закругление, т.е. на 30 или 45 градусов с каждого конца. + точки должны перемещаться в зависимости от того, где находятся координаты начала и конца.

Кто подскажет как сделать? Есть какие-нибудь формулы?

2
  • 2
    Вы не могли бы уточнить, что означает "закругление прямой"? Прямая — она, знаете ли, прямая.
    – VladD
    Commented 7 апр. 2013 в 14:37
  • Думаю, что автор, все-таки, имеет ввиду не прямую, а кривую и играется с какими-то углами. Но определение "закругленности", все-таки, стоило бы дать
    – Stas0n
    Commented 7 апр. 2013 в 15:17

2 ответа 2

2

Во-первых, всё-таки, задача не о прямой, а о кривой.
Во-вторых, если я правильно понимаю, то закругленность — это угол между прямой, соединяющей точки концов и касательной в одном из концов.
Если так, то всё просто:
Т.к. у тебя с обоих концов должен быть один и тот же угол, то ты просто получаешь равнобедренный треугольник, с известными координатами точек основания и заданными углами. Найти тебе нужно 3-ю вершину — задача не очень сложная)

2

По образцу кода в вопросе,- это Кубическая кривая Безье.

введите сюда описание изображения

Более подробно здесь

Изменяя координаты контрольных точек x1,y1 и x2,x3 можно получить любую форму кривой Безье.

Можно это делать вручную, но удобней воспользоваться онлайн генератором кривых:

введите сюда описание изображения

В онлайн редакторе кривых двигаем контрольные точки и/или начальные, финальные точки для получения нужной формы кривой и копируем код:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
   
     width="370" height="460" viewBox="0 0 370 460" >  
	 
<path
    fill="dodgerblue"
    stroke="black"
    stroke-width="3"
    d="M101,154 C98,26 281,26 290,154 " />
</svg>

Анимация кривой

С сохранением позиции начальной и конечной точек кривой - mx,my и x,y, изменяем только координаты контрольных точек

  1. <path d="M101,154 C98,26 281,26 290,154 ">
  2. <path d="M101,154 C98,280 281,280 290,154">

Анимируем параметр "d" патча

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
   
     width="370" height="460" viewBox="0 0 370 460" >  
	 
	 <path
     fill="dodgerblue"
     stroke="black"
     stroke-width="3"
     d="M101,154 C98,26 281,26 290,154 " >
	 
	 <animate
      attributeName="d"
      values="M101,154 C98,26 281,26 290,154;M101,154 C98,280 281,280 290,154;M101,154 C98,26 281,26 290,154"
      dur="4s"
      fill="freeze"
      repeatCount="indefinite" />
	 </path>
</svg>

Изменяем позиции начальной и конечной точек кривой - mx,my и x,y

  1. <path d="M101,154 C98,26 281,26 290,154 " />
  2. <path d="M51,154 C98,26 281,26 341,154 " />

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
   
     width="370" height="460" viewBox="0 0 370 460" >  
	 
	 <path
     fill="dodgerblue"
     stroke="black"
     stroke-width="3"
     d="M101,154 C98,26 281,26 290,154 " >
	 
	 <animate
     attributeName="d"
     values="M101,154 C98,26 281,26 290,154;M51,154 C98,26 281,26 341,154;M101,154 C98,26 281,26 290,154"
     dur="4s"
     fill="freeze"
     repeatCount="indefinite" />
	 </path>
	 
	 
	 
	 
</svg>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.