Замена цвета секторов в Колесе фортуны на JPG изображения
Всем привет! Наткнулся на просторах гугла на статью по созданию “колеса фортуны”. Собственно сама статья. Вроде сверстал и все работает, но ломаю голову как заменить в каждом секторе заливку цветом на изображение формата .jpg. Есть у кого опыт реализации такой идеи?
Для удобства перенёс код на codepen
Ответы (1 шт):
Ну вот же у вас есть функция, которая отвечает за рисование секторов и их цвета
// рисуем разноцветные секторы
const createConicGradient = () => {
// устанавливаем нужное значение стиля у элемента spinner
spinner.setAttribute(
"style",
`background: conic-gradient(
from -90deg,
${prizes
// получаем цвет текущего сектора
.map(({ color }, i) => `${color} 0 ${(100 / prizes.length) * (prizes.length - i)}%`)
.reverse()
}
);`
);
};
Но ее проблема в том, что она рисует все колесо в целом, а не сектора поотдельности. По этому можно вставить лишь одно общее изображние на колесо. Чтобы вставить изображение на каждый призовой отсек, это нужно менять подход к созданию этих секторов.
Другой вариант состоит в том, у вас есть элементы с классом prize, как раз на каждом секторе. Вы можете помграться с ними так, чтобы их форма совпадала с формой треугольника, которую видит пользователь, а затем просто добавить к каждому элементу свой соответствующий background. Суть в том, что текущая реализация совсем не рассчитана чтобы там были изображения вместо секторов, надо многое модифицировать или вообще полностью переписывать подход к рисованию колеса и призовых секторов.