Question

我想在Raphael中将任意形状变形为圆形，我不想过度失真，因此我在计算原始路径中的节点并创建具有相同节点数的新路径。

到目前为止，我已经能够将新路径安排到具有相同节点数的多边形中，但是当我想调整立方贝塞尔点以完成圆时，我的数学失败了。我知道我应该计算切线，但我不知道该怎么办。这是我的代码：

var path, paper, circle, radius;
radius = 150;
paper = Raphael("canvas", radius*4, radius*4);
path = drawCircle(6) //can be any number

function drawCircle(nodes){
    newPath = [];
    for(x=0; x<nodes; x++) {
       deg = (x/nodes)*360;
        if(x==0) {
           newPath.push("M " + Math.sin(deg*Math.PI/180)*radius + " " + Math.cos(deg*Math.PI/180)*radius);
        }
        else {
       newPath.push(
               "C " + Math.sin(deg*Math.PI/180)*radius
               + " " + Math.cos(deg*Math.PI/180)*radius
               + " " + Math.sin(deg*Math.PI/180)*radius
               + " " + Math.cos(deg*Math.PI/180)*radius
               + " " + Math.sin(deg*Math.PI/180)*radius
               + " " + Math.cos(deg*Math.PI/180)*radius
               )
           }
    }
    newPath.push("Z")
    console.log(newPath)
    paper.path(newPath).attr({"fill": "#000"}).translate(200, 200)
}

这是一个尝试它的jsfiddle： http://jsfiddle.net/zeYtT/

Answer 1

这是更正后的代码。请注意，您可以在SVG中使用arc path命令而不是curve命令。另请注意，下面的代码将第一个节点和最后一个节点视为相等，从而使其具有生成一个额外节点的外观。这假设所有的任意形状都是闭合的，也就是说，它们的第一个节点和最后一个节点是相等的，这不能简单地通过“关闭路径”命令（Z）来保证。

var path, paper, circle, radius;
radius = 150;
paper = Raphael("canvas", radius * 4, radius * 4);
path = drawCircle(8) //can be any number

function drawCircle(nodes) {
    var newPath = []
    for (var i = 0; i <= nodes; i++) {
        var deg = (i*1.0 / nodes) * 360;
        var x = Math.cos(deg * Math.PI / 180) * radius
        var y = Math.sin(deg * Math.PI / 180) * radius
        if (newPath == 0) newPath.push("M " + x + " " + y)
        else newPath.push("A " + (radius) + "," + (radius) + ",0,0,1," + x + "," + y)
    }
    newPath.push("Z")
    console.log(newPath)
    paper.path(newPath).attr({
        "fill": "#000"
    }).translate(200, 200)
}

Answer 2

'正确'的方法是使用cos表示x，y表示sin。我比较字母的实际形状（cos - ＆gt; o - ＆gt; x和sin - ＆gt; i - ＆gt; y）来记住它：）

如何在Raphael中将多边形转换为圆形？

2 个答案: