Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.07.2012, 02:01
Профессор
Посмотреть профиль Найти все сообщения от Антон Крамолов
 
Регистрация: 11.04.2012
Сообщений: 255

Как перевести pt, em и пр. в пиксели
function collisionDetection(x1, y1, w1, h1, x2, y2, w2, h2) { 
    return x1 < (x2 + w2) && y1 < (y2 + h2) && (x1 + w1) > x2 && (y1 + h1) > y2; 
}

function calcSize(el, props) {
    var total = 0;
    
    for (var i = 0; i < props.length; ++i) {
        total += parseInt(getStyle(el, props[i])); // вот тут короче, если в пикселях заданы ширина и отступы все ок, в противном же случае все будет неправильно работать
    }
    
    return total;
}

function calcWidth(el) {
    return calcSize(el, ['border-left-width', 'padding-left', 'width', 'padding-right', 'border-right-width']);   
}

function calcHeight(el) {
    return calcSize(el, ['border-top-width', 'padding-top', 'height', 'padding-bottom', 'border-bottom-width']);
}

function isCollide(a, b) { 
    var p1 = getPosition(a), p2 = getPosition(b); 
    return collisionDetection(p1.left, p1.top, calcWidth(a), calcHeight(a), p2.left, p2.top, calcWidth(b), calcHeight(b)); 
}
Ответить с цитированием
  #2 (permalink)  
Старый 31.07.2012, 02:41
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,503

Нормальные люди используют для этого elem.offsetWidth/offsetHeight .

P.S. напрямую например em никак не перевести, т.к. это величина относительная.
__________________
29375, 35
Ответить с цитированием
  #3 (permalink)  
Старый 31.07.2012, 02:47
Профессор
Посмотреть профиль Найти все сообщения от Антон Крамолов
 
Регистрация: 11.04.2012
Сообщений: 255

Хорошее замечание

function makeDraggable(el, dragOptions) {
    var drag, dx, dy;
    
    el.addEventListener('mousedown', function(e) {
        var position = getPosition(this);
        // тут еще остались маргины, как от них избавиться?
        dx = position.left - e.clientX - parseInt(getStyle(this, 'margin-left'));
        dy = position.top - e.clientY - parseInt(getStyle(this, 'margin-top'));
        this.style.zIndex = maxZindex++;
        
        if (dragOptions.start) {
            dragOptions.start();
        }
        
        drag = true;
    }, false);
    
    document.addEventListener('mousemove', function(e) {  
        if (drag) {
            el.style.left = e.clientX + dx + 'px';
            el.style.top = e.clientY + dy + 'px';
            
            if (dragOptions.drag) {
                dragOptions.drag();
            }
        }
    }, false);
    
    document.addEventListener('mouseup', function() {
        if (drag) {
            if (dragOptions.end) {
                dragOptions.end();
            }
        
            drag = false;
        }
    }, false);
}

function collisionDetection(x1, y1, w1, h1, x2, y2, w2, h2) { 
    return x1 < (x2 + w2) && y1 < (y2 + h2) && (x1 + w1) > x2 && (y1 + h1) > y2; 
}

function isCollide(a, b) { 
    var p1 = getPosition(a);
    var p2 = getPosition(b); 
    return collisionDetection(p1.left, p1.top, a.offsetWidth, a.offsetHeight, 
    p2.left, p2.top, b.offsetWidth, b.offsetHeight); 
}
Ответить с цитированием
  #4 (permalink)  
Старый 31.07.2012, 02:49
Профессор
Посмотреть профиль Найти все сообщения от Антон Крамолов
 
Регистрация: 11.04.2012
Сообщений: 255

16 px по умолчанию 1 em, 1 em == размер шрифта
Ответить с цитированием
  #5 (permalink)  
Старый 31.07.2012, 02:59
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,503

<div style="font-size:2em">
  <div style="height:1em" onclick="alert(this.offsetHeight)">click</div>
</div>
__________________
29375, 35
Ответить с цитированием
  #6 (permalink)  
Старый 31.07.2012, 09:09
Аватар для Geddar
Кандидат Javascript-наук
Отправить личное сообщение для Geddar Посмотреть профиль Найти все сообщения от Geddar
 
Регистрация: 23.05.2009
Сообщений: 100

em может быть изменён наследованием.
Так например у
body{
font-size:14px;
}

body>div{
font-size:1.2em;
}

div>a{
font-size:0.7em;
}


Вот и считайте.

кстати поумолчанию не обязательно 16px у меня например 18px на мониторе 23' удобнее. Раньше у меня был 17' монитор, я использовал 14px
P.S. Вообще грамотные сайты вроде гугла обсчитывают размер шрифта для монитора скриптом
__________________
Обходя грабли ты теряешь драгоценный жизненный опыт!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как реализовать передачу функции в функцию?? czp Общие вопросы Javascript 10 29.11.2011 19:21
Как сделать как в JQ? faforty Общие вопросы Javascript 8 14.11.2011 01:35
JS классы - как объединить функции в класс olga153b Events/DOM/Window 3 01.11.2011 14:13
как перевести дату чтоб выполнить отбор в MYSql ?? Arfey Серверные языки и технологии 7 10.06.2010 09:23
Как сделать электронный каталог продукции? natarius Серверные языки и технологии 6 24.05.2009 20:56