Позиционирование элементов SVG - PullRequest
Новая
       7

Позиционирование элементов SVG

2 голосов
/ 29 апреля 2010

В процессе игры с SVG впервые (используя библиотеку Raphael ) я столкнулся с проблемой позиционирования динамических элементов на холсте таким образом, что они полностью содержится внутри холста. То, что я пытаюсь сделать, - это случайное расположение n слов / коротких фраз.

Поскольку текст является переменным, его позиция также должна быть переменной, поэтому я делаю следующее:

  1. Первоначально создание текста в точке 0,0 без непрозрачности.
  2. Проверка ширины нарисованного текстового элемента с помощью text.getBBox().width.
  3. Установка новой x координаты как Math.random() * (canvas_width - ( text_width/2 ) - pad).
  4. Изменение координаты x текста на вновь установленное значение (text.attr( 'x', x )).
  5. Установка атрибута непрозрачности текста на 1.

Я буду первым, кто признает, что моя математическая хватка ограничена, но это кажется довольно простым. Каким-то образом я все равно получаю текст, бегущий за правый край моего холста. Для простоты выше я удалил бит, который также устанавливает минимальное значение x, добавив его к результату Math.random(). Однако она есть, и я вижу ту же проблему на переднем крае холста.

Насколько я понимаю (как оно есть), биты Math.random() будут генерировать число от 0 до 1, которое затем можно умножить на некоторое число (в моем случае, ширина холста - половина ширины текста - некоторые произвольные отступы), чтобы получить внешнюю границу. Я делю ширину текста пополам, потому что его позиция на сетке установлена ​​в центре.

Надеюсь, я только что слишком долго на это смотрел, но моя математика , что , ржавая, или я что-то неправильно понимаю в поведении Math.random(), SVG, текста или чего-то еще капот этого решения?

1 Ответ

1 голос
/ 29 апреля 2010

Ответ оказался таким, как я думал об уравнении Math.random(). Это не так просто, как умножение на максимум и добавление минимального значения (конечно). Это действительно больше похоже на создание двойного широкого желоба на правом конце контейнера и затем смещение всей границы, чтобы съесть половину этого желоба: 

var x  = Math.random() * ( canvas_w - 20 - ( text.getBBox().width ) ) + ( text.getBBox().width/2 + 10 );

На английском ...

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

Например ...

Учитывая ширину холста 500, ширину текста 50 и желаемый «желоб» 10, я создаю случайное число между 0 и 430 (500 - 20 - 50). Добавляя обратно ширину, которую я должен учитывать - половину ширины текста (25) + отступ (10) - у меня остается случайное число от 35 до 465. Если мой текст находится на внешних границах этой границы, он может доходить только до 10 или 490.

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

...