Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 12.04.2012, 13:07
Интересующийся
Отправить личное сообщение для Natali_RnD Посмотреть профиль Найти все сообщения от Natali_RnD
 
Регистрация: 16.01.2012
Сообщений: 12

час от часу не легче, оказалось что фотография должна быть под слоями паспарту, т.е. у меня сейчас три слоя паспарту и сама фотка, он нижнего слоя к фотке нарастает z-index, таким образом они перекрываются и создаётся видимость слоев с фиксированной шириной. Оказывается нужно чтобы фотография была самым нижним слоем и паспарту накладывались на неё, т.о. что каждый слой скрывает из виду часть фотки на которую он наложен, но остается видна центральная часть. Вопрос: возможно ли такое реализовать? т.е. у фотки выбранная область центральная должна быть видимой
Ответить с цитированием
  #12 (permalink)  
Старый 12.04.2012, 16:01
Профессор
Отправить личное сообщение для Маэстро Посмотреть профиль Найти все сообщения от Маэстро
 
Регистрация: 02.07.2010
Сообщений: 629

Сообщение от Natali_RnD Посмотреть сообщение
... каждый слой скрывает из виду часть фотки на которую он наложен, но остается видна центральная часть
1. Как я уже писал, можно картинку паспарту разделить на 8 частей (сделать из них периметр прямоугольника), тогда в центре будет пусто.
2. Можно попробовать сделать картинку паспарту на базе png-файла таким образом, чтобы внутренний прямоугольник был полностью прозрачен (тогда сквозь него будет видно центральное фото)
Ответить с цитированием
  #13 (permalink)  
Старый 13.04.2012, 10:02
Интересующийся
Отправить личное сообщение для Natali_RnD Посмотреть профиль Найти все сообщения от Natali_RnD
 
Регистрация: 16.01.2012
Сообщений: 12

Спасибо, ещё вопрос. Паспарту может быть прямоугольником и овалом соответственно. Я из прямоугольника делаю овал с помощью border-radius 50%, допустим у меня средний слой превращается в овал, необходимо, чтобы внутренний слой прямоугольный не выходил за рамки овала, т.е. его нужно вписать в овал. Вопрос: как по начальным размерам прямоугольника(который пользователь видит как овал) узнать максимальные размеры прямоугольника, который можно в писать в этот овал?
надеюсь понятно объяснила...
Ответить с цитированием
  #14 (permalink)  
Старый 13.04.2012, 11:50
Профессор
Отправить личное сообщение для Маэстро Посмотреть профиль Найти все сообщения от Маэстро
 
Регистрация: 02.07.2010
Сообщений: 629

ууу... Натали, это уже не javascript. это уже математика/геометрия.
всё определяется Пифагором и его теоремой о катетах...
Сделаю упрощенную программу для круга (не для овала).
<html>
<body>
<script>
var kv1 = 500; // ширина внешнего квадрата
var r1 = 250; // параметр скругления квадрата (в пикселях)
  
// расчет радиуса круга, вписанного во внешний квадрат. я его здесь поставил готовый - вычислите самостоятельно(на основании параметра скругления)
var r2 = 250;
  
// расчет стороны внутреннего квадрата, вписанного в круг
var kv2 = parseInt(2 * Math.sqrt(r2*r2/2));  
var x = parseInt((kv1 - kv2)/2); // координата left внутреннего квадрата, вписанного в круг
  
  
var k1=document.createElement('DIV');
k1.style.cssText = 'position:absolute; left:0px; top:0px; width:'+kv1+'px; height:'+kv1+'px; border:solid 1px #FF0000; border-radius:'+r1+'px';
document.body.appendChild(k1);

var k2=document.createElement('DIV');
k2.style.cssText = 'position:absolute; left:'+ x +'px; top:'+ x +'px; width:'+kv2+'px; height:'+kv2+'px; border:solid 1px #0000FF';
document.body.appendChild(k2);
</script>
</body>
</html>
Ответить с цитированием
  #15 (permalink)  
Старый 13.04.2012, 15:36
Интересующийся
Отправить личное сообщение для Natali_RnD Посмотреть профиль Найти все сообщения от Natali_RnD
 
Регистрация: 16.01.2012
Сообщений: 12

Спасибо огромное!! Не знаю, чтобы я без вас делала.. Привожу код для эллипса.

<html>
<body>
<script>
    var w1 = 245; // ширина внешнего прямоугольника
    var h1 = 355; // высота внешнего прямоугольника
    var r1 = parseFloat(w1/2); // параметр скругления по ширине (в пикселях)
    var r2 = parseFloat(h1/2); // параметр скругления по высоте (в пикселях)

    // расчет сторон внутреннего прямоугольника, вписанного в эллипс
    var w2 = parseInt(2 * Math.sqrt(r1*r1/2));
    var h2 = parseInt(2 * Math.sqrt(r2*r2/2));

    var y = parseInt((h1 - h2)/2); // координата top внутреннего прямоугольника, вписанного в эллипс
    var x = parseInt((w1 - w2)/2); // координата left внутреннего прямоугольника, вписанного в эллипс

    var k1=document.createElement('DIV');
    k1.style.cssText = 'position:absolute; left:0px; top:0px; width:'+w1+'px; height:'+h1+'px; border:solid 1px #FF0000; border-radius:'+r1+'px/'+r2+'px;';
    document.body.appendChild(k1);

    var k2=document.createElement('DIV');
    k2.style.cssText = 'position:absolute; left:'+ x +'px; top:'+ y +'px; width:'+w2+'px; height:'+h2+'px; border:solid 1px #0000FF';
    document.body.appendChild(k2);
</script>
  </body>
</html>
Ответить с цитированием
  #16 (permalink)  
Старый 13.04.2012, 16:05
Профессор
Отправить личное сообщение для Маэстро Посмотреть профиль Найти все сообщения от Маэстро
 
Регистрация: 02.07.2010
Сообщений: 629

Пожалуйста. Вот только мне интересно, как Вы это сделаете в IE8 (скругление).
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как правильно задать ID в создаваемом элементе ? Indiana Events/DOM/Window 15 31.10.2010 15:15
Подскажите как правильно оформить код frolvict Общие вопросы Javascript 4 30.04.2010 09:51
Как правильно прописать свой код в .js Всеми_Любимый Элементы интерфейса 6 23.02.2010 20:34
Как правильно послать XML в POST запросе LowCoder AJAX и COMET 10 15.07.2009 22:20
Как правильно оформить Send() Алекс97 AJAX и COMET 20 30.10.2008 18:19