Как сделать маску для рисунка
Не уверен что сформулировал вопрос правильно (может именно поэтому ничего не получается найти), но суть такая - есть рисунок который надо немного затемнить и при этом есть второй, прозрачный передвигающийся рисунок (или что угодно), что можно передвинуть на первый рисунок сделав его в этом месте светлее. Что-то типа обрезания рисунка в фотошопе - выделеная область остается светлой, а тто, что обрежится становится темнее. Я реализацию видел, а вот каким способом это делалось не могу сообразить, может как подскажет. Заранее спасибо.
|
приведете код, того что вы уже сделали сами
|
Да писать то особо нечего, не понятно как реализовать основную идею...
- Думал вариант через crop - есть 2 diva, первый это абсолютно позицианированый рисунок, а второй это черный квадрат внутри с прозрачным квадратом (gif), который перемещается. Второй квадрат двигаю спомощью drag функций при этом обрезаю все по его краям. Ставлю ему opacity. Имитировать эффект получается, но при этом есть много минусов: размер второго рисунка, при значиетльном удалении первый рисунок будет обрезаться, чего не хотелось бы. - Пробовал через php с использованием фильтров яркости - еффект работает, но php постоянно создает новый кусочек изображения подгружая его - совсем не красиво смотриться. - Нет главной идеи от котором можно было бы отталкнуться - что-то типа масок как в ActionScript или возможности обрезания внутренней части, а не внешней как в crop (css), или применении фильтра только к той части котоная находится в фокусе второго div. |
|
- В этой теме ничего похожего я не нашел. Рисованый квадратик двигать по рисунку дело не хитрое. А как сделать чтоб внутки квадратика рисунок остался прежним, а снаружи стал темнее или внутри осветлить не понятно.
- Ладно, еще сейчас пару раз перечитаю, может что-то всетаки там есть ... Не, так ничего и не нашел. Но все равно, спасибо. Я и сам пытался ответ искать в примерах редакторов изображений на javascript, но везде только выделяют а облась не подсвечивают. |
Ээм ясли я правильно понял суть, то нужна тупо png картинка, соержащая рисунок со 100% прозрачностью и черный фон с 50%ой. И соот-но наложение этого рисунка на картинку.
|
Если по такому принципу, то должно быть 3 картинки 1 - основной рисунок в низу 2 - темный фон 50% того же размера и 3-что-то меньшего размера что даст 100% темного фона на месте его наложения.
Как я понимаю что наложение 100% прозрачного рисунка на 50% темный фон просто ничего не даст - останется 50% фон. Или есть другие соображения. |
Вложений: 2
Естесно ничего не даст. Потому надо включить мозг и придумать как не подкладывать под нашу картинку затемняющий фон.
Пример: Далеко не лучший вариант но простейший:
<!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>
|
Спасибо за идею и за призыв вклчить мозг :) Но подобный вариант я уже реализовал и как я писал выше (см. сообщение от 20.02 в 14:02) он мне не очень подходит. Хотя вариант с border 800px мне очень понравился :)
- Сейчас есть одна идея, если получится отпишусь. |
а чтото сложного-больший контейнер вложи в меньший. меньшему отображать только то что внутри. и води больший относительно меньшего. хочешь водить меньший-води но тогда изменяй ещё координаты большего относительно меньшего
|
Почему не очень подходит то?
Потому что 800p может оказаться мало? Так сделай 8000px. Или вооще табличкой, лол.) |
Цитата:
Цитата:
|
Aljnk,
ты прав,я не правильно прочитал твой пост |
Э-э, но если прозрачный рисунок будет над не затемнёнными объектами то его собсно не будет видно? Я таки до конца не понимаю чего ты хошь.=\
|
Не, понял ты все правильно, просто рисунок не весь прозрачный - это типа рамки пустой внутри.
|
Вложений: 2
Ну сделай 2 элемента.
<!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;cursor:none}
body {overflow:hidden;background:url('http://javascript.ru/forum/attachment.php?attachmentid=702&stc=1&d=1298243258') 50% 50%;}
#container {margin:50px auto; position:relative;overflow:hidden;background-image:url('http://javascript.ru/forum/attachment.php?attachmentid=702&stc=1&d=1298243258');height:277px;width:417px; }
#maskInner {
position:absolute;
border:800px solid #000;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
}
#maskOuter {position:absolute}
</style>
<script type="text/javascript">
window.onload=function(){
var mi=document.getElementById('maskInner').style;
var mo=document.getElementById('maskOuter').style;
var l=document.getElementById('container').offsetLeft;
document.onmousemove=function(e){
e||(e=window.event);
mi.cssText='left:'+(e.clientX-899-l)+'px;top:'+(e.clientY-903)+'px';
mo.cssText='left:'+(e.clientX-99)+'px;top:'+(e.clientY-53)+'px';
}
}
</script>
</head>
<body>
<div id="container">
<img src="http://javascript.ru/forum/attachment.php?attachmentid=708&stc=1&d=1298314949" id="maskInner">
</div>
<img src="http://javascript.ru/forum/attachment.php?attachmentid=707&stc=1&d=1298314949" id="maskOuter">
</body>
</html>
|
Цитата:
|
| Часовой пояс GMT +3, время: 10:39. |