SVG grafikleri oluşturma denetimi mi?

Question

SVG grafikleri oluşturmaya yönelik bir denetime ihtiyacım var. Veri, StreamReader nesnesi şeklinde geliyor. Böyle bir görüntüyü oluşturmanın en kolay yolu nedir?

Ama bir şeyin daha yüksek çözünürlük istiyorum:

Şu anda, ben PNGs kullanıyorum. SVG'ler bunun için mükemmel olurdu.

---

Numune SVG:

benim WPF uygulamalarında SVG açıklığı kullanarak bakmış

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<!-- Generated by graphviz version 2.28.0 (20110507.0327) 
--> 
<!-- Title: G Pages: 1 --> 
<svg width="262pt" height="216pt" 
viewBox="0.00 0.00 262.00 216.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
<g id="graph1" class="graph" transform="scale(1 1) rotate(0) translate(4 212)"> 
<title>G</title> 
<polygon fill="white" stroke="white" points="-4,5 -4,-212 259,-212 259,5 -4,5"/> 
<!-- a --> 
<g id="node1" class="node"><title>a</title> 
<polygon fill="purple" stroke="purple" points="159.618,-186.523 133,-198.872 106.382,-186.523 116.549,-166.541 149.451,-166.541 159.618,-186.523"/> 
<polygon fill="none" stroke="purple" points="165.003,-188.397 133,-203.245 100.997,-188.397 114.139,-162.57 151.861,-162.57 165.003,-188.397"/> 
<polygon fill="none" stroke="purple" points="170.387,-190.272 133,-207.617 95.6126,-190.272 111.729,-158.598 154.271,-158.598 170.387,-190.272"/> 
<text text-anchor="middle" x="133" y="-177.3" font-family="Times New Roman,serif" font-size="14.00">a</text> 
</g> 
<!-- b --> 
<g id="node3" class="node"><title>b</title> 
<ellipse fill="none" stroke="black" cx="133" cy="-100" rx="27" ry="18"/> 
<text text-anchor="middle" x="133" y="-96.3" font-family="Times New Roman,serif" font-size="14.00">b</text> 
</g> 
<!-- a&#45;&gt;b --> 
<g id="edge2" class="edge"><title>a&#45;&gt;b</title> 
<path fill="none" stroke="black" d="M133,-158.413C133,-149.086 133,-138.069 133,-128.192"/> 
<polygon fill="black" stroke="black" points="136.5,-128.057 133,-118.057 129.5,-128.057 136.5,-128.057"/> 
</g> 
<!-- c --> 
<g id="node4" class="node"><title>c</title> 
<polygon fill="none" stroke="black" points="144.42,-41 22.2639,-41 -0.419833,-5 121.736,-5 144.42,-41"/> 
<text text-anchor="middle" x="72" y="-19.3" font-family="Times New Roman,serif" font-size="14.00">hello world</text> 
</g> 
<!-- b&#45;&gt;c --> 
<g id="edge3" class="edge"><title>b&#45;&gt;c</title> 
<path fill="none" stroke="black" d="M120.656,-83.8226C112.588,-73.903 101.855,-60.7069 92.5226,-49.2327"/> 
<polygon fill="black" stroke="black" points="95.0581,-46.8031 86.0329,-41.2536 89.6275,-51.22 95.0581,-46.8031"/> 
</g> 
<!-- d --> 
<g id="node6" class="node"><title>d</title> 
<polygon fill="none" stroke="black" points="194,-3.55271e-015 225.296,-34.5 162.704,-34.5 194,-3.55271e-015"/> 
<text text-anchor="middle" x="194" y="-19.3" font-family="Times New Roman,serif" font-size="14.00">d</text> 
</g> 
<!-- b&#45;&gt;d --> 
<g id="edge5" class="edge"><title>b&#45;&gt;d</title> 
<path fill="none" stroke="black" d="M145.344,-83.8226C154.961,-71.9983 168.365,-55.5183 178.67,-42.8489"/> 
<polygon fill="black" stroke="black" points="181.629,-44.757 185.224,-34.7906 176.199,-40.3401 181.629,-44.757"/> 
</g> 
<!-- e --> 
<g id="node7" class="node"><title>e</title> 
<polygon fill="none" stroke="black" points="254.137,-199 189.863,-199 208.407,-163 235.593,-163 254.137,-199"/> 
<text text-anchor="middle" x="222" y="-177.3" font-family="Times New Roman,serif" font-size="14.00">e</text> 
</g> 
</g> 
</svg> 

Answer 1

, orada bu işlevselliği sağlamak için ilave edilebilir bir çift paketleri vardı, ama sonunda buldum XpL'ye dönüştürdüğüm SVG'leri kullanarak, WPF uygulamalarında, bir SVG görüntüsünün tarayıcılarda ve benzer şekilde ölçeklendirilebildiği şekilde ölçeklendirilebilecek. Eğer SVG koduna erişiminiz varsa (ki sizin yaptığınız gibi), bu sizin için iyi bir çözüm olabilir. Aşağıdaki adımlar için Inkscape kullanmayı tercih XAML için

dönüştürme SVG:

Bunlar bunu başarmak için kullanın adımlardır. Bir görüntü düzenleyicisinde (ör. Inkscape) SVG'yi açın. Düzenleyici bir SVG açmayı ve SVG'yi bir XAML dosyası olarak kaydetmeyi desteklemelidir.

Düzenleyiciden dosyayı bir XAML olarak kaydedin. Seçim yapıldığında dosya Silverlight uyumlu olarak kaydedilmelidir. Görüntü düzenleyiciyi kapatın.

Herhangi bir renk değişikliği istenirse, dosyayı bir metin düzenleyicide açın (örn. Notepad ++, Visual Studio) ve renk değeri olan herhangi bir yol bulun ('fill = "# 000000" gibi bir şey arayın) ve İstenen altıgen renk değeri. Bitirdiğinizde dosyayı kaydedin ve metin düzenleyicisini kapatın. Sağ kaynaklar, resim (ör \ Resources \ Images) tutulmalıdır klasörü bir exisitng dosyayı ekleme seçeneği seçmek tıklayın WPF projesinde

1. bir XAML resmi kullanma

. Dosya seçim türünde XAML dosyaları bulunduğundan emin olun. Kullanmak ve eklemek için dosyaya gidin.

Özellikler bölmesini Visual Studio'da açın (dosyayı sağ tıklayın ve 'Özellikler' seçeneğini tıklayın). Özellikler bölmesindeki 'Gelişmiş' bölümünün altında, 'Kaynak Oluştur' ve 'Kopyalama Dizini'ne Kopyala' yerine 'Eylem Yap' seçeneğini belirleyin. Resim, görüntüyü (örn. Bir Çerçeve) kaynak yoluna (ör. “/resources/images/.xaml”) görüntülemek için bir öğenin kaynağını ayarlayarak artık kullanılabilir. Bu doğrudan ya da bağlanma yoluyla ayarlanabilir. Örnek Bir XAML görüntüsünü görüntülemek için WPF/XAML kodu Aşağıdaki kod, yukarıdaki adımları kullanarak eklenmiş bir XAML görüntüsünün nasıl görüntüleneceğine ilişkin bir örneği göstermektedir. Bu kod, eklendiği kapsayıcıyı doldurmak için resmi ölçeklendirir. Görüntünün kaynağı, Çerçeve öğesinin kaynağı için kullanılan ciltleme yoluyla sağlanır. Bu, görüntünün yolunun bir dizgisiyle değiştirilebilir (bu, bağlanma değeri aracılığıyla sağlanacak olan).

<Viewbox Stretch="Uniform" 
     Margin="4,4" 
     VerticalAlignment="Center"> 
      <Frame Source="{Binding ImageSource}" 
        NavigationUIVisibility="Hidden"/> 
</Viewbox> 

yol dizesinin bir örnek: görüntü DLL bulunan ve aynı DLL kullanılır

/resources/images/<file-name>.xaml 

, yol dize kullanarak aşağıdaki bilgi eklenmesi gerekmektedir biçim:

/<AssemblyName>;component/resources/images/<file-name>.xaml