Форум

Bicou · #1 (**permalink**) 05.12.2017, 17:25

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

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

laimas · #2 (**permalink**) 05.12.2017, 18:10

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

Bicou · #3 (**permalink**) 05.12.2017, 22:44

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

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

void() · #4 (**permalink**) 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 · #5 (**permalink**) 05.12.2017, 23:29

Сообщение от Bicou

то ли у меня гиф не воспроизводится

Это не анимация. Вам же надо определить области, а делается это так:

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

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

Bicou · #6 (**permalink**) 06.12.2017, 00:02

void(), спасибо, про маски не додумалась, но не совсем то. Хотя попытаться можно)

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

рони · #7 (**permalink**) 06.12.2017, 00:10

Bicou,
https://developer.mozilla.org/ru/doc...Context2D/clip

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

Bicou · #8 (**permalink**) 06.12.2017, 00:40

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

laimas · #9 (**permalink**) 06.12.2017, 00:40

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

Bicou · #10 (**permalink**) 06.12.2017, 00:48

Сообщение от laimas

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

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

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

Форум

Справочник

Discord чат

Курсы javascript