Более конкретная форма в Рафаэле (как ромб)

Question

Есть ли какой-нибудь простой способ создать фигуру, похожую на ромб, в Raphael ? Я полагаю, что нет такой команды, как:

var paper = new Raphael(document.getElementById('canvas_container'), 600, 600);
var rhombus = paper.rhombus(...);

Может быть, есть более простой способ, чем рисование контура. Есть идеи?

Answer 1

Нет ничего похожего на paper.rhombus в Рафаэле.Но вы можете расширить Рафаэль, чтобы получить метод ромба, как вы и просили.

Я создал маленькую скрипку для рисования ромба, так же, как вы хотели бы.

пример кода из скрипки.

    r.rhombus({
        cx:300,
        cy:300,
        side:15
    });

    // a rhombus rotated around its center.
    r.rhombus({
        cx:600,
        cy:300,
        side:15,
        angle:45
    }).attr({
        'stroke-width' :2
    })

Объяснение переменной:

cx - center x position
cy - center y position,
side - length of side of the rhombus.
angle - the angle through which the rhombus will be around its center (cx,cy)

многое узнало о ромбе: -)

Answer 2

Мне было неудобно использовать угол, потому что он также поворачивает систему координат для этого объекта. Например, при переводе позже вправо он будет перемещаться по диагонали на юго-восток. Я использовал путь для ромба, код был довольно коротким:

this.rhombus = this.paper.path("M 100 100 l30 -30 l30 30 l-30 30 l-30 -30");

M: переместить «перо» в эти координаты l: нарисуйте линию к точке, относящейся к этой точке, поэтому 30 вправо и 30 вверх и т. д.