我已经搜索了好几天,并尝试了很多方法来解决这个问题。
我想使用饼图作为进度饼。我创建了两个结构路径,用于绘制饼图并且它按预期工作。 现在我想在中心点旋转路径,但它不起作用。其实就是一个简单的旋转。主要问题是,旋转点取决于图表的比率。我有多个图表,如果我更改其中一个,所有其他图表也会更改。
我将两条路径合并为一个组,因此每个饼图都是包含两条路径的组。
这是我的两个饼图。 Selectable true 以查看选择的内容。
我希望可选的矩形在整个圆上均匀分布,以便旋转点正好位于中心。我不明白为什么可选区域总是饼图的较小部分。
有人可以帮我吗?
这就是我计算饼图的方法
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......它的 react 更符合预期。但它仍然不起作用:)
最佳答案
好的,我找到了解决方法。问题是,圆弧被忽略,可选择的区域位于绘制的两条线周围。因此,我创建了更多的饼图,以获得整个饼图和中心周围的可选区域,现在是中心
你可以在这里看到它
编辑:在遇到一些奇数 block 的问题后,我让它变得简单,在饼图后面画了一个矩形并使其不可见。矩形必须具有绝对位置。现在一切正常! :)
关于javascript - Fabric.js 旋转组合路径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23244917/