Холст Масштабирование в HTML5 mobile

В настоящее время я делаю игру, и мне нужно увеличить масштаб. Я много читал о том, как увеличить холст, с приличием ctx.scale(), дело в том, что я хочу увеличить оба пальца.Холст Масштабирование в HTML5 mobile

У меня уже есть зум, но это увеличение с верхнего/левого холста, а не на середине моих пальцев. У меня средняя точка между пальцем 1 и палец 2, но я не знаю, как увеличить масштаб в этой конкретной точке!

Это Exemple довольно подытоживает, что мне нужно (я просто нужен зум): Zoom Canvas to Mouse Cursor

Это работает очень хорошо, но с колесом!

Если бы кто-нибудь из вас, как любые идеи, я был бы очень рад поговорить! :)

Спасибо всем!

источник

2014-02-11 Kaiymu

Можете ли вы предоставить jsfiddle с рабочим примером? – Askanison4

На самом деле, я не могу, потому что мои файлы вызывают много внешних файлов. Но я могу предоставить JavaScript. http://pastebin.com/sp06RjHr Извините за французскую переменную, но там, где я работаю, мы должны поставить все по-французски :) – Kaiymu

Если у вас есть центральная точка, из которой вы хотите масштабировать, вы можете использовать инструмент перевода предоставленный CanvasRenderingContext2D:

void translate(
    in float x, 
    in float y 
);

Так что, когда у вас есть свой контекст холста в переменной ctx сделать

ctx.translate(x, y);

А потом

ctx.scale(x, y);

ctx.translate(x, y) переводит начало координат в координаты x, y. По умолчанию источник CanvasRenderingContext2D находится в 0, 0 (http://www.w3.org/TR/2dcontext/), поэтому масштабирование происходит из верхнего левого угла.

Источник https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D#translate()

источник

2014-02-11 11:57:53

Спасибо за вашу помощь! И я думаю, что мой x/y плавающий, должно быть, среднее положение пальцев, правильно? – Kaiymu

Да, это правильно. Я предполагаю, что у вас уже есть формула для вычисления средней точки. Если нет, вы можете искать «формулу средней точки на сегменте» в Интернете, но совсем не сложно ее самостоятельно создать. –

Спасибо Том! Извините, еще один вопрос: translate занимает позицию по положению X и Y Но масштаб принимает поплавок, который масштабирует весь мой контекст, а не значение X и Y? Или я ошибочно ошибаюсь! – Kaiymu

Я добавил события прикосновения ... Теперь вам нужно найти середину всех точек в массиве evt.touches (каждый из них имеет clientX и clientY, наряду с другими свойствами)

You также необходимо будет отслеживать расстояние между этими точками, чтобы изменить уровень масштабирования.

Этот бункер может помочь вам (проверка строки 46) http://jsbin.com/dived/1/edit?js,output

источник

2014-02-11 12:45:22 rafaelcastrocouto

ответ

Смежные вопросы