Как нарисовать дугу в пути SVG на основе движения мыши? - PullRequest
Новая
       19

Как нарисовать дугу в пути SVG на основе движения мыши?

0 голосов
/ 03 апреля 2019

Как получить координаты начала пути SVG при рисовании дуги с помощью SVG с помощью движения мыши

Я создал дугу в SVG с помощью <path>.Но мне нужно рисовать и дуги с помощью движения мыши.Для этого я рассчитал угол с помощью следующего кода 

<svg viewBox="-100 -100 500 500" xmlns="http://www.w3.org/2000/svg" id="svg1" class="svgStyle" style="position: absolute;">
              <path id="arc1" />
              <defs>
                <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
                  <stop offset="0%" stop-color="#0099ee"/>
                  <stop offset="100%" stop-color="#dc3545"/>
                </linearGradient>
              </defs> 
            </svg>   

var deltaX = e.changedTouches[0]['clientX'] - 480;var deltaY = e.changedTouches[0]['clientY'] - 320;var rad = Math.atan2(deltaY, deltaX);var deg = (rad * 180) / Math.PI;

Но это не работает должным образом.Я хотел, чтобы штрих дуги был заполнен движениями мыши.Если я переместлю мышь вправо, поместив мышь на обводку, то обводка должна быть заполнена. Если переместить мышь влево enter code here, то обводка должна быть незаполненной.

...