#javascript #html #ipad
#javascript #HTML #iPad
Вопрос:
В настоящее время я разрабатываю небольшое приложение для рисования на основе HTML5 Canvas / JavaScript для iPad. Он запускается в Safari. До сих пор все работало отлично, за исключением одной вещи.
Если я поворачиваю устройство, мой пользовательский интерфейс переориентируется. Это здорово для большей части пользовательского интерфейса, за исключением самого canvas. Есть ли какой-нибудь способ заставить холст не поворачиваться?
Ответ №1:
Как насчет настройки CSS, зависящего от ориентации:
<link rel="stylesheet" type="text/css" href="css/landscape.css" media="all and (orientation:landscape)">
<link rel="stylesheet" type="text/css" href="css/portrait.css" media="all and (orientation:portrait)">
и поместить:
-webkit-transform: rotate(-90deg)
в одной из двух ориентаций, чтобы противодействовать автоматическому вращению?
Комментарии:
1. Классная идея. Нужно попробовать что-то в этом роде. Я думаю, что в этом случае мне придется как-то преобразовать свои координаты Canvas. Просто немного дополнительной математики, с которой мне нужно справиться. 🙂
2. если вы сделаете это правильно, вы можете сохранить координаты canvas одинаковыми — значения стиля и экранные значения не обязательно должны быть согласованными.
3. ОК. Я оставлю этот вопрос открытым некоторое время (12 часов или около того?) и приму ваш на случай, если больше ничего не появится. Спасибо за ответ. 🙂
4. в любом случае, худшее, что вам придется сделать, это применить преобразование равномерного масштабирования к контексту вашего canvas. Затем вы можете сохранить координаты пикселей одинаковыми в любой ориентации.
Ответ №2:
На случай, если кому-то интересно, как реализовать ответ Алнитака на практике, вот вам:
CSS:
@media all and (orientation:portrait) {
#myCanvas {
-webkit-transform: rotate(270deg)
}
}
В качестве альтернативы вы можете использовать отдельные CSS-файлы, если хотите.
Чтобы синхронизировать систему координат canvas с этим, вы можете использовать что-то вроде этого:
ctx.save();
...
if(window.orientation == 0 || window.orientation == 180) {
ctx.translate(canvasWidth, 0);
ctx.rotate(Math.PI / 2);
}
...
ctx.restore();
Могут быть какие-то другие способы достижения того же результата, но мне показалось, что этот работает нормально. Обратите внимание, что неплохо бы сохранить / восстановить состояние контекста, чтобы вы не испортили его при повороте.