Gör snygga personliga rubriker del 2
Förord
Ok, jag hoppas att du fått koden i del 1 att fungera. Det är nu dags för en liten genomgång av koden. Om inte annat kan det vara bra eftersom du säkert vill bygga ut det hela så att du kan få det hela att se ut som du vill.Innehåll
»»
»
»
»
Relaterade artiklar
» Gör snygga personliga rubriker del 1
Överblick
Det som egentligen hänt är att du satt sökvägen för en bild till en sida som returnerar en bild i sin ”Stream”. Du har på sätt och vis bytt ut den normala strömmen för sidan CreateFontImage till en bild. På ”lätt svenska” skulle man kunna uttrycka det så att du egentligen har ropat på en bild i Display och skapat den i CreateFontImage. Just nu är allt mycket statiskt dock men det kan ju ändras.
Kodanalys
Jag börjar med att gå igenom koden för de två sidorna och avslutar med en mer allmän reflektion och några tips till fortsättning.Display.aspx
Det viktiga i detta lilla block är raden:
ImageUrl="CreateFontImage.aspx"
Här sätts sökvägen för bilden till den sida där du har koden för skapandet. Glöm heller inte att bifoga ”runtat=server” i taggen
CreateFontImage.aspx.vb
Nu börjar det bli lite värre. Det är här som magin sker, så läs noga.
Response.ContentType = "image/gif"
Det hela börjar med att vi talar om att innehållet i responsströmmen är en gif. Andra tänkbara alternativ är i stort sett alla bildformat som finns men för ändamålet är en gif bäst.
Dim bmp As Bitmap = New Bitmap(200, 40)
En variabel kallad ”bmp” deklareras och instansieras på samma rad. För att det ska kunna ske måste Bitmap-klassen ha två värden till sin konstruktor (bredd respektive höjd i pixlar). Det finns många överladdade varianter som man kan titta närmre på.
Att det är en bitmap gör inte att det blir en bmp-fil till sist. Nästan alla bilder är egentligen bitmappar men de omvandlas till olika format för dess specifika tolkning.
Dim g As Graphics = Graphics.FromImage(bmp)
Här deklareras ett grafikobjekt. Detta objekt innehåller allt som behövs för att rita och skriva. Dock behöver det en källa för just detta och det ger vi i form att bildobjektet ”bmp”. Det finns andra sätt att tilldela grafikobjektet något att rita på men FromImage räcker långt.
Observera att om du skulle använda flera bilder kan du använda samma grafikobjekt för alla, dock inte samtidigt.
Dim brBlue As New SolidBrush(ColorTranslator.FromHtml("#000099"))
För att rita behöver man en pensel och det skapas här i form av en s k ”SolidBrush”. Solid i detta fall innebär att det bara är en färg som används. Du kan t ex använda en GradientBrush för att få roliga toningseffekter.
Penseln behöver veta vilken färg den ska ha och det finns en konstruktor för detta ändamål. Vi tilldelar den en trevlig blå färg med hjälp av en färgöversättare som kan tolka HTML-färger. Om du ska använda giffar i din kod rekommenderar jag detta sätt att tilldela färg eftersom du då har en bra palett i form av webbsäkra och gif-säkra färger i Visual Studio. Vanliga färger i formen ”Color.Green” kan skära sig med gif-formatets palett.
Dim HeadlineFont As New Font("Comic Sans MS", 16, FontStyle.Bold, GraphicsUnit.Point)
Nu blir det intressant för detta är det font-objekt som ska hantera texten i din rubrik och det är här det fina sker. Därför gör jag en liten djupare presentation av de olika argumenten till konstruktorn ovan.
”Comic Sans MS” (string): Detta är namnet på den font du vill använda. Det enda krav du har är att fonten finns installerad på din server. ”Comic Sans MS” kanske inte är så kul men jag ville skriva kod som skulle fungera för alla. Byt med andra ord ut detta argument till den font du vill använda.
”16” (Integer): Den storlek du vill ha på din text.
”FontStyle.Bold” (Enum): Den stil du vill ha. Här finns t ex också kursiv.
”GraphicsUnit.Point” (Enum): Det mått du vill använda för din text, d v s måttet på talet som tidigare angivits. Points är det mått som används i ordbehandlare, men Pixel går lika bra.
bmp.SetResolution(72, 72)
Denna rad är jag inte säker på behövs men den sätter i alla fall upplösningen på bilden till det som är standard och max för en normal bildskärm. Default är 92 och det kan en normal skärm inte göra rätta. 72 ger dessutom en mindre bild kB-mässigt.
g.FillRectangle(New SolidBrush(Color.White), New Rectangle(0, 0, bmp.Width, bmp.Height))
Det som händer här är i korthet att bakgrunden (första lagret om man så vill) fylls med vit färg. Standardfärgen är svart eller grå beroende på format. Eftersom jag inte vill använda de objekt som metoden behöver efter anropet så skapar vi dem samtidigt som vi använder dem. Konstruktorn i det sista argumentet talar om att koordinaterna ska vara övre högra hörnet och därefter följer bredd och höjd. Eftersom allt ska täckas med vitt så använder vi bildens mått för detta.
Senare tillägg: Det finns en bra funktion för samma sak, som jag tyvärr inte upptäckt tidigare. Istället för att använda koden ovan rekommenderar jag att du istället kör följande kod för att få en vit bakgrund att börja med.
g.Clear(color.white)
g.TextRenderingHint = TextRenderingHint.AntiAlias
Den andra raden kod som egentligen inte behövs. Men alla som ritat för webben vet att lite antialias gör underverk. Om du inte vill behöver du den dock inte.
Observera också att om du med samma grafikobjekt vill skriva text utan antialias efter denna rad, så måste du ”ställa tillbaka” värdet.
g.DrawString("Dynamisk rubrik", HeadlineFont, brBlue, 0, 0)
Här är det! Magin! Det vackra! Det bästa som hänt sen For-loopen! Här skrivs texten till vår rubrikbild. Det sker genom att metoden ”DrawString” anropas. Det finns 6 olika varianter på temat men den som används här säger följande: Skriv strängen ”Dynamisk Rubrik” med font-objektet HeadLineFont. Använd penseln brBlue. Börja med x-koordinaten noll och dito y-koordinat (övre vänstra hörnet).
Här kan naturligtvis du ändra precis allt. Ny textsträng, färg eller var texten ska skrivas ut.
bmp.Save(Response.OutputStream, ImageFormat.Gif)
Bilden, som nu har fått text och annat ”sparas”, till sidans outputstream som finns på Responseobjektet. Vi talar också om att det är en gif som det rör sig om. Om du vill kan du istället spara bilden som en fil på serverns hårddisk men det vill vi inte nu. Genom denna manöver har vi också sett till att den anropande sidans bildobjekt också har en bild att visa upp. Renderingen i den anropande sidan uppfattar då sin källa, inte som en sida, utan som just en bild och det är faktiskt det den är.
bmp.Dispose()
g.Dispose()
Det hela anslutas med att vi städar lite skräp och kastar ner dem i tunnan.
Allmänt
Det finns ett par saker jag skulle vilja betona innan du går vidare.För det första så finns det ingen snygg ”lagerhantering” a la PhotoShop utan det hela ritas mera som i MSPaint. Målar du, så målar du över.
När du anger koordinater så gör du det i pixlar och tänk på att koordinaten 0.0 är i övre vänstra hörnet. Ökar du y-koordinaten så kommer det ritade att hamna längre ner i bilden.
Genom att du dessutom kan kombinera texter med rektanglar och cirklar kan du göra snygga och tydliga diagram ”on the fly”. Då behöver du ha tungan rätt i mun, men resultatet blir jättebra.
Belysande exempel
Efter lite feedback bestämde jag mig för att visa vad du mycket snabbt kan göra för att skapa lite "fräckare" rubriker. Bilden är gjord med en BMP-bild som bakgrund, vilket är det som bildobjektet skapats av och sedan har jag använt tysnittet Bank Gothic, som jag tycker om. Resultatet blev följande:.gif)
När du lärt dig behärska vinklar, avstånd och färger kan du relativt simpelt tillverka små diagram som användaren kan ladda ner i form av bilder istället för att presentera siffror eller tabeller. Observera att bilden är efterredigerad då jag tog bort en del text:
Avslutning
Naturligtvis är det hela mycket statiskt i nuläget men det är nu som du i kombinationen programmerare och konstnär kommer in och ser till att det blir användbart.Några tankar jag själv använt är att skicka in argument till ritandet genom att utnyttja querystring i den anropande sidans bildkälla. Då kan du göra det hela mer dynamiskt genom att t ex skicka in bildbredd och text.
Du kan också utnyttja PageCache (som du får läsa om någon annan stans) så att bilden inte behöver skapas hela tiden. Varför inte skapa bitmapobjektet från en fil, som innehåller en snygg bakgrund som texten kan skrivas över. Möjligheterna till lyckade lösningar är stora om du kombinerar din hjärna tillsammans med den som finns under F1-tangenten eller på MSDN-online.
Lycka till med allt.Imaila mig om du har frågor.
0 Kommentarer