DUMP-2013 Frontend - Возможности последних WEB-стандартов в API Яндекс.Карт - Шмыров Всеволод
1 like4,022 views
Документ содержит информацию о возможностях работы с графикой и картами с использованием JavaScript и HTML5. Он охватывает такие темы, как создание и управление элементами Canvas, SVG, а также использование геолокации и баз данных. Приводятся примеры кода для реализации различных графических элементов и взаимодействия с пользователем.
![8
var coords = [[57.72495,63.546779], [54.740667,70.050685],
[50.407949,66.798732], [53.291545,61.349513], [53.133264,52.999904]];
var polygon = new ymaps.Polygon([coords], {}, {
fillOpacity: 0.2,
strokeColor: '#7CE823',
fillColor: '#1C7BC9',
strokeWidth: 4,
draggable: true,
geodesic: true
});](https://image.slidesharecdn.com/random-130528162400-phpapp01/85/DUMP-2013-Frontend-WEB-API-8-320.jpg)
![29
navigator.geolocation.getCurrentPosition(onSuccess, onError);
function onSuccess(position) {
var coords = [position.coords.latitude, position.coords.longitude];
var placemark = new ymaps.Placemark(coords);
map.geoObjects.add(placemark);
map.setCenter(coords);
}
function onError(positionError) {
console.log(positionError.message);
}
http://bit.ly/geolocationAPI
• Получение местоположение пользователя
• Все методы асинхронные
• Поддержка современными браузерами (IE9+,
Opera10.6+)](https://image.slidesharecdn.com/random-130528162400-phpapp01/85/DUMP-2013-Frontend-WEB-API-29-320.jpg)
![32
// Событие "mousedown" будет работать на всех устройствах.
ymaps.domEvent.manager.add(
htmlElement,
'mousedown',
callback
);
// Специальные multitouch* события.
ymaps.domEvent.manager.add(
htmlElement,
['multitouchstart', 'multitouchmove', 'multitouchend'],
callback
);](https://image.slidesharecdn.com/random-130528162400-phpapp01/85/DUMP-2013-Frontend-WEB-API-32-320.jpg)
![37
•
•
•
•
// запись
document.cookie = key + '=' + escape(value);
// получение
var cookieData = document.cookie.split('; ');
for(var i = 0, iMax = cookieData.length; i < iMax; i++)
{
if(cookieData[i].substring(0, name.length) == name)
return unescape(cookieData[i].substring(name.length + 1));
}](https://image.slidesharecdn.com/random-130528162400-phpapp01/85/DUMP-2013-Frontend-WEB-API-37-320.jpg)
![39
sharedObject = SharedObject.getLocal("savedData");
ExternalInterface.addCallback("setData", function(data:Object):void
{
// Получение данных из JS
sharedObject.data[key] = data;
sharedObject.flush();
});
// Вызов функции в JS
ExternalInterface.call("initStorage", sharedObject.data);
function initStorage(storageData) {
// Получение данных из AS
}
// Вызов функции в AS
flashElement.setData({ key: value });](https://image.slidesharecdn.com/random-130528162400-phpapp01/85/DUMP-2013-Frontend-WEB-API-39-320.jpg)
![41
var data1 = window.localStorage['key1'];
data1 = data1 ? data1.split('|') : [2, 2];
data1[0] = "1";
try {
window.localStorage['key1'] = data1.join('|');
}
catch (e) {
...
}](https://image.slidesharecdn.com/random-130528162400-phpapp01/85/DUMP-2013-Frontend-WEB-API-41-320.jpg)
![42
var data1 = window.localStorage.getItem('key1');
data1 = data1 ? data1.split('|') : [2, 2];
data1[0] = "1";
try {
window.localStorage.setItem('key1', data1.join('|'));
}
catch (e) {
...
}](https://image.slidesharecdn.com/random-130528162400-phpapp01/85/DUMP-2013-Frontend-WEB-API-42-320.jpg)
DUMP-2013 Frontend - Возможности последних WEB-стандартов в API Яндекс.Карт - Шмыров Всеволод
- 5. 5 <canvas id="example" width="500px" height="500px;"></canvas> var canvasElement = document.getElementById("example"), canvas2DContext = canvasElement.getContext("2d"); ... // Отображение черного прямоугольника. canvas2DContext.fillStyle = "#000000"; canvas2DContext.fillRect(0, 0, canvasElement.width, canvasElement.height); ... // Вывод изображения var img = new Image(); img.onload = function () { canvas2DContext.drawImage(img,10,10); }; img.src = "http://....png";
- 7. 7 <body> ... <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> <polygon id="poly" points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;"> </svg> var polygonElement = document.getElementById('poly'); polygonElement.setAttribute('style', 'fill:#000000;stroke:purple;stroke-width:1;');
- 8. 8 var coords = [[57.72495,63.546779], [54.740667,70.050685], [50.407949,66.798732], [53.291545,61.349513], [53.133264,52.999904]]; var polygon = new ymaps.Polygon([coords], {}, { fillOpacity: 0.2, strokeColor: '#7CE823', fillColor: '#1C7BC9', strokeWidth: 4, draggable: true, geodesic: true });
- 9. 9 • Canvas > SVG • • VML • • HTML-элементы •
- 10. •
- 11. 11
- 14. 14 <ymaps style="position: absolute; left: -162px; top: -243px;" /> : <ymaps style="transform: translate(-162px, -243px);" /> <ymaps style="transform: translate3d(-162px, -243px);" />
- 16. •
- 17. 17 CSS анимация • CSS Animations • CSS Transitions
- 18. 18 div { transition: transform 1s ease-in-out; } .anim { transform: translate(600px, 0px); } http://video.yandex.ru/users/v-shmyroff/view/4/
- 19. 19 http://bit.ly/balloon_accordion clusterer = new ymaps.Clusterer({ clusterBalloonContentBodyLayout: "cluster#balloonAccordionContent" }); http://video.yandex.ru/users/v-shmyroff/view/2/
- 20. 20 div { -webkit-transition: -webkit-transform 1s ease-in-out; -moz-transition: -moz-transform 1s ease-in-out; -ms-transition: -ms-transform 1s ease-in-out; -o-transition: -o-transform 1s ease-in-out; transition: transform 1s ease-in-out; } .anim { -webkit-transform: translate(600px, 0px); -moz-transform: translate(600px, 0px); -ms-transform: translate(600px, 0px); -o-transform: translate(600px, 0px); transform: translate(600px, 0px); }
- 21. 21 Управление префиксами браузеров • LESS • SASS • Stylus • -prefix-free
- 22. 22 • • • •
- 25. 25 .arrow { background: linear-gradient(315deg, #002400 0%, #35A800 100%); opacity: 1; transform: translate(-30px, -65px) rotate(45deg); border-radius: 60px 60px 0px; animation-name: arrow_animation; animation-duration: 1s; } @keyframes arrow_animation { 0% { transform: translate(-30px, -100px) rotate(45deg); } 60% { ... } 100% { transform: translate(-30px, -65px) rotate(45deg); } } http://clck.ru/8drfh var layoutHTML = '<div class="arrow"></div>', layout = ymaps.templateLayoutFactory.createClass(layoutHTML), placemark = new ymaps.Placemark(coords, {}, { iconLayout: layout });
- 27. 27 .someClass ::-webkit-scrollbar { ... } .someClass ::-webkit-scrollbar-track { ... } .someClass ::-webkit-scrollbar-thumb { ... } .someClass ::-webkit-scrollbar-thumb:hover { ... } ... http://bit.ly/balloon_accordion
- 28. •
- 29. 29 navigator.geolocation.getCurrentPosition(onSuccess, onError); function onSuccess(position) { var coords = [position.coords.latitude, position.coords.longitude]; var placemark = new ymaps.Placemark(coords); map.geoObjects.add(placemark); map.setCenter(coords); } function onError(positionError) { console.log(positionError.message); } http://bit.ly/geolocationAPI • Получение местоположение пользователя • Все методы асинхронные • Поддержка современными браузерами (IE9+, Opera10.6+)
- 30. •
- 31. 31
- 32. 32 // Событие "mousedown" будет работать на всех устройствах. ymaps.domEvent.manager.add( htmlElement, 'mousedown', callback ); // Специальные multitouch* события. ymaps.domEvent.manager.add( htmlElement, ['multitouchstart', 'multitouchmove', 'multitouchend'], callback );
- 33. 33 • • • •
- 34. 34 • • •
- 35. •
- 36. 36 <script src="//api-maps.yandex.ru/2.0/?lang=ru-RU&ns=ym" type="text/javascript"> </script> <script type="text/javascript"> ... ym.load('package.map', function() { ... }); ... </script> <script type="text/javascript" src="//api-maps.yandex.ru/2.0/?load=package.map&lang=ru-RU"> </script>
- 37. 37 • • • • // запись document.cookie = key + '=' + escape(value); // получение var cookieData = document.cookie.split('; '); for(var i = 0, iMax = cookieData.length; i < iMax; i++) { if(cookieData[i].substring(0, name.length) == name) return unescape(cookieData[i].substring(name.length + 1)); }
- 38. 38 • • • • • • •
- 39. 39 sharedObject = SharedObject.getLocal("savedData"); ExternalInterface.addCallback("setData", function(data:Object):void { // Получение данных из JS sharedObject.data[key] = data; sharedObject.flush(); }); // Вызов функции в JS ExternalInterface.call("initStorage", sharedObject.data); function initStorage(storageData) { // Получение данных из AS } // Вызов функции в AS flashElement.setData({ key: value });
- 40. 40 • • • • • •
- 41. 41 var data1 = window.localStorage['key1']; data1 = data1 ? data1.split('|') : [2, 2]; data1[0] = "1"; try { window.localStorage['key1'] = data1.join('|'); } catch (e) { ... }
- 42. 42 var data1 = window.localStorage.getItem('key1'); data1 = data1 ? data1.split('|') : [2, 2]; data1[0] = "1"; try { window.localStorage.setItem('key1', data1.join('|')); } catch (e) { ... }
- 43. 43 • • • • • •
- 44. 44 Возможность работать с БД • • • •
- 45. 45 var db = openDatabase('test', '1.0', 'comment', 1024 * 1024); if(db) { db.transaction(function (transaction) { transaction.executeSql('CREATE TABLE IF NOT EXISTS ... '); }); ... db.transaction(function (transaction) { transaction.executeSql('SELECT * FROM ... '); }); }
- 46. 46 var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB, request = indexedDB.open(indexedDBName); request.onsuccess = function (event) { var db = event.result; if(db.version != '1.0) { // Создание базы данных. var setVersionRequest = db.setVersion("1.0"); setVersionRequest.onsuccess = function () { ... }; setVersionRequest.onerror = function () { ... }; } else { ... } db.close(); } request.onerror = function (event) { ... }
- 48. 48