Editor Login | Register
Ekle

> Akademik İnternet ® > ASP.NET
ASP.NET ile Dinamik Resim Oluşturmak - ASP.NET - Akademik İnternet ® -
Haberci Grup
(Date : 06.12.2007 15:51:43)
%5


ASP.NET ile Dinamik Resim Oluşturmak

Web uygulamalarında sıklıkla yaptığımız işlemlerden birisi dinamik olarak resim oluşturmaktır. Dinamik olarak oluşturmak ile kastettiğimiz program içerisinde aldığı değişken değerlere göre çıktı üretmesidir. Bu makalemizde hisse senetlerinin görsel ifadesi ile ilgili System.Drawing isim uzayının ASP.NET uygulamalarında nasıl kullanılabileceğiniz inceleyeceğiz.

Bu makalede örnek üzerinden konuyu sizlere aktarmaya çalışacağım. Dinamik resim örneği olarak aklıma ilk gelen; borsa verilerinin online olarak bir bar grafiğinde gösterilmesi oldu. ASP.NET web uygulamalarının bize kazandırdığı en büyük avantajlardan birisi dinamik olarak farklı veritabanlarından veya veri kaynaklarından verileri alıp programatik olarak kullanmamıza izin vermesi. Hemen örneğimizin ön sayfasını oluşturarak işe başlayalım:

Bar_grafigi.aspx

<%@ Page ContentType="image/gif" Language="vb" Codebehind="bar_grafigi.aspx.vb" %>

Bar_grafigi.aspx dosyasının içerisinde tek bir satır var ve bu satırın içerisinde bizim için en önemli kısım ContentType. Bu kısımda "image/gif" sizin de dikkatinizi çekiyor olmalı. ASP.NET Sayfasına contentType belirterek, sayfanın çıktısının bir gif resim dosyası olacağı bilgisini belirtmiş oluyoruz. Böylece arka planda yazacağımız kod kısmı olan bar_grafigi.aspx.vb dosyasında üreteceğimiz bar grafiği bir gif uzantılı dosya olarak dinamik olarak oluşacak.

Öncelikle arka plandaki koda (codebehind) gerekli olan isim uzayı (namespace) eklemelerini gerçekleştiriyoruz:

Bar_grafigi.aspx.vb

Imports System.Drawing
Imports System.Drawing.Drawing2D
Imports System.Drawing.Imaging
Imports System.IO

Burada kullanacağımız isim uzayı System.Drawing ve alt isim uzaylarından Drawing2D ve Imaging olacaktır. Böylelikle .NET Framework tarafından bize sağlanan grafik sınıflarını kullanarak kolaylıkla çıktı olarak dinamik resim üretebileceğiz.

Şimdi gelelim işin zor görünen ama aslında dikkatli inceleyecek olursanız oldukça basit olan dinamik resim oluşturaca BarGrafigiCiz adlı prosedürü yazmaya:

Sub BarGrafigiCiz(ByVal strTitle As String, ByVal aX As ArrayList, ByVal aY As ArrayList, ByVal Target As Stream)

Const iColWidth As Integer = 60, iColSpace As Integer = 25, iMaxHeight As Integer = 400, iHeightSpace As Integer = 25, iXLegendSpace As Integer = 30, iTitleSpace As Integer = 50
Dim iMaxWidth As Integer = (iColWidth + iColSpace) * aX.Count + iColSpace, iMaxColHeight As Integer = 0, iTotalHeight As Integer = iMaxHeight + iXLegendSpace + iTitleSpace

Dim objBitmap As Bitmap = New Bitmap(iMaxWidth, iTotalHeight)
Dim objGraphics As Graphics = Graphics.FromImage(objBitmap)

objGraphics.FillRectangle(New SolidBrush(Color.White), 0, 0, iMaxWidth, iTotalHeight)
objGraphics.FillRectangle(New SolidBrush(Color.Ivory), 0, 0, iMaxWidth, iMaxHeight)

en büyük değeri bul
Dim iValue As Integer
For Each iValue In aY
If iValue > iMaxColHeight Then iMaxColHeight = iValue
Next

Dim iBarX As Integer = iColSpace, iCurrentHeight As Integer
Dim objBrush As SolidBrush = New SolidBrush(Color.Navy)
Dim fontLegend As Font = New Font("Arial", 11), fontValues As Font = New Font("Arial", 8), fontTitle As Font = New Font("Arial", 18)

döngüyü oluştur ve bar grafiklerini çiz
Dim iLoop As Integer
For iLoop = 0 To aX.Count - 1
iCurrentHeight = (Convert.ToDouble(aY(iLoop)) / Convert.ToDouble(iMaxColHeight)) * Convert.ToDouble(iMaxHeight - iHeightSpace)

objGraphics.FillRectangle(objBrush, iBarX, iMaxHeight - iCurrentHeight, iColWidth, iCurrentHeight)
objGraphics.DrawString(aX(iLoop), fontLegend, objBrush, iBarX, iMaxHeight)
objGraphics.DrawString(String.Format("{0:#,###}", aY(iLoop)), fontValues, objBrush, iBarX, iMaxHeight - iCurrentHeight - 15)

iBarX += (iColSpace + iColWidth)
Next

objGraphics.DrawString(strTitle, fontTitle, objBrush, (iMaxWidth / 2) - strTitle.Length * 6, iMaxHeight + iXLegendSpace)

objBitmap.Save(Target, ImageFormat.Gif)
objGraphics.Dispose()
objBitmap.Dispose()

End Sub

BarGrafigiCiz prosedürü parametre olarak Visual Basic .NET içerisinde yer alan Arraylist adlı dizi listelerini alıyor. Oluşturacağı grafiğin ismini string olarak alırken ekrana nasıl bir oluşumda resmi göndereceğini de stream parametresi ile alıyor ve FillRectange, Drawstring metotları ile dinamik olarak resmi oluşturuyor.

Şimdi sayfa yüklenme esnasında resim dinamik olarak üretileceğinden dolayı resmi oluturacak kodu Page_Load olay prosedürü içerisine yazalım:

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

Dim Stocks As New ArrayList()
Dim Profits As New ArrayList()

Stocks.Add("SUNW")
Stocks.Add("MSFT")
Stocks.Add("IBM")
Stocks.Add("ORCL")
Stocks.Add("AOL")

Profits.Add(12)
Profits.Add(Request.QueryString("MSFT"))
Profits.Add(68)
Profits.Add(9)
Profits.Add(14)

BarGrafigiCiz("Teknoloji Hisseleri Fiyatları", Stocks, Profits, Response.OutputStream)

End Sub

Öncelikle iki farklı arraylist tanımlıyoruz. Bunlarda ilki olan Stocks ; hisse senetlerinin adlarını tutacağımız dizi listesinin adı. İçerisine Sun Microsystems, Microsoft, IBM, Oracle ve America Onlineın hisse senedi kodları olan sırasıyla SUNW, MSFT, IBM, ORCL, AOL değerlerini atıyoruz.

Ardından bu hisse senetlerinin getirilerini rakamsal olarak belirttiğimiz Profits adlı dizi listesini yaratıyoruz. Sabit değerlerimizi Add metotu ile girebildiğimiz gibi parametrik olarak URL üzerinden de değişken alabilmesi için Request.Querystringi kullanarak Microsoftun getirisini alıyoruz.

Son olarak az önce yazmış olduğu BarGrafigiCiz adlı prosedüre elimizdeki parametreleri yolluyoruz. Teknoloji Hisseleri Fiyatları başlıklı bir gif dosyası ASP.NET Sayfasında üretilecek böylelikle. Hemen uygulamamızı localhost/bar_grafigi.aspx diyerek çalıştırıyoruz. Karşımıza gelecek ekran görüntüsü şu şekilde olmalı:

Şekil 1

Şekil 1de gördüğünüz gibi dinamik olarak resmimiz verdiğimiz parametrelerle çalıştı. Fakat Microsoftun hisse senedi fiyatı görünmüyor. Çünkü hatırlarsanız onun değerini URL üzerinden girilecek bir değer ile alacağımızı belirtmiştik. O halde hemen ?MSFT=100 diyelim ve sonucu görelim:

Şekil 2

Evet URL üzerinden MSFT değeri alındı ve Stocks adlı dizi listesi içerisine ekledi. Bu demodan da çıkarabileceğimiz bir ders Microsoft çok değerli bir firma grafikte görülüyor. İşin esprisi bir yana, alacağımız sayfadaki bilgilerin bizim için görselliği ne kadar kolaylaştırdığını görmek mutluluk verici.

Bu makalemizde ASP.NET uygulamalarında System.Drawing isim uzayını kullanarak nasıl dinamik resim oluşturabileceğimizi inceledik. ASP.NETin güzel özelliklerini keşfetmeye bundan sonraki makalelerimizde de devam edeceğiz.












Derecelendir
Kaynak http://www.yazgelistir.com/Makaleler/1000000390.ygpx
İçerik İhbarı
Bağlantılar: bilgininefendisi.net

Open Source Document Project AUP&TOS