Javascript.RU

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

Ну так я и говорю, если вы хотите возложить все на css, то вы хотите ИИ, но вы же знаете и размер контейнера, и то что изображение может быть меньше контейнера, и самое главное то, что css не может "дорисовать" картинку.
Зная это, можно сделать только одно - масштабировать изображение, а уж в какую сторону его сдвинуть и на сколько, это только вам определять, ибо css уж точно не понимает, что на картинке есть объект.
Ответить с цитированием
  #12 (permalink)  
Старый 20.07.2020, 14:06
Новичок на форуме
Отправить личное сообщение для headrush Посмотреть профиль Найти все сообщения от headrush
 
Регистрация: 12.06.2013
Сообщений: 9

Сообщение от laimas Посмотреть сообщение
Ну так я и говорю, если вы хотите возложить все на css, то вы хотите ИИ, но вы же знаете и размер контейнера, и то что изображение может быть меньше контейнера, и самое главное то, что css не может "дорисовать" картинку.
Зная это, можно сделать только одно - масштабировать изображение, а уж в какую сторону его сдвинуть и на сколько, это только вам определять, ибо css уж точно не понимает, что на картинке есть объект.
Нет. Масштабирование и сдвиги делаются с помощью CSS, а все расчеты, циферек, уже в JS. Причем необязательно даже CSS это могут быть и методы canvas. Просто расчетов слишком много, одно от другого зависит, не получается все собрать. Если записать алгоритм действий человека, то будет выглядеть так:

1. Сначала подгоняем масштаб так, чтобы область с объектом входила полностью в див. Скорее всего область с объектом по высоте и ширине не войдет одновременно. То есть сначала допустим полностью войдет по ширине, потом по длине. И по ширине тогда будет открываться все то что находится возле области с объектом. С точки зрения программной, нужно рассчитать такой %, для background-size чтобы ширина и длина масштабируемой области (она масштабируется пропорционально всему изображению) не превышала div.

2. далее мы центруем изображение, чтобы объект был по центру div и если вдруг появились белые поля ту сдвигаем по мере возможности изображение, чтобы их скрыть. Тут как бы тоже все для расчетов есть. Размеры исходного изображения, размеры div, размер и координаты области с объектом и scale коэффициент масштабирования.
Ответить с цитированием
  #13 (permalink)  
Старый 20.07.2020, 15:28
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от headrush
далее мы центруем изображение, чтобы объект был по центру div и если вдруг появились белые поля ту сдвигаем по мере возможности изображение, чтобы их скрыть.
Интересно, кто этим будет заниматься, то есть "давать добро" и что самое интересное знать, что "некий объект" встал на место?

На то оно и масштабируется, чтобы заняло все, а далее либо центрируем, либо от любого из краев отсчет. А чтобы "объект" вошел, значит просто растянуть до заполнения, но это уже с искажениями.

Или я так и не понял чего вы там творите.
Ответить с цитированием
  #14 (permalink)  
Старый 20.07.2020, 15:37
Новичок на форуме
Отправить личное сообщение для headrush Посмотреть профиль Найти все сообщения от headrush
 
Регистрация: 12.06.2013
Сообщений: 9

Сообщение от laimas Посмотреть сообщение
Интересно, кто этим будет заниматься, то есть "давать добро" и что самое интересное знать, что "некий объект" встал на место?

На то оно и масштабируется, чтобы заняло все, а далее либо центрируем, либо от любого из краев отсчет. А чтобы "объект" вошел, значит просто растянуть до заполнения, но это уже с искажениями.

Или я так и не понял чего вы там творите.
После масштабирования исходного изображения, координаты и размеры области с объектом линейно изменяются. ну то есть тупо умножаются на scale. И далее можно рассчитать например, что от координаты левого, верхнего угла области до края изображения столько-то пикселей, а в диве столько то и тут уже принимать условное решение.

Ну или допустим в одной из попыток реализовать это, я делал так: изначально позиция фона ставится в координаты области (с минусом), в этом случае объект будет своим углом верхним левым уперт в соответствующий угол дива, далее, мы для каждой оси,рассчитываем разницу области с соответсвующей гранью дива, делим ее пополам. тем самым сдвигая на это значение по Х и по У. Но тут нужно еще учесть, что эти сдвиги должны быть ограничены размером самой картинки.
Ответить с цитированием
  #15 (permalink)  
Старый 20.07.2020, 16:09
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

В css есть правила, которые растянут, естественно, что может быть обрезано сверху/снизу или слева/справа в зависимости от размеров. Какой при этом смысл сдвигать, рассчитывать что-то, когда может быть центрирование лучший выбор, а тем более это не определит ни js, ни css.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Реализация сборки пазла с использованием Drag'N'Drop (чистый JavaScript) nightofpromises Элементы интерфейса 1 16.03.2019 09:54
Изменение рабочей области изображения pagemaster Общие вопросы Javascript 19 15.04.2013 18:06
Расчет реальных размеров изображения в галерее Vision Элементы интерфейса 7 10.07.2012 21:56
Проблема: Jquery - эффект раскрытия LightBox для изображения. woody2 jQuery 0 16.09.2011 00:10
Получение высоты изображения theo_ Javascript под браузер 2 21.06.2011 16:04