jquery - 使用 HTML5、CSS3 和 jQuery 创建三 Angular 形 slider

Question

我正在尝试构建一个类似于此的三 Angular 形 slider :

我可以弄清楚如何制作三 Angular 形，但是拖动节点、将其位置限制在三 Angular 形内以及根据节点坐标确定值等功能现在超出了我的范围。

如果有这样的插件，请告诉我，否则将不胜感激。

Answer 1

要拖动节点，您可以使用 Jquery.UI draggable ，如果点在三 Angular 形边界之外，则拖动事件返回 false(算法请参见:http://www.blackpawn.com/texts/pointinpoly/)。您必须确定三 Angular 形顶点的坐标 (http://jsfiddle.net/dLzWr/)。

//get the triangle top point
function getTopPoint(t){
    var pos = t.offset();
    //we must add the borders to the offset
    var leftBorder = parseInt(t.css("border-left-width"),10);
    var topBorder = parseInt(t.css("border-top-width"),10);
    pos.left += leftBorder;
    pos.top += topBorder;
    return pos;
}

//get the triangle bottom left point
function bottomLeftPoint(t){
    var top = getTopPoint(t);
    top.top += parseInt(t.css("border-bottom-width"),10);
    top.left -= parseInt(t.css("border-left-width"),10);
    return top;
}

//get the triangle bottom right point
function bottomRightPoint(t){
    var top = getTopPoint(t);
    top.top += parseInt(t.css("border-bottom-width"),10);
    top.left += parseInt(t.css("border-right-width"),10);
    return top;
}

如果你看一下 fiddle 。您可以在绘制事件中确定每个顶点与当前点之间的距离，并使用它来确定值。