Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Помогите разобраться со скриптом 
V
    Опции темы
neoks
Дата 29.1.2019, 12:16 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 425
Регистрация: 5.7.2010

Репутация: нет
Всего: 1



Всем примет, есть скрипт масштабирования, работает вполне себе нормально, захотел сделать чтобы масштаб регулировался поменьше, чтобы при скроле не уменьшался в 2 раза а скажем там в 1.5
Но чет не могу разобрать логику этого масштабирования, крутил и так и сяк, не догоняю как это сделать))

Вот фрагмент когда срабатывает эвент скролла
Код

var delta = 0;
            var r     = canvas.getBoundingClientRect();

            if(!e) e = $.e;

            if (e.wheelDelta){
                delta = e.wheelDelta / 120;

                if ($.opera) delta = -delta;
            } 
            else if (e.detail) delta = -e.detail / 3;

            var canvasZoomX = (e.clientX - r.left);
            var canvasZoomY = (e.clientY - r.top);

            if (delta > 0){   
                // ZOOMING IN
                var zoomedX = canvasPos.deltaX - (canvasZoomX - canvasPos.deltaX);
                var zoomedY = canvasPos.deltaY - (canvasZoomY - canvasPos.deltaY);

                // scale the image up by 2
                self.scale = self.scale * 2;
            }
            else{   
                // ZOOMING OUT
                var zoomedX = (canvasPos.deltaX + canvasZoomX) / 2;
                var zoomedY = (canvasPos.deltaY + canvasZoomY) / 2;

                // scale the image down by 2
                self.scale = self.scale / 2;
            }

            // we need to clear the canvas, otherwise we'll have a bunch of overlapping images
            //ctx.clearRect(0,0, canvas.width, canvas.height);

            self.dispatchEvent({type: 'draw', x: zoomedX, y: zoomedY, scale: self.scale});

            // update the new canvas position
            canvasPos.deltaX = zoomedX;
            canvasPos.deltaY = zoomedY;


Вроде бы как логично править тут
Код

self.scale = self.scale * 2;


и тут
Код

self.scale = self.scale / 2;


Но когда пытался поставить другие значения, скажем 1.5 то масштабирование стало меньше но получается камера сдвигалась не к курсору а хз куда, в другое место.
Какая тут логика? что тут нужно подкрутить чтобы оно работало нормально)

Это сообщение отредактировал(а) neoks - 29.1.2019, 12:17
PM MAIL   Вверх
Romikgy
Дата 29.1.2019, 15:19 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Любитель-программер
****


Профиль
Группа: Участник Клуба
Сообщений: 7325
Регистрация: 11.5.2005
Где: Porto Franco Odes sa

Репутация: 1
Всего: 146



Цитата(neoks @  29.1.2019,  11:16 Найти цитируемый пост)
 var zoomedX = (canvasPos.deltaX + canvasZoomX) / 2;
                var zoomedY = (canvasPos.deltaY + canvasZoomY) / 2;
                // scale the image down by 2
                self.scale = self.scale / 2;

Код

var zoom=1.5;
var zoomedX = (canvasPos.deltaX + canvasZoomX) / zoom;
var zoomedY = (canvasPos.deltaY + canvasZoomY) / zoom;
self.scale = self.scale / zoom;



--------------------
Владение русской орфографией это как владение кунг-фу — истинные мастера не применяют его без надобности. 
smile

PM   Вверх
neoks
Дата 29.1.2019, 15:58 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 425
Регистрация: 5.7.2010

Репутация: нет
Всего: 1



Неа, не помогло, тоже так пробовал)

Вот накидал рабочий пример https://jsfiddle.net/vwbsprmy/

Это сообщение отредактировал(а) neoks - 29.1.2019, 15:58
PM MAIL   Вверх
Romikgy
Дата 29.1.2019, 17:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Любитель-программер
****


Профиль
Группа: Участник Клуба
Сообщений: 7325
Регистрация: 11.5.2005
Где: Porto Franco Odes sa

Репутация: 1
Всего: 146



Код

            var z=1.5;
            if (delta > 0){   
                // ZOOMING IN
                var zoomedX = canvasZoomX - (canvasZoomX -canvasPos.deltaX ) * z;
                var zoomedY = canvasZoomY - (canvasZoomY-canvasPos.deltaY) * z;
                self.scale = self.scale * z;
                
            }
            else{   
                // ZOOMING OUT
                var zoomedX = canvasZoomX - (canvasZoomX -canvasPos.deltaX ) / z;
                 var zoomedY = canvasZoomY - (canvasZoomY-canvasPos.deltaY) / z;
                                self.scale = self.scale / z; 
            }



--------------------
Владение русской орфографией это как владение кунг-фу — истинные мастера не применяют его без надобности. 
smile

PM   Вверх
neoks
Дата 29.1.2019, 18:28 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 425
Регистрация: 5.7.2010

Репутация: нет
Всего: 1



Цитата(Romikgy @  29.1.2019,  17:33 Найти цитируемый пост)
Romikgy

Большое спасибо, теперь то что надо!  smile 

PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.1183 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.