InteractiveMap
1.0.0
مكتبة لاستخدام الخرائط المستندة إلى SVG بشكل تفاعلي في SwiftUI.
Shape SwiftUIملحوظة! لم يصل تحليل SVG إلى شكله النهائي بعد، لذا قد لا يتم تحليل بعض ملفات SVG بشكل صحيح. لكن بقدر ما أستطيع أن أرى، يتم رسم كل خريطة تقريبًا بشكل صحيح. يمكنك رؤية الخرائط التي جربتها في قسم الخرائط.
الخرائط مأخوذة من FSInteractiveMap Repository
يتطلب نظام التشغيل iOS 13+
لا يمكن تثبيت InteractiveMap حاليًا إلا من خلال Swift Package Manager.
| مدير الحزم سويفت أضف عنوان URL للحزمة: |
|
تأثير التحجيم ثلاثي الأبعاد
خريطة زاحف
شاشة اختيار مقاطعة مهماندار
لرسم خريطة svg الخاصة بك في SwiftUI، استخدم InteractiveMap مع إغلاق يأخذ PathData كمعلمة.
يستخدم InteractiveMap InteractiveShape لرسم جميع المسارات المحددة في SVG. ولكنه يحتاج إلى معرفة Path الذي سيتم رسمه، أي أن InteractiveMap { pathData in } يعمل تمامًا مثل ForEach { index in } ويعيد إغلاقًا قابلاً للتكرار ويعيد PathData كمعلمة، والتي تحتوي على جميع المعلومات حول Path s المحددة داخل svg.
import SwiftUI
import InteractiveMap
struct ContentView : View {
var body : some View {
InteractiveMap ( svgName : " tr " ) { pathData in // or just use $0
InteractiveShape ( pathData )
. initWithAttributes ( )
}
}
}يقوم InteractiveMap بتغيير حجم نفسه إلى الإطار المخصص، ويشغل كل المساحة المتوفرة افتراضيًا، ويغير حجم نفسه بشكل مستجيب عند دوران الجهاز.
بدلاً من استخدام السمات الافتراضية، يمكنك تحديد السمات الخاصة بك أيضًا.
InteractiveMap ( svgName : " tr " ) {
InteractiveShape ( $0 )
. initWithAttributes ( . init ( strokeWidth : 2 , strokeColor : . red , background : Color ( white : 0.2 ) ) )
} 
على الرغم من أن .initWithAttributes يوفر الوقت للتخصيص البسيط، إلا أنه ليس قابلاً للتخصيص أو التحرير بدرجة كبيرة.
نظرًا لأن InteractiveShape عبارة عن Shape ، فيمكنك استخدام أي أساليب مع InteractiveShape يمكنك استخدامها مع Shape .
InteractiveMap ( svgName : " tr " ) {
InteractiveShape ( $0 )
. stroke ( Color . cyan )
. shadow ( color : . cyan , radius : 3 , x : 0 , y : 0 )
. background ( InteractiveShape ( $0 ) . fill ( Color ( white : 0.15 ) ) )
} 
PathData عبارة عن Struct يحتوي على جميع المعلومات حول جميع المسارات، في مثال خريطتنا، فهي مناطق ومقاطعات.
لديها 5 متغيرات بداخلها. id path name و boundingBox و svgBounds
id هو المعرف الفريد الذي يتم تحليله مباشرة من SVG
تحتوي معظم ملفات Map SVG (وليس الكل!) على سمة id في الكل في عنصر <path> الخاص بها مثل هذا:
<path ... id="<id>", name="<name>">
يقوم MapParser ، المحدد في MapParser.swift بتوزيع هذا العنصر وتخزينه في بنية PathData .
إذا لم تكن هناك أي سمة id في المسار، فسيقوم MapParser تلقائيًا بإنشاء سلسلة UUID.
ولكن إذا كنت ستقوم بتخزين هذا المعرف في مكان ما، فاعلم أنه يتم إعادة إنشاء سلسلة UUID تلقائيًا في كل مرة يتم فيها رسم InteractiveMap.
import SwiftUI
import InteractiveMap
struct ContentView : View {
@ State private var clickedPath = PathData ( )
var body : some View {
VStack {
Text ( clickedPath . name . isEmpty ? " " : " ( clickedPath . name ) is clicked! " )
. font ( . largeTitle )
. padding ( . bottom , 15 )
InteractiveMap ( svgName : " tr " ) { pathData in // is a PathData
InteractiveShape ( pathData )
. stroke ( clickedPath == pathData ? . cyan : . red , lineWidth : 1 )
. shadow ( color : clickedPath == pathData ? . cyan : . red , radius : 3 )
. shadow ( color : clickedPath == pathData ? . cyan : . clear , radius : 3 ) // to increase the glow amount
. background ( InteractiveShape ( pathData ) . fill ( Color ( white : 0.15 ) ) ) // filling the shapes
. shadow ( color : clickedPath == pathData ? . black : . clear , radius : 5 , y : 1 ) // for depth
. onTapGesture {
clickedPath = pathData
}
. zIndex ( clickedPath == pathData ? 2 : 1 ) // this is REQUIRED because InteractiveShapes overlap, resulting in an ugly appearance
. animation ( . easeInOut ( duration : 0.3 ) , value : clickedPath )
}
}
}
} clickedPath == pathData يقارن بشكل أساسي معرفات PathDatas.
قريباً
قريباً
