Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.10.2018, 11:08
Новичок на форуме
Отправить личное сообщение для Kirill-Titov Посмотреть профиль Найти все сообщения от Kirill-Titov
 
Регистрация: 26.10.2018
Сообщений: 2

Как реализовать нестандартный roadmap?
Добрый день!
Дизайнер нарисовал roadmap с целью последующей интеграции в тему wordpress.



Каждый пункт roadmapa должен будет редактироваться из админки.
Подскажите, пожалуйста, каким образом можно реализовать такую задачу?
Пробовал размечать области на картинке, но не могу к размеченным координатам привязать div с описанием пункта
Ответить с цитированием
  #2 (permalink)  
Старый 26.10.2018, 11:25
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,706

Я бы картинку на фон поставил, поверх который реализовал обычный список.
Каждый элемент смещался бы от центра на определенное кол-во пикселей по горизонтали.
Главное сделать так, чтобы фон не масштабировался и маркеры (кружочки) всегда оставались на одной позиции вне зависимости от размеров блока описания.

upd. можно еще вот это вот все попробовать отрисовать на холсте (canvas), правда отрисовать линию, на которой должны располагаться элементы, скорее всего, будет не просто.


Секс вам на сегодня обеспечен )

Последний раз редактировалось Nexus, 26.10.2018 в 11:32.
Ответить с цитированием
  #3 (permalink)  
Старый 26.10.2018, 13:53
Новичок на форуме
Отправить личное сообщение для Kirill-Titov Посмотреть профиль Найти все сообщения от Kirill-Titov
 
Регистрация: 26.10.2018
Сообщений: 2

спасибо, наверное, так и сделаю
Ответить с цитированием
  #4 (permalink)  
Старый 26.10.2018, 17:19
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

<canvas id="canvas" width="900" height="300" style="background-color:black";></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var  rgb = 0;
for(var i = 0; i < 100; i++) {
   if(i < 10) rgb = rgb + 25.5;
   if(i > 89) rgb = rgb - 25.5; 
   ctx.strokeStyle = "rgb(" + rgb + ","+ rgb + "," + rgb + ")";
   ctx.beginPath();
   ctx.arc(1500, 150, 1100, (0.96 + (i * 0.0008))* Math.PI, (0.96 + ((i + 1) * 0.0008)) * Math.PI, false);
   ctx.stroke();
}
</script>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Боковая навигация для LandingPage как реализовать? Black_Star jQuery 4 21.02.2017 21:37
Как реализовать проверку текстового поля? Валерий1996 Общие вопросы Javascript 3 26.08.2015 13:27
Как реализовать динамичное добавление тегов modelfak23 jQuery 1 19.06.2015 14:27
Как правильно реализовать такой функционал? Julian Общие вопросы Javascript 3 16.01.2015 12:34
как реализовать связные списки? br1an jQuery 0 27.06.2013 06:11