Просмотр полной версии : Объект из точек
Я только начинаю разбираться в JS, поэтому банальная история стала для меня проблемой. Но хочу разобраться по возможности сама.
Итак, задача.
Есть некая картинка (например буква, цифра или произвольная с неровными краями) и мне бы хотелось заполнить ее с помощью скрипта цветными точками.
Вот как на картинке "S"
http://fscomps.fotosearch.com/compc/CSP/CSP994/k16345072.jpg
Понимаю, что надо создать эту точку, которая будет "ставится" и задать ей возможности изменения (допустим цвет в массиве)
Но вот как определить область, где точка может появляться (допустим букв несколько в одной картинке) не знаю.
Подскажите как решить такую задачу.
Так понятно будет https://cdn1.savepice.ru/uploads/2017/12/5/7202da0d2469bacf0c95b1829e114378-full.gif ?
laimas,
то ли у меня гиф не воспроизводится, то ли не понятно. Буквы просто белые на черном фоне. Или может быть я бестолково объяснила.
Мне нужно, чтобы внутри буквы с помощью скрипта появлялись другие фигуры (например, точки) но строго в контуре буквы. Как кляксы в S на картинке
Я могу понять, как отрисовать нужную область с помощью Canvas Но как задать ее для области применения скрипта не понимаю.
<!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>
:)
то ли у меня гиф не воспроизводится
Это не анимация. Вам же надо определить области, а делается это так:
- изображение переводится в градации серого
- добавляется яркость и контрастность таким образом, чтобы "вырезать" детали на изображении (например полос на w, t и точек на s теперь а нем нет)
- в цветовой модели HSB задается некий порог черного с которым сверяется (в этой же цветовой модели) считанные значения пикселей изображения и если они превышают порог, то это область в которой рисуем
Если ваше исходное изображение практически готовая маска, то есть нет лишнего на нем, то преобразования можно пропустить. Только, если это одноразовая задача тогда клиент, но если таким образом нужно "раскрасить" массу изображений, то выгоднее делать это сервером один раз при загрузке на него изображения.
void(), спасибо, про маски не додумалась, но не совсем то. Хотя попытаться можно)
laimas, меня скорее интересовало можно ли (и если можно, то как) определить некую область (ну допустим отрисовать фигуру через canvas (Это то, что я как-то освоила, отсюда предположение) и скриптом оперировать с получившейся областью. Добавлять в нее объекты, чтобы они не заходили за край области
Т.е. чисто технически нужно будет пройтись по фигуре с шагом в несколько пикселей и сравнить есть ли в данных координатах фигура. Если есть, то туда ставить объект, если нет, то объект не ставить. Вот только не могу понять как эту область задать.
Или как вариант, выставлять объекты по некой ломаной линии. Использовать ее как траекторию (не в смысле движения по ней, а как ниточку для бус)
Bicou,
https://developer.mozilla.org/ru/docs/Web/API/CanvasRenderingContext2D/clip
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
рони,
т.е. с помощью .clip (FillRule); можно проверить принадлежит ли точка области и если да, то поставить свой объект? Я правильно понимаю?
Bicou,
я думал есть некое фото, на котором нужно найти области.
Bicou,
я думал есть некое фото, на котором нужно найти области.
В общем и целом да. Но области должны быть прозрачными) Т.е. вот в исходнике с буквами: допустим что буквы должны состоять из набора "клякс", а фон вокруг них оставаться прежним (и допустим, что он какой-то цветной) и таких мест на страничке несколько)
Я чуть выше вставила картинку с пояснением, чего хочу от скрипта)
области должны быть прозрачными
Не проблема, но вам же сначала нужно найти эти области. Не знаю чего посоветовать почитать, может быть о том как программно распознают и взламывают каптчи. На них к примеру шум, его удаляют посредством Blur, затем яркость/контрастность и все это в серых градациях. Почему выгоднее работать в цветовой модели HSB, а не RGB можно понять, если выбирать на шкале RGB цвет и видеть рядом шкалу HSB.
А найдя области, пусть они будут белыми, пройдясь по изображению указать пикселям этих областей значение альфа канала как полностью прозрачные. Но это если бы вам потребовалась маска, например на изображение в горошек наложить это изображение с прозрачностью и получить результат. Если же нужно просто кистью с разными шаблонами раскрасить различные области, тогда полученные области это всего лишь координаты где рисовать, рисовать то нужно будет на исходном изображении, и делать полученные области прозрачными не обязательно. Их вообще нужно будет держать в буфере как набор. А если рисовать по ней, то крайние точки наборов этих, это как раз будет путь фигуры, которую можно раскрасить как угодно.
Rise,
laimas,
вот на флеше такое достаточно просто реализовать. Но там есть возможность прохождения по контуру неровной области с заданным шагом. А вот есть ли что-то подобное в JS не знаю.
Мне собственно для решения нужно создать эту самую область (допустим обводку буквы) и сказать скрипту что начиная с верхнего угла ему надо проходить ее с шагом в несколько пикселей и проверять принадлежит новая точка области или нет. Если да, ставить точку. Если нет идти дальше.
Bicou,
если вам надо соединить две точки нужно ли знать координаты обеих точек или достаточно одной? Чтобы "сказать скрипту" куда и с каким шагом идти, нужно же знать куда ему "ноги ставить". :)
Вам же не нарисовать путь абстрактный нужно, а фактически распознать объект, его контур, а далее можете апроксимировать точки контура для упрощения, и потом только "ходить" по нему.
Bicou,
Вам надо познакомится с этой технологией. Это сложно, но возможно, хотя не факт. threejs (https://threejs.org/)
или копать svg. он любит ломаные конструкции. http://envek.github.io/Amestris/
Bicou,
Вам надо познакомится с этой технологией. Это сложно, но возможно, хотя не факт. threejs (https://threejs.org/)
или копать svg. он любит ломаные конструкции. http://envek.github.io/Amestris/
Спасибо, больше всего похоже на то, что нужно. Ну, а разобраться можно во всем. Это не те проблемы, которые не решаемы.
Какое такое? Статичную картинку? Так в фотошопе еще проще нарисовать.
Если бы было проще нарисовать, то давно бы нарисовала.
Картинка то статичная, но любая картинка ФШ это прямоугольник, что никак не помогает "распознать контур буквы"
vBulletin® v3.6.7, Copyright ©2000-2025, Jelsoft Enterprises Ltd. Перевод: zCarot