Benamkan teks dinamik dan paparan berpusat di laluan SVG

1. Cabaran untuk membenamkan teks di laluan SVG

Dalam SVG (grafik vektor berskala), elemen digunakan untuk menentukan bentuk kompleks seperti kawasan peta atau ikon tersuai. Pemaju sering perlu memaparkan maklumat teks dinamik di dalam laluan ini, seperti nama rantau, nilai berangka, dan lain -lain. Walau bagaimanapun, meletakkan teks secara langsung di dalam tag , atau menggunakan tag , tidak memenuhi keperluan paparan teks yang berterusan. Tag biasanya digunakan sebagai tooltip dan hanya akan dipaparkan apabila tetikus melayang, dan teks tidak dapat dipaparkan secara kekal.

Dalam struktur HTML yang asal, tag digunakan untuk memaparkan maklumat laluan, tetapi ini terhad kepada prompt apabila tetikus berlegar:

 <div class="main">
    <svg id="map" class="me -svg" viewbox="10 -25 1000 870">
        <path class="pilih" item mydata null>
             di sini hanya digunakan sebagai alat tool->
            <tajuk> {{item.title}},
                {{item.size}} 
        </tajuk></path>
    </svg>
</div>

Untuk merealisasikan paparan pemastautin dan pengikatan teks yang dinamik, kita perlu mengadopsi mekanisme rendering teks asli SVG.

2. Penyelesaian Teras: Gunakan SVG Elements

SVG menyediakan unsur -unsur khas untuk membuat teks. Dengan meletakkan elemen dalam bekas

2.1 Penggunaan Asas dan Pusat Mendatar Elemen

Elemen mentakrifkan kedudukan permulaan teks melalui atribut X dan Y. Secara lalai, teks diselaraskan dari titik (x, y) ke kanan (teks-anchor: mula). Untuk mencapai pusat teks mendatar, kita perlu menetapkan harta teks ke pertengahan. Dengan cara ini, titik tengah teks akan diselaraskan dengan koordinat x yang ditentukan.

Berikut adalah contoh menggunakan elemen untuk memaparkan teks dinamik dan pusat secara mendatar:

 <div class="main">
    <svg id="map" class="me -svg" viewbox="10 -25 1000 870">
        <ng-container item mydata>
            <path class="pilih" null>
                 sebagai kebolehcapaian atau tip tambahan->
                <tajuk> {{item.title}}, {{item.size}} 
            </tajuk></path>
             elemen untuk memaparkan teks dinamik->
            <text gaya="Teks-Anchor: Middle; Font-Size: 10px; Isi: Black;">
                {{item.title}}, {{item.size}}
            
        </text></ng-container>
    </svg>
</div>

Dalam kod di atas, kami membuat penambahbaikan berikut:

• Gunakan NG-Container untuk membungkus laluan dan teks dalam gelung supaya laluan dan teks yang sepadan diberikan untuk setiap item data.
• Menambah atribut x dan y ke elemen , dan nilai -nilai ini akan diperoleh secara dinamik dari item.textx dan item.texty.
• Tetapkan gaya = "Teks-Anchor: Middle;" untuk mencapai pusat teks mendatar.
• Menambah saiz fon dan isi gaya untuk mengawal penampilan teks.

2.2 Data Dinamik Mengikat

Untuk membuat kandungan teks secara dinamik, kita perlu menentukan struktur data dalam fail TypeScript komponen dan termasuk koordinat X dan Y yang diperlukan oleh teks.

 /
  ID: String;
  Teks: String;
  Tajuk: String;
  Saiz: nombor;
  Mycolor: String;
  MyCheck: String;
  D: String; // data laluan svg
  TextX?: Nombor; // teks x koordinat texty?: Nombor; // teks y koordinat}

// Sampel data myData: DataAnterFace [] = [{
  Id: "dalam", "teks": "lalai", "tajuk": "India", saiz: 20, "mycolor": "lalai", "mycheck": 'true', 
  "D": "M 736.102,436.797 ...", // Data Laluan Lengkap "TextX": 730, "Texty": 400 // Koordinat Teks Assumption}, {
  ID: "NP", "Teks": "lalai", "tajuk": "Nepal", Saiz: 70, "Mycolor": "Default", "MyCheck": 'True', 
  "D": "M 722.979,381.675 ...", // Data Laluan Lengkap "TextX": 715, "Texty": 385 // Koordinat Teks Assumption}, {
  Id: "lk", "teks": "lalai", "tajuk": "sri lanka", saiz: 20, "mycolor": "lalai", "mycheck": 'false', 
  "D": "M 700.169,435.179 ...", // data laluan lengkap "textX": 705, "texty": 440 // koordinat teks asumsi}];

Nota: Koordinat TextX dan Texty di sini adalah nilai sampel. Dalam aplikasi praktikal, koordinat ini perlu dikira dengan tepat berdasarkan geometri setiap laluan untuk memastikan bahawa teks itu benar -benar berada di tengah -tengah jalan.

3. Strategi kedudukan teks

Meletakkan teks tepat di tengah -tengah laluan SVG kompleks adalah cabaran utama. Sederhana X dan Y Properties hanya boleh menentukan titik permulaan asas teks.

3.1 Dapatkan koordinat kedudukan teks

Untuk segi empat tepat atau bulatan yang mudah, pengiraan titik tengah agak mudah. Tetapi untuk laluan SVG bentuk sewenang -wenangnya, mendapatkan pusat geometri (centroid) atau pusat visual memerlukan logik yang lebih kompleks.

Kaedah kedudukan yang dicadangkan:

1. Koordinat Pra-Menghitung dan Store: Cara yang paling langsung adalah untuk mengira dan menyimpan koordinat TextX dan Texty untuk setiap laluan di antara muka MyData. Ini boleh dilakukan pada masa penjanaan data atau dibantu oleh alat luar talian.

2. Pengkomputeran Runtime (Lanjutan):

   • Gunakan getBbox (): Dalam NgafterViewinit komponen sudut atau cangkuk kitaran hayat yang sesuai, anda boleh mendapatkan kotak terikat elemen laluan SVG melalui JavaScript dan kemudian mengira titik tengahnya.

      import {afterviewinit, komponen, elementref, viewchildren, querylist} dari '@angular/core';
     
     @Component ({
       pemilih: 'app-svg-map',
       templateurl: './svg-map.component.html',
       gayaurls: ['./svg-map.component.css']
     })
     kelas eksport svgmapcomponent melaksanakan afterViewInit {
       @ViewChildren ('Pathref') PathRefs!: QueryList <elementref>>;
     
       myData: DataAnterFace [] = [ / * ... data anda ... * /];
     
       ngafterViewInit () {
         this.pathrefs.foreach ((PathelementRef, index) => {
           const Path = PathelementRef.NativeElement;
           const bbox = path.getBbox (); // Dapatkan kotak terikat dari jalur const Centerx = bbox.x bbox.width / 2;
           const center = bbox.y bbox.height / 2;
     
           // Kemas kini Koordinat Teks di MyData // NOTA: Mengubah secara langsung item dalam gelung boleh menyebabkan masalah prestasi atau melihat isu kemas kini // Pendekatan yang lebih baik adalah untuk membuat array myData baru atau menggunakan trackby
           this.mydata [index] .textx = centerX;
           this.mydata [index] .texty = centery;
         });
         // Pencetus Pandangan Kemas kini (jika diperlukan)
         this.mydata = [... this.mydata]; 
       }
       // ... kaedah lain ...
     }</elementref>

     Dalam HTML, anda perlu menambah pembolehubah rujukan templat ke elemen laluan, seperti #PathRef.

   • Pusat geometri yang lebih tepat: Untuk poligon bukan cembung atau laluan kompleks, pusat kotak sempadan mungkin bukan pusat visual yang optimum. Ini mungkin memerlukan algoritma geometri yang lebih kompleks untuk mengira "tiang" centroid atau laluan sebenar.

3.2 Pelarasan Pusat Menegak

Sebagai tambahan kepada teks-anchor untuk pusat mendatar, SVG juga menyediakan atribut dominan atau atribut DY untuk menyesuaikan penjajaran menegak teks.

• dominan-baseline = "tengah": Cuba menyelaraskan pusat menegak teks dengan koordinat y.
• Dy Property: Secara manual menyesuaikan diri dengan mengimbangi teks. Sebagai contoh, dy = "-0.3em" boleh menyempurnakan teks ke atas.

 <text gaya="Teks-Anchor: Middle; Dominan-Baseline: Middle; Font-Size: 10Px; Isi: Black;">
    {{item.title}}, {{item.size}}
</text>

4. Mengendalikan paparan teks jalur kecil

Apabila jalannya sangat kecil dan tidak dapat menampung teks lengkap, memaparkan teks secara langsung di dalam jalan boleh menyebabkan limpahan teks atau sukar dibaca. Pada ketika ini, strategi berikut boleh dipertimbangkan:

1. Rendering bersyarat: Tentukan sama ada untuk memaparkan teks secara langsung di dalam jalan berdasarkan saiz jalan (contohnya, melalui item.Size Property atau Kawasan Kotak Terikat yang dikira).
2. Penunjuk luaran: Untuk laluan bersaiz kecil, teks boleh dipaparkan di luar dan anak panah atau garis menunjuk ke laluan yang sepadan.

 <ng-container item mydata>
    <path class="pilih" null>
        <tajuk> {{item.title}}, {{item.size}} 
    </tajuk></path>

    
    <text item.size> 50" 
          [attr.x] = "item.textx" 
          [attr.y] = "item.texty" 
          gaya = "Teks-Anchor: Middle; Dominan-Baseline: Middle; Font-Size: 10Px; Isi: Black;">
        {{item.title}}
    

    
    <ng-container item.size>
        
        
        <line stroke="kelabu" stroke-width="1" marker-end="url (#Arrowhead)"> </line>
        <text gaya="Teks-Anchor: Mula; Saiz Font: 8px; Isi: Grey;">
            {{item.title}} ({{item.size}})
        
    </text></ng-container>
</text></ng-container>


<defs>
    <marker id="arrowhead" markerwidth="10" markerheight="7" refx="0" refy="3.5" berorientasikan="auto">
        <polygon point="0 0, 10 3.5, 0 7" fill="Grey"></polygon>
    
</marker></defs>

Nota: item.PathCenterx, item.PathCentery, item.indicatorx, item.indicatory Dalam contoh di atas juga perlu diperoleh melalui pengiraan atau pratetap. Marker-end = "URL (#Arrowhead)" digunakan untuk menambah anak panah pada akhir garisan.

5. Langkah berjaga -jaga dan amalan terbaik

• Pengoptimuman Prestasi: Jika lukisan SVG mengandungi sejumlah besar laluan dan teks, ia boleh menjejaskan prestasi rendering. Pertimbangkan menggunakan fungsi TrackBy untuk mengoptimumkan gelung *ngfor untuk mengurangkan operasi DOM yang tidak perlu.
• Kebolehcapaian: Walaupun dengan elemen , ia masih merupakan kebiasaan yang baik untuk memastikan elemen , yang dapat memberikan maklumat tambahan untuk pembaca skrin.
• Kawalan Gaya: Gunakan CSS untuk mengawal fon, warna, saiz, penjajaran, dan lain -lain teks, yang boleh mencapai pengurusan gaya yang lebih fleksibel. Contohnya:

   .me-svg teks {
      font-family: arial, sans-serif;
      saiz font: 10px;
      Isi: #333;
      /* Gaya lain*/
  }

• Reka bentuk responsif: Pastikan kotak viewbox dan preserveaspectratio SVG ditetapkan dengan betul supaya perkadaran yang betul dan susun atur grafik dan teks dikekalkan pada saiz skrin yang berbeza.
• Interaksi Pengguna: Jika teks itu sendiri juga perlu bertindak balas kepada peristiwa klik, pertimbangkan membungkus teks dalam elemen , atau menambah acara mendengar secara langsung pada elemen .

Meringkaskan

Benamkan teks dinamik dalam laluan SVG dan melaksanakan paparan berpusat, terutamanya bergantung pada atribut elemen dan teks-anchor SVG. Dengan mengira dengan tepat koordinat X dan Y teks dan menggabungkan atribut baseline dominan, kedudukan yang baik dari teks dapat dicapai. Untuk laluan bersaiz kecil, penunjuk bersyarat dan penunjuk luaran boleh digunakan untuk meningkatkan pengalaman pengguna. Berikutan amalan terbaik di atas akan membantu membina grafik interaktif SVG yang kuat dan mesra pengguna.