fabric.js 旋转组合路径答案

【问题标题】：fabric.js rotate a combined pathfabric.js 旋转组合路径
【发布时间】：2014-04-24 17:39:53
【问题描述】：

我已经搜索了好几天，并尝试了很多方法来解决这个问题。

我想用饼图作为进度饼。我创建了两个结构路径，用于绘制饼图并且它可以正常工作。现在我想在中心点旋转路径，但它不起作用。这实际上是一个简单的旋转。主要问题是，旋转点取决于图表的比率。我有多个图表，如果我更改一个，所有其他图表也会更改。

我将两条路径组合成一个组，因此每个饼图都是一个包含两条路径的组。

这是我的两个饼图。可选择 true 以查看选择的内容。

http://i.imgur.com/Q4NLsNf.png

http://i.imgur.com/N8AldM0.png

我希望可选择的 Rectangle 在整个圆上均匀分布，以便旋转点正好在中心。我不明白为什么可选择的区域总是饼图的较小部分。

谁能帮帮我？

这就是我计算饼图的方式

for(var i = 0; i < sectorAngleArr.length; i++)
{
    startAngle = endAngle;  
    endAngle = startAngle + sectorAngleArr[i];

    x1 = parseInt(left - (mainProgRad) * Math.sin(Math.PI*startAngle / 180)); 
    y1 = parseInt(top - (mainProgRad) * Math.cos(Math.PI*startAngle / 180)); 

    x2 = parseInt(left - (mainProgRad) * Math.sin(Math.PI * endAngle / 180));
    y2 = parseInt(top - (mainProgRad)  * Math.cos(Math.PI * endAngle / 180));

我就是这样画的

if(i == 0 && sectorAngleArr[0] <= 180)
    {
        pathString = "M " +  (left) + "," + (top) + " L " + (x1) + "," + (y1) + " A " + mainProgRad + "," + mainProgRad + " 0 0,0 " + (x2) + "," + (y2) + " z";     
        var path0 = new fabric.Path(pathString);

        path0.set(
        {
            fill:" rgba(80, 80, 220, 0.4)",
            stroke:"#0000cc",
            strokeWidth:"1",

        });
    }
    else if(i == 0 && sectorAngleArr[0] > 180)
    {   
        pathString = "M " +  (left) + "," + (top) + " L " + (x1) + "," + (y1) + " A " + mainProgRad + "," + mainProgRad + " 0 1,0 " + (x2) + "," + (y2) + " z";
        var path0 = new fabric.Path(pathString);

        path0.set(
        {
            fill:" rgba(80, 80, 220, 0.4)",
            stroke:"#0000cc",
            strokeWidth:"1",

            });

    }
    else if(i == 1 && sectorAngleArr[1] <= 180)
    {
        pathString = "M " +  (left) + "," + (top) + " L " + (x1) + "," + (y1) + " A " + mainProgRad + "," + mainProgRad + " 0 0,0 " + (x2) + "," + (y2) + " z";
        var path1 = new fabric.Path(pathString);

        path1.set(
        {

            fill:" rgba(220, 80, 80, 0.4)",
            stroke:"#cc00cc",
            strokeWidth:"1",
        });
    }
    else
    {
        pathString = "M " +  (left) + "," + (top) + " L " + (x1) + "," + (y1) + " A " + mainProgRad + "," + mainProgRad + " 0 1,0 " + (x2) + "," + (y2) + " z";
        var path1 = new fabric.Path(pathString);

        path1.set(
        {
            fill:" rgba(220, 80, 80, 0.4)",
            stroke:"#cc00cc",
            strokeWidth:"1",
        });
    }
}   

var progressGroup = new fabric.Group([path0, path1],
        {
            left: left,
            top: top,
            originX: "center",
            originY: "center",
            scaleX: -1,
            selectable:true
        });
        all.add(progressGroup);

希望你能帮帮我！

编辑：向前迈出的一大步是使用fabric.Pathgroup 而不是fabric.Group...它的反应更符合预期。但它仍然无法正常工作:)

【问题讨论】：

标签： javascript charts rotation

【解决方案1】：

好的，我找到了解决方法。问题是，弧线被忽略了，可选区域在绘制的两条线周围。所以我创建了更多的饼图来获得围绕 wohle 饼图和中心的可选区域，现在是中心

你可以在这里看到它

http://i.imgur.com/nT7Es3O.png

编辑：在遇到奇数数量的问题后，我让它变得简单，并在饼图后面画了一个矩形并使其不可见。矩形必须具有绝对位置。现在一切正常！ :)

【讨论】：