360°全景影像移動端類庫--PanoramaGL
介紹
本指南將介紹一個PanoramaGL 0.1類庫的簡單用法,更多的細節請簽出HelloPanoramaGL示例檢視。細節
1如何匯入PanoramaGL類庫?
1.1從原始碼中匯入
(1)下載PanoramaGL_0.1.zip或從程式碼倉庫下載原始碼(2)如果你下載zip檔案然後解壓該檔案
(3)在Eclipse中匯入PanoramaGL專案:
點選“File”選擇“Import”選單;
選擇“General”目錄中的“Existing Projects into Workspace”,點選“Next”按鈕;
點選“Browse”按鈕,選擇PanoramaGL專案資料夾
點選“Finish”按鈕。
(4)右鍵單擊你的專案並選擇“Properties”選項
(5)選擇左側面板“Android”選項
(6)找到右側面板“Library”部分,點選“Add...”按鈕
(7)選擇“PanoramaGL”類庫,點選“OK”按鈕
(8)在屬性視窗的右下角選擇“OK”按鈕表示接受更改
1.2從編譯後的檔案中匯入
(2)解壓zip檔案並複製到你的專案的“libs”資料夾中
(3)下載PanoramaGL 0.1.jar
(4)複製jar檔案到你的專案的“libs”資料夾中
(5)在你的專案中匯入jar檔案:
右鍵單擊你的專案並選擇“Properties”選項;
選擇左側面板“Java Build Path”選項;
選擇“Libraries”選項卡;
點選“Add JARs”按鈕;
在你的專案中選擇“libs/PanoramaGL_0.1.jar”檔案;
點選“OK”按鈕;
在屬性視窗的右下角選擇“OK”按鈕表示接受更改。
2在應用程式中如何使用PanoramaGL?
(2)在“res/raw”資料夾中匯入一個球面影象(如:pano_sphere.jpg)
(3)在Activity中,你需要構建一個全景影象的檢視器,具體做法如下:
繼承PLView類
public class YourActivity extends PLView
在onCreate()方法中載入全景影象注意:如果有必要的話,你也可以從其他方法中載入全景影象或事件。@Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); PLSphericalPanorama panorama = new PLSphericalPanorama(); panorama.setImage(this.getCurrentGL(), PLImage.imageWithBitmap(PLUtils.getBitmap(this, R.raw.pano_sphere))); this.setPanorama(panorama); }
3簡單JSON協議
同樣,你可以使用JSON協議載入全景影象。注意:在該版本中,JSON協議被限制只處理本地檔案。
3.1原始碼
this.load(new PLJSONLoader(this, "res://raw/json_spherical"));
注意:在我的應用程式的“res/raw”資料夾中有一個名為“json_spherical.data”的檔案,可以使用這段程式碼載入。或this.load(new PLJSONLoader(this, "file:///sdcard/files/json_spherical.data"));
注意:在Android裝置的“/sdcard/files”資料夾中有一個名為“json_spherical.data”的檔案,可以使用這段程式碼載入。3.2JSON協議
{
"urlBase": "file:///sdcard/files", //URL base where the files are
//The options are res:// for application resources and file:// for file system (this feature will be improved to support the http protocol)
"type": "spherical", //Panorama type: [spherical, spherical2, cubic, cylindrical]
"sensorialRotation": false, //Automatic rotation using sensors [true, false] <Optional>
"scrolling": //Scrolling section <Optional>
{
"enabled": false //Enable scrolling feature [true, false] <Optional>
},
"inertia": //Inertia section <Optional>
{
"enabled": false, //Enable inertia feature [true, false] <Optional>
"interval": 3 //Inertia's interval in seconds <Optional>
},
"accelerometer": //Accelerometer section <Optional>
{
"enabled": false, //Enable the accelerometer feature [true, false] <Optional>
"interval": 0.033, //Update interval of accelerometer (this value must be calculated as 1/frequency) <Optional>
"sensitivity": 10.0, //Sensitivity of the accelerometer <Optional>
"leftRightEnabled": true, //Enable the direction of movement with the accelerometer (left/right) <Optional>
"upDownEnabled": false //Enable the direction of movement with the accelerometer (up/down) <Optional>
},
"images": //Panoramic images section
//A property can be a name e.g. preview.jpg, preview or URL e.g. file:///sdcard/files/preview.jpg, res://raw/preview
//if a property only have a name, the real path will be the urlBase + image name
{
"preview": "preview.jpg", //Preview image name or URL (this option will be used with http protocol) <Optional>
"image": "pano.jpg" //Panoramic image name or URL for spherical, spherical2 and cylindrical panoramas
"front": "front.jpg", //Front image name or URL for cubic panorama (only use with cubic panorama)
"back": "back.jpg", //Back image name or URL for cubic panorama (only use with cubic panorama)
"left": "left.jpg", //Left image name or URL for cubic panorama (only use with cubic panorama)
"right": "right.jpg", //Right image name or URL for cubic panorama (only use with cubic panorama)
"up": "up.jpg", //Up image name or URL for cubic panorama (only use with cubic panorama)
"down": "down.jpg" //Down image name or URL for cubic panorama (only use with cubic panorama)
},
"camera": //Camera settings section <Optional>
{
"vlookat": 0, //Initial vertical position [-90, 90]
"hlookat": 0, //Initial horizontal position [-180, 180]
"atvmin": -90, //Min vertical position [-90, 90]
"atvmax": 90, //Max vertical position [-90, 90]
"athmin": -180, //Min horizontal position [-180, 180]
"athmax": 180 //Max horizontal position [-180, 180]
},
"hotspots": [ //Hotspots section (this section is an array of hotspots) <Optional>
{
"id": 1, //Hotspot identifier (long)
"atv": 0, //Vertical position [-90, 90]
"ath": 0, //Horizontal position [-180, 180]
"width": 0.08, //Width
"height": 0.08, //Height
"image": "hotspot.png" //Image name or URL
}
]
}
3.3看到
PLJSONLoader類和PLView載入方法。json_spherical.data、json_spherical2、json_cylindrical.data和json_cubic.data都位於HelloPanoramaGL示例的“res/raw”資料夾中。
4更多資訊
想獲得更多資訊,請簽出HelloPanoramaGL示例,該示例執行在Android2.x或以上版本。
5效果圖
相關推薦
360°全景影像移動端類庫--PanoramaGL
介紹 本指南將介紹一個PanoramaGL 0.1類庫的簡單用法,更多的細節請簽出HelloPanoramaGL示例檢視。細節 1如何匯入PanoramaGL類庫? 1.1從原始碼中匯入 (1)下載PanoramaGL_0.1.zip或從程式碼倉庫下載原始
滴滴 Web 移動端元件庫 cube-ui 開源
今天看到滴滴web移動端元件庫cube-ui開源了,順便拿過來記錄下,方便今後使用 字號 滴滴 WebApp 團隊在去年底用 Vue.js 2.0 對業務進行重構,並開發了一套移動端元件庫 cube-ui 支撐業務的開發。經過了一年多的業務考驗,cube-ui 也日趨成熟,而且我
移動端UI庫推薦
前言:最近手裡的專案有有一些關於移動端的開發,經常被安卓,IOS適配等問題折磨,所以收集了一些用於移動端的輕量級UI庫,可以在開發中免去大量的前端除錯時間。 SUI Mobile 是一套基於 Framework7 開發的UI庫。它非常輕量、精美,只需要引入我們的CDN檔
Mint-UI基於Vue.js的移動端元件庫
原文地址:https://cloud.tencent.com/developer/doc/1273Mint-UI基於Vue.js的移動端元件庫,它的使用方法類似於Element-UI。 目錄 Mint UI 使用文件 npm 安裝 CDN Hello world 快速上手
輕量、可靠的移動端元件庫 Vant 1.0 正式釋出
說實話,最近已經快一年沒有接觸過原生開發了,隨著接觸開發微信小程式,接觸 Vue 等,也越來越喜歡這種 JS 前端開發,感覺特別好玩。不管是 Vue ,還是 React ,還是微信小程式開發,其實都是大同小異,開發方式也都是響應式的開發,餓了麼開源的 Eleme
Vue 移動端UI庫----Mint-UI的Swiper元件的坑
使用步驟: 1.安裝:npm install mint-ui -S 2.引入元件 // 完整引入 import Vue from 'vue'; import Mint from 'mint-ui'; import "mint-ui/lib/style.cs
C/C++ XMPP/Jabber 客戶端類庫對比/點評
================ gloox ================ Ans. 老牌庫,推薦 gloox是一個穩定功能完整的XMPP客戶端庫, 使用ANSI C++編寫, 使用它編寫標準客戶非常容易, 並能將Jabber/XMPP功能整合到現有的應用程式中, gloox遵循GNU GPL許可協
Mint UI —— 基於 Vue.js 的移動端元件庫
Mint UI由餓了麼前端團隊推出的 Mint UI 是一個基於 Vue.js 的移動端元件庫。自 6 月初開源以來,根據社群和團隊內部的反饋,修復了一些 bug 並新增了部分元件,於本週釋出了 0.2.0 版本。本文介紹如何從零開始構建一個使用 Mint UI 的 Vue 專案。腳手架隨著 Vue.js 的
Mint UI -- 基於Vue.js的移動端元件庫
簡介: 由餓了麼前端團隊推出的Mint UI是一個基於Vue.js 的移動端元件庫。 Mint UI安裝: 本小主使用的是官方提供的vue-cli搭建的一個vue專案的腳手架。在vue專案搭建完成之後, 接下來安裝MintUI:npm i mint-
xui移動js類庫介紹
與Sencha Touch或者jQuery Mobile那樣試圖構建一個通用的解決方案目的不同,xui 是一個用於移動 Web 應用的輕量,極簡,高度模組化的框架。 它之所以非常輕量的原因是,它只支援移動瀏覽器,所有跨瀏覽器支援的程式碼都被剝離。它面向大多數主流移動 Web
關於移動端開發時iOS上滑屏卡頓的問題,以及電話類數字的樣式失控問題
img 頁面 通話 tips rem span cti 解法 並不是 寫在前面的話: tips:寫移動的時候,那些頭部需要固定顯示在顯示屏頂部的,通常在PC端我會用fixed來寫。但是,在移動端,這並不是一個好方法,因為彈出輸入小鍵盤的時候,會造成fixed 的元素偏移
數字故宮(360全景+紀錄片+數據庫+公開課)
像素 紀錄片 mooc name nbsp amp npm 得到 color 一、360全景(不分先後,下同) 【全景故宮】http://mob.visualbusiness.cn/gugong-pc/v1.0.52/index.html 【AirPano故宮全景】http
JS判斷設備類型跳轉至PC端或移動端相應頁面
移動 cat agen MQ useragent AD phone div agent if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry
支援移動端的前端圖片壓縮庫
目錄 支援移動端的前端圖片壓縮庫 說明 使用方法 選項 例子 接收圖片路徑壓縮 接收 `file` 物件壓縮 獲取 `base64` 獲取 `blob`
移動端:active偽類無效的解決方法
:active偽類常用於設定點選狀態下或其他被啟用狀態下一個連結的樣式。最常用於錨點<a href="#">這種情況,一般主流瀏覽器下也支援其他元素,如button等。在多按鍵的滑鼠系統中,:active只適用於主按鍵,目前的大部分情況都是左鍵即主鍵。 該偽類下定義的CSS樣式只在按下滑
基於 Vue.js 的移動端組件庫mint-ui實現無限滾動加載更多
== spi dex try for ike country ble 頁面 通過多次爬坑,發現了這些監聽滾動來加載更多的組件的共同點, 因為這些加載更多的方法是綁定在需要加載更多的內容的元素上的, 所以是進入頁面則直接觸發一次,當監聽到滾動事件之後,繼續加載更多, 所以對於
vue-cli3.0結合lib-flexible、px2rem實現移動端適配,完美解決第三方ui庫樣式變小問題 vue-cli 3.0 搭建專案流程
公司最近做的一個移動端專案從搭框架到前端開發由我獨立完成,以前做移動端適配用的媒體查詢,這次想用點別的適配方案,然後就採用了vue-cli3.0結合lib-flexible、px2rem實現移動端適配的方案,開發過程中也遇到一些坑,自己選的方案自己填坑吧。以下記錄我的專案框架搭建及填坑方案。 搭建可以參考我
Vux 一個湊合的 Vue.js 移動端 UI 元件庫——Vux示例
在上三篇文章中,提到的都是mint-ui,是因為我第一個用到的就是它,所以就把它先寫出來了。 在工作之餘,發現了vux-ui也是很不錯的,就研究了一下,它的功能和mint-ui差不多,不過在vux-ui裡面多了語言的翻譯,所以弄得很是頭疼,最後花了兩天時間算是弄出來了,但是在語言的切換上還是有點小
Vant 1.4.8 釋出,輕量級移動端 Vue 元件庫
Vant 1.4.8 已釋出,更新內容如下: Improvements Sku: 新增 hide-quota-text 屬性 #2216 ImagePreview: 新增 asyncClose 屬性 #2198 ImagePreview: 新增
一個簡單的腳手架drop-cli、vue的元件庫、移動端架構和pc管理後臺模版
鑑於自己的經驗和以往做過的專案,為了提高工作效率,特意整理了一下專案模版、vue元件庫等模版並新增到一個自己封裝的腳手架drop-cli中。不喜勿噴! drop-cli 一個簡單的腳手架,可新增不同的模版/框架 $ npm inst