直屏旗艦來了 iQOO 12和K70 Pro同臺競技
旗艦機基本上使用的都是雙曲面屏幕，這就讓很多喜歡直屏的愛好者在苦等一款直屏旗艦，這次，你們等到了。據博主數碼閑聊站帶來的最新爆料稱，Redmi下代旗艦K70 Pro和iQOO 12兩款手
今年夏天，我計劃帶著我的孩子出國。
她很興奮。
在此之前，我和妻子決定大肆宣傳一下這次的飛行之旅，主要是為了確保女兒能安穩地度過3小時的飛行時間。
可能是我們宣傳有點過頭了，以至于當我們不得不坐出租車去機場時，我蹣跚學步的孩子感到震驚——她原本以為會從我們家直接走上飛機。
我們登機后，發生了一件令人難以置信的事情。
原來，當機組人員發現你和一個癡迷于飛機的可愛小孩在一起時，他們會邀請你們去看看駕駛艙。
這激發了我女兒對飛機的癡迷。
從那之后，她一直要求我在天上為她尋找飛機，當我為她找到一架飛機時，她很高興。
上周，我們在花園里待了一個小時，她坐在我的肩上，看著飛機一架接一架地在夜空中閃爍。
后來我找到了FlightRadar24，它能顯示覆蓋在地圖上的飛機位置，但美中不足的是，我必須自己調整方向。
但是，對于一個孩子來說，她可能并不真正理解或關心地圖是什么。
所以我們有了繼續解決的新問題，比如方向，比如可用性。
作為一名非物理移動技術主管，我確實不知道從哪里開始為孩子打造一匹搖馬，但沒有什么能阻止我把這個想法變成一個很酷的應用程序。
通過研究制定的要求：
這些要求導致了一些構成概念驗證的活動部分：
對于圖標，我選擇了一幅女兒戴著可愛飛行員帽的卡通畫。所以我們已經有了應用程序名稱：Aviator。
第一個關鍵差異化產品要求是保持方向。
為了使用便利，屏幕上的對象需要與其現實生活中的位置相對應。因此，當用戶旋轉時，屏幕本身也會旋轉并保持指向北。
final class LocationManager: CLLocationManager, CLLocationManagerDelegate { static let shared = LocationManager() private(set) var rotationAngleSubject = CurrentValueSubject<Double, Never>(0) override private init() { super.init() requestWhenInUseAuthorization() delegate = self startUpdatingHeading() } func locationManager(_ manager: CLLocationManager, didUpdateHeading newHeading: CLHeading) { rotationAngleSubject.send(-newHeading.magneticHeading) }}同時，為了獲得好看的指南針效果，我還繪制了一組隨旋轉角度變化的矩形。
@State private var rotationAngle: Angle = .degrees(0)var body: some View { ZStack { ForEach(0..<36) { let angle = Angle.degrees(Double($0 * 10)) + rotationAngle Rectangle() .frame(width: $0 == 0 ? 16 : 8, height: $0 == 0 ? 3 : 2) .foregroundColor($0 == 0 ? .red : .blue) .rotationEffect(angle) .offset(x: 120 * cos(CGFloat(angle.radians)), y: 120 * sin(CGFloat(angle.radians))) .animation(.bouncy, value: rotationAngle) } } .onReceive(LocationManager.shared.rotationAngleSubject) { angle in rotationAngle = Angle.degrees(angle) }}看起來相當不錯，而且也完美地響應了我的真實位置。
可能你會注意到一個有趣的視覺故障，因為動畫邏輯將0度和360度視為單獨的數字——當我經過正北時，所有矩形都會旋轉。
熱身結束，接下來是重要的部分。
OpenSky Network API允許用戶給定一系列緯度和經度，通過一個簡單的請求返回該范圍內的本地航班數組。這意味著，只需將其粘貼到瀏覽器中，即可找出我可以看到的頭頂上空的航班數據。
REST API記錄良好，但數據按順序顯示為列表屬性。
我們需要去解碼它，讓其按順序從JSON響應中解析出字段。
struct Flight: Decodable { let icao24: String let callsign: String? let origin_country: String? let time_position: Int? let last_contact: Int let longitude: Double let latitude: Double // ... init(from decoder: Decoder) throws { var container = try decoder.unkeyedContainer() icao24 = try container.decode(String.self) callsign = try? container.decode(String?.self) origin_country = try container.decode(String.self) time_position = try? container.decode(Int?.self) last_contact = try container.decode(Int.self) longitude = try container.decode(Double.self) latitude = try container.decode(Double.self) // ... }}我們還可以編寫一個簡單的API，根據用戶的位置坐標執行請求。
final class FlightAPI { func fetchLocalFlightData(coordinate: CLLocationCoordinate2D) async throws -> [Flight] { let lamin = String(format: "%.1f", coordinate.latitude - 0.25) let lamax = String(format: "%.1f", coordinate.latitude + 0.25) let lomin = String(format: "%.1f", coordinate.longitude - 0.5) let lomax = String(format: "%.1f", coordinate.longitude + 0.5) let url = URL(string: "https://opensky-network.org/api/states/all?lamin=/(lamin)&lamax=/(lamax)&lomin=/(lomin)&lomax=/(lomax)")! let data = try await URLSession.shared.data(from: url).0 return try JSONDecoder().decode([Flight].self, from: data) }}這樣飛行數據就被很好地解析為內存中對象的數組，也變得易于處理。
如何實際測試飛機圖紙的準確性？
我們可以在這些所有東西下面畫一張地圖：AviatorView頂部的指南針，繪制到屏幕上的飛機，以及樸素的SwiftUI視圖。
@State private var cameraPosition: MapCameraPosition = .camera(MapCamera( centerCoordinate: CLLocationCoordinate2D(latitude: 51.0, longitude: 0.0), distance: 100_000, heading: 0))var body: some View { ZStack { Map(position: $cameraPosition) { } airplanes compass }}這是我第一次熬夜跑出來的結果，與作為事實來源的FlightRadar進行比較。
可以看到，天空中飛機的數量和集群看起來都差不多，但位置卻相差甚遠。忽然，我靈光一閃，原來還需要使用注釋在地圖上繪制飛機。
這個想法我已經醞釀了一整天：我們使用地圖，然后在其精確地理位置的頂部繪制飛機形狀的注釋，最終，我想找到一種方法來隱藏實際地圖，并僅將飛機顯示為雷達位置上的標記。
這應該會給我們帶來我們想要的很酷的、完全定向的雷達效果。
在iOS 17中，在地圖上繪制注釋非常簡單。
import MapKitimport SwiftUIstruct FlightMapView: View { @Binding var cameraPosition: MapCameraPosition let flights: [Flight] var body: some View { Map(position: $cameraPosition) { planeMapAnnotations } .mapStyle(.imagery) .allowsHitTesting(false) }}在這里，出于雷達的目的，我們希望防止命中測試——即我不希望地圖是交互式的。在構想中，地圖是不可見的，用戶只能看到航班及其位置。
定位之后，尺寸調整是下一個核心問題，現有的解決方案根本無法很好地處理這個問題。
我使用飛行高度在地圖注釋中添加了一些簡單的對數縮放，以便更高的飛機在屏幕上顯得更大。此外，我使用飛機的真實屬性，結合核心位置中的用戶方向，來顯示飛機面向正確的方向。
@State private var rotationAngle: Angle = .degrees(0)private var planeMapAnnotations: some MapContent { ForEach(flights, id: /.icao24) { flight in Annotation(flight.icao24, coordinate: flight.coordinate) { let rotation = rotationAngle.degrees + flight.true_track let scale = min(2, max(log10(height + 1), 0.5)) Image(systemName: "airplane") .rotationEffect(.degrees(rotation)) .scaleEffect(scale) } } .tint(.white) }}現在是進行終極測試的時候了。
我和女兒一起去看飛機，現在我們有了真實的地圖注釋，能在地圖上顯示用戶的位置和方向。最重要的是，它能夠準確地找到飛機！
這獲得了巨大成功，因為我們在這上面找到了飛機。
初步測試還得出了兩條重要信息。
首先，縮放邏輯是不正確的?？纯磦惗爻鞘袡C場地面上的小飛機。由于應用程序的重點是定位天空中的飛機，因此我們需要反轉縮放比例，較低的平面必須顯示得更大，因為我們是用眼睛來發現它們的。
其次，我的孩子不關心地圖，只關心飛機。如果我想消除噪音并專注于發現飛機，我需要刪除地圖，并開始建造我的雷達！
我輕松地修復了飛機的縮放邏輯。
經過一番嘗試和錯誤后，為了查看屏幕上看起來不錯的內容，并給出合理的尺寸分布，我選擇了縮放：
min(2, max(4.7 - log10(flight.geo_altitude + 1), 0.7))這些縮放來自我的本地開銷掃描：
Scale: 1.0835408863965839Scale: 0.8330645861650874Scale: 1.095791123396205Scale: 1.1077242935783653Scale: 2.0Scale: 1.4864702267977097Scale: 0.7我幾乎準備好建造我所設想的雷達了，但是出現了一個問題。
開源OpenSky API不斷超時，返回502錯誤，或者有時生成帶有空數據的200響應。
這其實也不是問題，畢竟這不是個企業級應用程序，而且這個API不需要我花任何費用。他們沒有SLA，我也覺得自己沒有資格獲得SLA。不過為了幫助提高客戶端的穩健性，我在API調用中實現了一些基本的重試邏輯：
private func fetchFlights(at coordinate: CLLocationCoordinate2D, retries: Int = 3) async { do { try await api.fetchLocalFlightData(coordinate: coordinate) } catch { if retries > 0 { try await fetchFlights(at: coordinate, retries: retries - 1) } }}第二天，API運行良好，除了某些高流量時刻外。
最重要的降噪任務是使實際地圖不可見。沒有這個雷達就無法工作。
我能夠使用MapPolygon來做到這一點，表面上設計這樣你就可以放置疊加層來突出顯示地圖的各個部分。但我想用它來隱藏除注釋之外的所有內容。
struct FlightMapView: View { var body: some View { Map(position: $cameraPosition) { planeMapAnnotations MapPolygon(overlay(coordinate: coordinate)) } .mapStyle(.imagery) .allowsHitTesting(false) } // ... private func rectangle(around coordinate: CLLocationCoordinate2D) -> [CLLocationCoordinate2D] { [ CLLocationCoordinate2D(latitude: coordinate.latitude - 1, longitude: coordinate.longitude - 1), CLLocationCoordinate2D(latitude: coordinate.latitude - 1, longitude: coordinate.longitude + 1), CLLocationCoordinate2D(latitude: coordinate.latitude + 1, longitude: coordinate.longitude + 1), CLLocationCoordinate2D(latitude: coordinate.latitude + 1, longitude: coordinate.longitude - 1) ] } private func overlay(coordinate: CLLocationCoordinate2D) -> MKPolygon { let rectangle = rectangle(around: coordinate) return MKPolygon(coordinates: rectangle, count: rectangle.count) }}這種方法很有效！
我們現在可以看到飛機，但看不到地圖，就像我們想要的那樣。
最關鍵的是，蘋果將疊加層設計為位于地圖頂部、注釋下方，如果他們采取其他方式，我女兒的新玩具就會跛行。
核心需求的最后一部分是雷達視圖，這本質上是一組直線、同心圓和20度的旋轉角梯度。
難不倒我。
經過三個晚上的辛苦工作，女兒終于開始對我創造的玩具表現出一些興趣。
我們已經證明了這個概念，并構建了一個 MVP，可以實現我們設定的核心初始目標。
現在可以考慮把它放到App Store上了。
當然在此之前還需要進行其他的優化。
比如讓雷達有360度寬角漸變，從綠色，到透明，到透明，到透明，再到黑色。
private var radarLine: some View { Circle() .fill( AngularGradient( gradient: Gradient(colors: [ Color.black, Color.black, Color.black, Color.black, Color.black.opacity(0.8), Color.black.opacity(0.6), Color.black.opacity(0.4), Color.black.opacity(0.2), Color.clear, Color.clear, Color.clear, Color.clear, Color.clear, Color.clear, Color.clear, Color.clear, Color.clear, Color.clear, Color.clear, Color.green]), center: .center, startAngle: .degrees(rotationDegree), endAngle: .degrees(rotationDegree + 360) ) ) .rotationEffect(Angle(degrees: rotationDegree)) .animation(.linear(duration: 6).repeatForever(autoreverses: false), value: rotationDegree)}除此之外，我添加了CRT屏幕效果和電視掃描線，使應用程序看起來就像是在舊雷達掃描儀上繪制的。
#include <metal_stdlib>using namespace metal;[[ stitchable ]] half4 crtScreen( float2 position, half4 color, float time) { if (all(abs(color.rgb - half3(0.0, 0.0, 0.0)) < half3(0.01, 0.01, 0.01))) { return color; } const half scanlineIntensity = 0.2; const half scanlineFrequency = 400.0; half scanlineValue = sin((position.y + time * 10.0) * scanlineFrequency * 3.14159h) * scanlineIntensity; return half4(color.rgb - scanlineValue, color.a);}我還創建了一個視圖修改器，可以將CRT效果應用到喜歡的任何視圖。
extension View { func crtScreenEffect(startTime: Date) -> some View { modifier(CRTScreen(startTime: startTime)) }}struct CRTScreen: ViewModifier { let startTime: Date func body(content: Content) -> some View { content .colorEffect( ShaderLibrary.crtScreen( .float(startTime.timeIntervalSinceNow) ) ) }}
目前該應用程序已經上線了App Store。
同時下個版本的新功能也已經在構想中了，包括但不限于：
本文鏈接：http://www.www897cc.com/showinfo-26-34927-0.html孩子喜歡飛機，于是我給她做了一個雷達
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： C++數據與量值是如何被組織的？
下一篇： 理解C++之構造函數
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號