Как средствами PHP нарисовать дугу для SVG файла?

Question

[Zorgios]

Для отрисовки простых объектов из линий и окружностей/эллипсов, использую библиотеку php-svg

Сейчас столкнулся с проблемой отрисовки дуги (части окружности).
Например, требуется нарисовать половину окружности, или четверть (зная радиус окружности).
Сейчас для отрисовки линий c помощью библиотеки использую такой код:

$image = new SVG(10mm','10mm');
$doc = $image->getDocument();
$square = new SVGLine('0mm', '0mm', '5mm', '5mm'); // x0 y0 x1 y1
$square->setStyle('stroke', '#FF0000'); //цвет
$doc->addChild($square);
header('Content-Type: image/svg+xml');
echo $image;

Что можно придумать с половинами окружностей? Как можно обрезать окружности до определенной дуги?
Не обязательно средствами библиотеки. Можно и классическим PHP

Answer 1

[Vamp]

Проще всего нарисовать дугу через элемент path.

$image = new SVG('100mm','100mm');
$doc = $image->getDocument();
$square = new SVGLine('0mm', '0mm', '55mm', '55mm'); // x0 y0 x1 y1
$square->setStyle('stroke', '#FF0000'); //цвет
$doc->addChild($square);

$arc = new SVGPath('m 40,40 A 30,30,0,0,1,150,150');
$arc->setStyle('stroke', '#FF0000');
$doc->addChild($arc);

header('Content-Type: image/svg+xml');
echo $image;

Нужно немного изучить формат path. Он не сложный.

m 40,40 A 30,30,0,0,1,150,150

m - это команда move. Устанавливает "кисть" в указанную позицию. Далее команда A - arc (дуга). Её формат несколько сложнее:

30,30 - радиус дуги по осям x и y
0 - угол поворота дуги вокруг оси x
0 - должна ли дуга быть больше 180 градусов или нет
1 - в какую сторону рисовать дугу - по часовой или против
150,150 - координаты конца дуги

Comments

[Zorgios]

Тут возникает вопрос.
А как быть, если значения - в миллиметрах.
Вроде нет конкретный формулы перевода миллиметры в пиксели (что логично)
А PATH отказывается есть значения в миллиметрах

[Vamp]

Zorgios, согласно спецификации path:

All coordinates and lengths specified within path data must be treated as being in user units in the current user coordinate system.

Туториал мозиллы описывает данный момент менее формально:

Coordinates in the d parameter are always unitless and hence in the user coordinate system.

Чтобы переопределить дефолтную "user coordinate system", нужно в элементе <svg> прописать атрибут viewBox:

$image = new SVG('10mm','10mm');
$image->getDocument()->setAttribute('viewBox', '0 0 10 10');

В данном примере ширина и высота viewBox устанавливается в 10 user unit'ов. Так как width и height элемента <svg> - 10mm, то один user unit получается соответствует 1mm. Из-за этого все размеры в path можно тоже условно считать миллиметрами.

Другой пример:

$image = new SVG('10mm','10mm');
$image->getDocument()->setAttribute('viewBox', '0 0 100 100');

В этом примере каждый user unit соответствует 0.1мм.

Рекомендую вам рисовать все элементы в этих условных абстрактных user unit'ах. Так проще понимать и согласовывать относительные размеры и положение элементов. А миллиметры оставить только в <svg>.

Answer 2

[Adamos]

SVG - весьма простой текстовый формат. Библиотеки для него в случае, когда надо нарисовать что-то нетривиальное, только мешают. Почитайте документацию по формату - и там найдете все, что вам нужно.
Разве что иногда придется приложить немного математики.

Comments

[Zorgios]

Спасибо. Попробую перенести на пхп.