Как мне преобразовать многоугольник в круг в Рафаэле? - PullRequest
Новая
       1

Как мне преобразовать многоугольник в круг в Рафаэле?

0 голосов
/ 21 октября 2011

Я хочу превратить произвольную форму в круг в Рафаэле, и я не хочу чрезмерных искажений, поэтому я считаю узлы в исходном пути и создаю новый путь с тем же числом узлов.

До сих пор я был в состоянии организовать новый путь в многоугольник с тем же количеством узлов, но моя математика не удалась, когда я хочу отрегулировать кубические точки Безье для создания круга. Я знаю, что должен вычислить касательную, но я не уверен, что делать дальше. Вот мой код: 

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/

Ответы [ 2 ]

2 голосов
/ 21 октября 2011

Вот исправленный код. Обратите внимание, что вы можете использовать команду arc path вместо кривой в SVG. Также обратите внимание, что приведенный ниже код обрабатывает первый узел и последний узел как равные, создавая впечатление, что он генерирует один дополнительный узел. Это предполагает, что все ваши произвольные фигуры закрыты, то есть их первый узел и последний узел равны, что не может быть гарантировано просто командой «закрыть путь» (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)
}
1 голос
/ 18 апреля 2013

«правильный» способ - использовать cos для x, а y для греха. я сравниваю фактические формы букв (cos -> o -> x и sin -> i -> y), чтобы запомнить это:)

...