Алгоритм для масштабирования изображения

@__proto__ · Регистрация: 19.08.2012

Студворк — интернет-сервис помощи студентам

вот пример того что мне нужно сделать http://rvolve.com/zoom_pic.php .
что реализовать подобный эффект использовал алгоритм

определяю центр блока и позицию мыши во время увеличения
потом
(left + ( Координаты центра - позиция мыши))* zoom

что я делаю не так?

нашел алгоритм на вики но как понял тот алгоритм используются для увлечения с восстановлением качества..
Плз помогите

Добавлено через 19 часов 35 минут
народ хелп

@kalabuni · 21.08.2012, 07:30

Можно проще:
-- при увеличении по нажатию изменяем размер одной из сторон картинки (либо style.width, либо style.height) и одновременно пропорционально меняем свойства style.clip, style.left и style.top, чтобы обрезанная картинка вписывалась в исходный размер. И всё это - через тайм-аут.

-- при уменьшении - то же самое, но с другим знаком.

-- при движении мыши по увеличенной картинке - опять же пересчитываем style.clip, style.left и style.top в зависимости от положения курсора (но уже при неизменных текущих габаритах картинки).

Посмотрите тему Как показать только часть картинки? - там я давал пример одновременного изменения style.clip, style.left и style.top

Показываю реализацию только "увеличения по нажатию до масштаба 3 к 1" (и для самого простого случая, когда исходная картинка квадратная - высота её равна ширине):

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div style="position: relative">
<img id="myPic"
     src="https://www.cyberforum.ru/customavatars/avatar160624_3.gif"
     lang="100"
     style="position: absolute; left: 0; top: 0"
     onmousedown="myFunc ()"
     onmouseup="clearTimeout (TMR); TMR = null">
<!-- атрибут lang="ширина картинки в пикселях" (она же - высота) -->
</div>
 
<script>
function myFunc ()
{
var obj = document.getElementById ('myPic');
if (!self.TMR) {TMR = setTimeout (myFunc, 1); return}
if (obj.lang < 300)
   {
   var t = obj.lang * 1 + 2, d = (t - 100) / 2, w = 100 + d; obj.lang = t; 
   with (obj.style) width = t + 'px', left = top = -d + 'px',
      clip = 'rect(' + d + 'px ' + w + 'px ' + w + 'px ' + d + 'px)';
   TMR = setTimeout (myFunc, 40);
   }
else {clearTimeout (TMR); TMR = null}
}
</script>

@__proto__ · 21.08.2012, 13:30 **[ТС]**

написано уже все кроме зума (сор что не уточнил) вместо clip использую overflow.
Вариант со смещением пробовал но не получается опредилить размер на который смещать=(
ага сначала не понял что делает твой код, спасибо огромное буду разбирается(одно символьное название переменной это жесть

)

Добавлено через 1 час 33 минуты
а 100

JavaScript
1
 var d = (t - 100) / 2 ;

это ширина я так понял?

@EPMAK · 22.08.2012, 15:07

Сообщение от __proto__

написано уже все кроме зума (сор что не уточнил) вместо clip использую overflow.
Вариант со смещением пробовал но не получается опредилить размер на который смещать=(
ага сначала не понял что делает твой код, спасибо огромное буду разбирается(одно символьное название переменной это жесть

)

Добавлено через 1 час 33 минуты
а 100

JavaScript
1
 var d = (t - 100) / 2 ;

это ширина я так понял?

t - (ширина-высота картинки в динамике)
d - порядковый номер (шаг) увеличения на 2пк.

@Serhij · 22.08.2012, 18:49

в примере все сделано на canvas, оттуда можно и взять реализацию. также можно это сделать на css3 используя scale или zoom; а если кросбраузерно то надо менять высоту ширину и позицию относительно клика мышки.

@__proto__ · 22.08.2012, 22:59 **[ТС]**

Сообщение от Serhij

в примере все сделано на canvas, оттуда можно и взять реализацию. также можно это сделать на css3 используя scale или zoom; а если кросбраузерно то надо менять высоту ширину и позицию относительно клика мышки.

ну так и делаю, но есть такой браузер как ие и к нему нужен "индивидуальный" подход=)

Добавлено через 20 секунд

Сообщение от EPMAK

t - (ширина-высота картинки в динамике)
d - порядковый номер (шаг) увеличения на 2пк.

спс разобрался

Новые блоги и статьи Все статьи Все блоги /
WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114
Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .	Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .

@__proto__ 5 / 5 / 2 Регистрация: 19.08.2012 Сообщений: 79

	Алгоритм для масштабирования изображения 20.08.2012, 16:07. Показов 8237. Ответов 5 Метки нет (Все метки) вот пример того что мне нужно сделать http://rvolve.com/zoom_pic.php . что реализовать подобный эффект использовал алгоритм определяю центр блока и позицию мыши во время увеличения потом *(left + ( Координаты центра - позиция мыши)) zoom** что я делаю не так? нашел алгоритм на вики но как понял тот алгоритм используются для увлечения с восстановлением качества.. Плз помогите Добавлено через 19 часов 35 минут народ хелп 1

@Serhij 4 / 4 / 0 Регистрация: 23.11.2008 Сообщений: 44
	22.08.2012, 18:49
	в примере все сделано на canvas, оттуда можно и взять реализацию. также можно это сделать на css3 используя scale или zoom; а если кросбраузерно то надо менять высоту ширину и позицию относительно клика мышки. 0