20.02.2011, 13:56
|
|
Интересующийся
|
|
Регистрация: 06.11.2010
Сообщений: 17
|
|
|
Как сделать маску для рисунка
Не уверен что сформулировал вопрос правильно (может именно поэтому ничего не получается найти), но суть такая - есть рисунок который надо немного затемнить и при этом есть второй, прозрачный передвигающийся рисунок (или что угодно), что можно передвинуть на первый рисунок сделав его в этом месте светлее. Что-то типа обрезания рисунка в фотошопе - выделеная область остается светлой, а тто, что обрежится становится темнее. Я реализацию видел, а вот каким способом это делалось не могу сообразить, может как подскажет. Заранее спасибо.
|
|
20.02.2011, 14:36
|
|
Особый гость
|
|
Регистрация: 02.04.2010
Сообщений: 4,260
|
|
|
приведете код, того что вы уже сделали сами
|
|
20.02.2011, 15:02
|
|
Интересующийся
|
|
Регистрация: 06.11.2010
Сообщений: 17
|
|
|
Да писать то особо нечего, не понятно как реализовать основную идею...
- Думал вариант через crop - есть 2 diva, первый это абсолютно позицианированый рисунок, а второй это черный квадрат внутри с прозрачным квадратом (gif), который перемещается. Второй квадрат двигаю спомощью drag функций при этом обрезаю все по его краям. Ставлю ему opacity. Имитировать эффект получается, но при этом есть много минусов: размер второго рисунка, при значиетльном удалении первый рисунок будет обрезаться, чего не хотелось бы.
- Пробовал через php с использованием фильтров яркости - еффект работает, но php постоянно создает новый кусочек изображения подгружая его - совсем не красиво смотриться.
- Нет главной идеи от котором можно было бы отталкнуться - что-то типа масок как в ActionScript или возможности обрезания внутренней части, а не внешней как в crop (css), или применении фильтра только к той части котоная находится в фокусе второго div.
|
|
20.02.2011, 15:16
|
|
Особый гость
|
|
Регистрация: 02.04.2010
Сообщений: 4,260
|
|
|
|
|
20.02.2011, 15:30
|
|
Интересующийся
|
|
Регистрация: 06.11.2010
Сообщений: 17
|
|
|
- В этой теме ничего похожего я не нашел. Рисованый квадратик двигать по рисунку дело не хитрое. А как сделать чтоб внутки квадратика рисунок остался прежним, а снаружи стал темнее или внутри осветлить не понятно.
- Ладно, еще сейчас пару раз перечитаю, может что-то всетаки там есть
... Не, так ничего и не нашел. Но все равно, спасибо. Я и сам пытался ответ искать в примерах редакторов изображений на javascript, но везде только выделяют а облась не подсвечивают.
Последний раз редактировалось Aljnk, 20.02.2011 в 15:51.
|
|
20.02.2011, 19:59
|
 |
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,577
|
|
|
Ээм ясли я правильно понял суть, то нужна тупо png картинка, соержащая рисунок со 100% прозрачностью и черный фон с 50%ой. И соот-но наложение этого рисунка на картинку.
|
|
20.02.2011, 21:35
|
|
Интересующийся
|
|
Регистрация: 06.11.2010
Сообщений: 17
|
|
|
Если по такому принципу, то должно быть 3 картинки 1 - основной рисунок в низу 2 - темный фон 50% того же размера и 3-что-то меньшего размера что даст 100% темного фона на месте его наложения.
Как я понимаю что наложение 100% прозрачного рисунка на 50% темный фон просто ничего не даст - останется 50% фон. Или есть другие соображения.
|
|
21.02.2011, 00:59
|
|
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,577
|
|
Естесно ничего не даст. Потому надо включить мозг и придумать как не подкладывать под нашу картинку затемняющий фон.
Пример: Далеко не лучший вариант но простейший:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
*{margin:0;padding:0}
#container { position:relative;overflow:hidden;background:url('http://javascript.ru/forum/attachment.php?attachmentid=702&stc=1&d=1298243258') 50% 50%;height:277px;cursor:none }
#mask {
position:absolute;
border:800px solid #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}
</style>
<script type="text/javascript">
window.onload=function(){
var m=document.getElementById('mask').style;
document.getElementById('container').onmousemove=function(e){
e||(e=window.event);
m.cssText='left:'+(e.clientX-899)+'px;top:'+(e.clientY-853)+'px';
}
}
</script>
</head>
<body>
<div id="container">
<img src="http://javascript.ru/forum/attachment.php?attachmentid=699&stc=1&d=1298242362" id="mask">
</div>
</body>
</html>
Последний раз редактировалось Aetae, 21.02.2011 в 02:08.
|
|
21.02.2011, 07:20
|
|
Интересующийся
|
|
Регистрация: 06.11.2010
Сообщений: 17
|
|
Спасибо за идею и за призыв вклчить мозг  Но подобный вариант я уже реализовал и как я писал выше (см. сообщение от 20.02 в 14:02) он мне не очень подходит. Хотя вариант с border 800px мне очень понравился
- Сейчас есть одна идея, если получится отпишусь.
Последний раз редактировалось Aljnk, 21.02.2011 в 07:44.
|
|
21.02.2011, 12:41
|
|
х.з
|
|
Регистрация: 21.11.2010
Сообщений: 4,588
|
|
|
а чтото сложного-больший контейнер вложи в меньший. меньшему отображать только то что внутри. и води больший относительно меньшего. хочешь водить меньший-води но тогда изменяй ещё координаты большего относительно меньшего
Последний раз редактировалось dmitriymar, 21.02.2011 в 12:45.
|
|
|
|
