Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Объект из точек (https://javascript.ru/forum/misc/71689-obekt-iz-tochek.html)

Bicou 05.12.2017 17:25
Объект из точек
 
Я только начинаю разбираться в JS, поэтому банальная история стала для меня проблемой. Но хочу разобраться по возможности сама.
Итак, задача.
Есть некая картинка (например буква, цифра или произвольная с неровными краями) и мне бы хотелось заполнить ее с помощью скрипта цветными точками.
Вот как на картинке "S"


Понимаю, что надо создать эту точку, которая будет "ставится" и задать ей возможности изменения (допустим цвет в массиве)
Но вот как определить область, где точка может появляться (допустим букв несколько в одной картинке) не знаю.
Подскажите как решить такую задачу.

laimas 05.12.2017 18:10
Так понятно будет https://cdn1.savepice.ru/uploads/201...14378-full.gif ?

Bicou 05.12.2017 22:44
laimas,
то ли у меня гиф не воспроизводится, то ли не понятно. Буквы просто белые на черном фоне. Или может быть я бестолково объяснила.
Мне нужно, чтобы внутри буквы с помощью скрипта появлялись другие фигуры (например, точки) но строго в контуре буквы. Как кляксы в S на картинке


Я могу понять, как отрисовать нужную область с помощью Canvas Но как задать ее для области применения скрипта не понимаю.

void() 05.12.2017 23:23 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Шутка :)</title>
</head>
<body>
	<div ><img src="http://i.piccy.info/i9/57282bf6f05c9c52c009ad5cc31593d7/1512505065/23584/1198225/1.jpg" class="img wheel"> <img class="img s" src="http://i.piccy.info/i9/4a0a5cd907e989d8df088e55836b8549/1512505097/21131/1198225/s.png" alt=""></div>

	<style>
	div{
		width: 100px;
		height: 100px;
		position: relative;
		overflow: hidden;
	}
	img{
		width: 100px;
		position: absolute;
	}
	.s{
		z-index: 999;
	}
	.wheel {
		animation-name: spin;
		animation-duration: 30000ms;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
		z-index: 100;
	}
	@keyframes spin {
		from {
			transform:rotate(0deg);
		}
		to {
			transform:rotate(360deg);
		}
	}
</style>
</body>
</html>

:)

laimas 05.12.2017 23:29
Цитата:
Сообщение от Bicou
то ли у меня гиф не воспроизводится
Это не анимация. Вам же надо определить области, а делается это так:

- изображение переводится в градации серого
- добавляется яркость и контрастность таким образом, чтобы "вырезать" детали на изображении (например полос на w, t и точек на s теперь а нем нет)
- в цветовой модели HSB задается некий порог черного с которым сверяется (в этой же цветовой модели) считанные значения пикселей изображения и если они превышают порог, то это область в которой рисуем

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

Bicou 06.12.2017 00:02
Вложений: 1
void(), спасибо, про маски не додумалась, но не совсем то. Хотя попытаться можно)

laimas, меня скорее интересовало можно ли (и если можно, то как) определить некую область (ну допустим отрисовать фигуру через canvas (Это то, что я как-то освоила, отсюда предположение) и скриптом оперировать с получившейся областью. Добавлять в нее объекты, чтобы они не заходили за край области
Т.е. чисто технически нужно будет пройтись по фигуре с шагом в несколько пикселей и сравнить есть ли в данных координатах фигура. Если есть, то туда ставить объект, если нет, то объект не ставить. Вот только не могу понять как эту область задать.
Или как вариант, выставлять объекты по некой ломаной линии. Использовать ее как траекторию (не в смысле движения по ней, а как ниточку для бус)

рони 06.12.2017 00:10
Bicou,
https://developer.mozilla.org/ru/doc...Context2D/clip

https://developer.mozilla.org/en-US/...ositeOperation

Bicou 06.12.2017 00:40
рони,
т.е. с помощью .clip (FillRule); можно проверить принадлежит ли точка области и если да, то поставить свой объект? Я правильно понимаю?

laimas 06.12.2017 00:40
Bicou,
я думал есть некое фото, на котором нужно найти области.

Bicou 06.12.2017 00:48
Цитата:
Сообщение от laimas (Сообщение 472175)
Bicou,
я думал есть некое фото, на котором нужно найти области.
В общем и целом да. Но области должны быть прозрачными) Т.е. вот в исходнике с буквами: допустим что буквы должны состоять из набора "клякс", а фон вокруг них оставаться прежним (и допустим, что он какой-то цветной) и таких мест на страничке несколько)

Я чуть выше вставила картинку с пояснением, чего хочу от скрипта)


Часовой пояс GMT +3, время: 07:53.
Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице