SVG 슬라이더 - SVG 경로를 따라 점 이동

원형 SVG 슬라이더를 만들었지 만 올바르게 점을 배치하는 데는 여전히 문제가 있습니다.SVG 슬라이더 - SVG 경로를 따라 점 이동

HTML :

<svg version="1.1" id="slider" width="300px" height="150px"> 
     <path id="sliderPath" stroke="red" stroke-width="5" d="M10,100a147,147,0,1,1,280,1"/> 
     <circle id="dot" fill="white" cx="10" cy="100" r="14" /> 
    </svg>

JS :

var sliderPath = document.getElementById("sliderPath"), 
box = sliderPath.getBBox(), 
dot = document.getElementById("dot"), 
W = box.width, 
pathLength = sliderPath.getTotalLength(); 

Draggable.create(
    document.createElement('div'), 
     { 
     type:'x', 
     throwProps:true, 
     bounds: { minX:0, maxX:W }, 
     trigger:dot, 
     overshootTolerance:0, 
     onDrag:update, 
     onThrowUpdate:update 
}); 

function update(){ 
    // Get x and y for dot. 
    var P = sliderPath.getPointAtLength(this.x/W * pathLength); 
    // Set dot. 
    TweenLite.set(dot,{attr:{cx:P.x,cy:P.y}}); 
};

http://codepen.io/Yheeky/pen/xEbAbR

당신은 점을 드래그 시작하고 왼쪽에서 마우스를 이동할 수 있습니다 는 Codepen의 현재 결과에서보세요 오른쪽으로. 잘 작동하지만 도트 위치가 마우스 위치와 동일하지만 경로를 따라 더 가며 점 위치를보다 직접 설정해야합니다. 이런 종류의 결과를 얻으려면 무엇을 변경해야합니까?

미리 감사드립니다.

출처

2016-09-05 Yheeky

아래 예제는 가로 막대 경로를 보여줍니다. bar의 패스 길이와 sliderPath의 패스 길이는 sliderPath를 따라 점을 이동 시키는데 사용됩니다.

예를 들어 SVG를 완전히 옮겼 기 때문에 약간 펑키하지만 예제가 어떻게 작동하는지 알아야합니다.

<!DOCTYPE HTML> 
 
<html> 
 
<head> 
 
    <title>[email protected] Circle</title> 
 
</head> 
 
<body> 
 
<div style='position:absolute;top:200px;left:200px;'> 
 
<svg overflow=visible version="1.1" id="slider" width="300px" height="150px"> 
 
<path onmousedown=moveDotStart(evt) onmousemove=moveDot(evt) onmouseup=moveDotEnd(evt) onmouseout=moveDotEnd(evt) id="slideBar" stroke=lime opacity=.3 stroke-width=30 d="M10,100 L290,100" /> 
 
<path id="sliderPath" stroke="red" fill="none" stroke-width="5" d="M10,100a147,147,0,1,1,280,1"/> 
 
<circle pointer-events="none" id="dot" fill="blue" cx="10" cy="100" r="14" /> 
 
</svg> 
 
</div> 
 

 
<script> 
 
var MoveDot=false 
 
function moveDotStart(evt) 
 
{ 
 
    MoveDot=true 
 
} 
 
function moveDot(evt) 
 
{ 
 
    if(MoveDot==true) 
 
    { 
 
     var pathLength=sliderPath.getTotalLength() 
 
     var barLength=slideBar.getTotalLength() 
 
     var xCursor=evt.clientX-10-200 
 
     var moveRatio=xCursor/barLength 
 
     var dotPathLength=moveRatio*pathLength 
 
     var dotPnt=sliderPath.getPointAtLength(dotPathLength) 
 
     dot.setAttribute("cx",dotPnt.x) 
 
     dot.setAttribute("cy",dotPnt.y) 
 
    } 
 

 
} 
 

 
function moveDotEnd(evt) 
 
{ 
 
    MoveDot=false 
 
} 
 
</script> 
 
</body> 
 
</html>

출처

2016-09-05 20:58:46

SVG 슬라이더 - SVG 경로를 따라 점 이동

답변

관련 문제