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パスに沿ってのみ移動ドット

答えて

関連する問題