jQuery路径 - 循环路径

Question

我试图获得一个用4点创建的圆形路径。一个人在90deg。所以当我点击下一个按钮时，它最终会以完美的圆圈旋转。

我觉得我很接近，但我似乎无法指出它。

这是我的代码：

$(document).ready(init);

function init() {
var screenWidth = $(window).width();

$.fn.scrollPath("getPath")
    .arc(10, 10, 900, Math.PI/2, 0, true, {rotate: Math.PI/2 })
    .arc(0, 10, 0, Math.PI/2, 0, true, {rotate: Math.PI/2 })
$(".wrapper").scrollPath({drawPath: true}); // , wrapAround: true
}

FIDDLE：http://jsfiddle.net/7e9Wm/

谁能看到我做错了什么？

Answer 1

您正在包含演示javascript文件，删除它将允许您实际开始构建路径。

要设置滚动路径，您需要了解HTML5 Arc的工作原理。

圆弧只不过是假想圆周长的一部分。该虚圆可以由x，y和半径定义。起点和终点角度是PI的倍数，如图所示。

因此，您的代码应该类似于

$.fn.scrollPath("getPath")
// arc( centerX, centerY, radius, startAngle, endAngle, counterclockwise [,options] )
.arc(0, 0, 180, Math.PI * 1.5, Math.PI , true, {rotate: Math.PI/2, name: "alpha"})
.arc(0, 0, 180, Math.PI, Math.PI/2, true, {rotate: Math.PI/2, name: "beta" })
.arc(0, 0, 180, Math.PI/2, 0, true, {rotate: Math.PI/2, name: "delta" })
.arc(0, 0, 180, 0, Math.PI * 1.5, true, {rotate: Math.PI/2, name: "gamma" });

请参阅小提琴 - http://jsfiddle.net/rhuc3/