Circular layout для тегов на html - CodeHelper

Circular layout для тегов на html

3

Как средствами html реализовать круговое расположение тегов в облаке (circular layout)?

Пример:

Круговое расположение тегов в облаке

Рисунок взят из документа Comparison of Tag Cloud Layouts: Task-Related Performance and Visual Exploration

Популярные ответы


2

Сделать такое на чистом Html довольно-таки сложно. Как вариант можно генерировать на сервере картинку и отображать ее на странице. Кликабельность можно сделать с помощью тегов MAP/AREA. Вот пример кода на Java:

public class Manager {
public static void layout(Rectangle[][] data, Point center) {
	for (int layer = 0; layer < data.length; layer++) {
		Rectangle[] layerData = data[layer];

		for (int i = 0; i < layerData.length; i++) {
			int radius = 50 + layer * 20;
			while (true) {
				float degAngle = 360.f / layerData.length * (i + 1);
				double angle = Math.PI / 180.0 * degAngle;

				int x = (int) Math.round(Math.cos(angle) * radius
						+ center.x);
				int y = (int) Math.round(Math.sin(angle) * radius
						+ center.y);

				layerData[i].x = (int) (x - layerData[i].getWidth() / 2);
				layerData[i].y = (int) (y - layerData[i].getHeight() / 2);

				if (hasIntersection(layer, i, layerData[i], data)) {
					radius += 1;
				} else {
					break;
				}
			}
		}
	}
}

private static boolean hasIntersection(final int layer0, final int i0,
		final Rectangle rectangle, final Rectangle[][] data) {
	for (int layer = 0; layer <= layer0; layer++) {
		for (int i = 0; i < data[layer].length; i++) {
			if (layer == layer0 && i >= i0) {
				return false;
			}
			if (rectangle.intersects(data[layer][i])) {
				return true;
			}
		}
	}
	return false;
}

}

И результат:

http://imageshost.ru/links/4eab8fd74869614dc9a02b4d69d82f3b

0

Используя position: absolute указать свойства left и top расположим таким образом по кругу(считая угол отклонения от количества тегов с одинаковой популярностью).

Позже попробую написать javascript для такого случая


v1.7.123.556
© 2009—2010 CodeHelper FAQ | О сайте | Обратная связь | История изменений | Статьи
Creative Commons LicenseМатериалы сайта распространяются под лицензией Creative Commons Attribution-Share Alike 3.0 Unported.