SVG滑块-移动点只沿着SVG路径
SVG Slider - Move dot only along SVG path
我已经创建了一个圆形SVG滑块,但我仍然有正确定位点的问题。看看Codepen上的当前结果:
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 您可以开始拖动圆点并从左向右移动鼠标。这很好,但我需要更直接地设置点位置点位置等于鼠标位置,但只能沿着路径。我需要做什么改变才能得到这样的结果?
提前感谢!
下面的例子显示了一个水平条路径。条的路径长度和sliderPath比率的路径长度用于沿着sliderPath移动点。
这个例子有点奇怪,因为我移动了svg,所以它是完全可见的,但你应该知道它是如何工作的。
<!DOCTYPE HTML>
<html>
<head>
<title>Slider@Semi 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>
相关文章:
- 使用onclick绘制SVG路径
- Canvas+svg路径动画,在路径中的特定点暂停一段时间,然后继续
- 如何设置SVG路径的样式以拍摄图像
- Html5-使用SVG路径绘制的组织层次结构在左手边被剪裁
- SVG路径命中测试
- 更快的SVG路径操作
- 以编程方式确定由 SVG 路径生成的形状
- 将 SVG 路径雕刻成矩形,在矩形中留下一个“孔”
- 使用正则表达式提取 svg 路径
- 如何在 JavaScript 中计算 SVG 路径的椭圆路径坐标
- SVG 路径未显示
- svg路径动画整个路径
- 使用Javascript获取SVG路径的绝对坐标
- 画布的SVG路径
- 如何在HTML中创建一个信息框,显示与悬停SVG路径相关的信息
- 尝试使用javascript更改多个svg路径
- 悬停在表行上填充svg路径
- 自定义Javascript Alert Popup onclick svg路径
- 使用RaphaelJS和GSAP制作SVG路径动画
- 单击事件在svg路径上不起作用