VPF::Помогите разобраться со скриптом

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

Romikgy

Дата 29.1.2019, 15:19 (ссылка)

(нет голосов)

Загрузка ...

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

Профиль
Группа: Участник Клуба
Сообщений: 7326
Регистрация: 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;

--------------------

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

neoks

Дата 29.1.2019, 15:58 (ссылка)

(нет голосов)

Загрузка ...

Опытный

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

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

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

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

Это сообщение отредактировал(а) neoks - 29.1.2019, 15:58

Romikgy

Дата 29.1.2019, 17:33 (ссылка)

(нет голосов)

Загрузка ...

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

Профиль
Группа: Участник Клуба
Сообщений: 7326
Регистрация: 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; 
            }

--------------------

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

neoks

Дата 29.1.2019, 18:28 (ссылка)

(нет голосов)

Загрузка ...

Опытный

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

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

Цитата(Romikgy @ 29.1.2019, 17:33

)

Romikgy

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

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »