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
    7 апр 2013 в 14:37
  • Думаю, что автор, все-таки, имеет ввиду не прямую, а кривую и играется с какими-то углами. Но определение "закругленности", все-таки, стоило бы дать
    – Stas0n
    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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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