Статьи

Пример PopoverOptions камеры Cordova

Май 4, 2018

Одна из интересных функций в API камеры Cordova — это функция popoverOptions. Хотя в документах действительно объясняется, что делает эта функция, может быть не совсем понятно, как она работает, поэтому я поделился быстрым примером со снимками экрана, чтобы продемонстрировать, как она работает.

Прежде всего — эта функция предназначена только для iOS (и iPad), и только для существующих изображений , ее нельзя использовать, когда пользователь делает новые фотографии. Так что сразу вы можете увидеть, что это будет иметь ограниченное использование. Но что именно это делает? Документы говорят:


Параметры только для iOS, которые определяют местоположение элемента привязки и направление стрелки всплывающего окна при выборе изображений из библиотеки или альбома iPad.

Варианты включают в себя:

  • Значения X и Y, чтобы закрепить поповер. Это имеет смысл.
  • Ширина и высота для анкера. Это не совсем имело смысл. Мое предположение — если вы привязываете всплывающее окно к элементу пользовательского интерфейса, то вы указываете это, чтобы iOS знала, насколько велика привязка, и в сочетании с x и y дает достаточно данных, чтобы знать, как ее позиционировать.
  • Свойство arrowDir, которое указывает, в каком направлении будет перемещаться поповер от якоря. Так что, если вы укажете стрелку вправо, всплывающее окно будет слева. Скорее всего, вы будете использовать опцию «any», чтобы iOS все поняла.

Давайте посмотрим на простой пример. Я построил очень простую HTML-страницу, которая включает кнопку для подсказки пользователю выбрать изображение, а также пустое изображение (стилизованное красным), которое будет служить моим якорем. Вот HTML. 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title></title>
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width">
        <link rel="stylesheet" type="text/css" href="css/app.css" />
	</head>
	<body>

	<img id="canvas" />
	<button id="startCamera">Start Camera Test</button>

	<script src="cordova.js"></script>	
	<script src="js/app.js"></script>
	</body>
</html>

Я использовал немного CSS, чтобы указать положение и размер изображения: 

body {
	margin-top: 20px;
}

#canvas {
	position: absolute;
	left: 300px;
	top: 300px;
	background-color: red;
	width: 200px;
	height: 200px;
}

Теперь давайте посмотрим на код JavaScript. 

document.addEventListener("deviceready", init, false);
function init() {
	document.querySelector("#startCamera").addEventListener("touchend", startCamera, false);
}

var cameraPopoverHandle;

function startCamera() {

	cameraPopoverHandle = navigator.camera.getPicture(onSuccess, onFail,
     { destinationType: Camera.DestinationType.FILE_URI,
       sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
       popoverOptions: new CameraPopoverOptions(300, 300, 200, 200, Camera.PopoverArrowDirection.ARROW_ANY)
     });

}

function onSuccess(u) {
	console.log('onSuccess');
	document.querySelector("#canvas").src = u;
}

function onFail(e) {
	console.log('onFail');
	console.dir(e);
}

 // Reposition the popover if the orientation changes.
 window.onorientationchange = function() {
 	console.log('running onorientationchange');
	var cameraPopoverOptions = new CameraPopoverOptions(0, 0, 100, 100, Camera.PopoverArrowDirection.ARROW_ANY);
    cameraPopoverHandle.setPosition(cameraPopoverOptions);
 }

По сути, все, что у нас есть, это сенсорный обработчик для кнопки, которая запускает вызов Camera API. Обратите внимание, мы перешли в опциях поповер. Атрибуты X, Y, Width и Height основаны на CSS, который я использовал для изображения. Наконец, есть немного кода для обработки изменений ориентации, который я взял прямо из документации. Подробнее об этом через минуту. Итак, давайте посмотрим на это в действии.

Обратите внимание, как popover привязан к моему DOM-элементу изображения. Обратите внимание, как он позиционируется автоматически. Как только изображение выбрано, поповер автоматически исчезает, а остальная часть моего кода запускается.

Это в основном это. Это простое изменение, и оно работает лучше для планшетов. Вам нужно добавить немного логики, чтобы увидеть, если это iPad. Помните, что API устройства делает это тривиальным. Хотя в моем тестировании это не имело значения. Я переключился на iPhone, и параметры поповера просто игнорировались.

Теперь поговорим об изменении ориентации. Я понял это правильно из документов, и это, безусловно, имеет смысл, но, как ни странно, кажется, что значения X, Y игнорируются. Исходя из кода из документов, кажется, что он должен изменить положение на 0,0 и принять размер привязки 100,100. Я должен был использовать лучшие значения для этого, но сначала я хотел проверить это как есть. В моем тестировании эти значения, похоже, не оказали влияния. Фактически, если я удаляю код полностью, iOS все еще обрабатывает изменение ориентации хорошо. Если я получу некоторые разъяснения, почему это так, я обновлю код соответствующим образом.

Как и раньше, я разместил это на GitHub на случай, если вы хотите быстро протестировать: https://github.com/cfjedimaster/Cordova-Examples/tree/master/popovertest

32
Share: