Share
Noen malerier krever at du tar en nærmere titt for å se alle detaljene. Nå i stedet for et maleri, forestill deg et tomt lerret som kan fylles med bilder og tekst og dynamiske beskrivelser.
Vi fant denne fantastiske forfatteren takket være FlashGameLicense.com, stedet å kjøpe og selge Flash-spill.
Merk: Denne opplæringen har ingenting å gjøre med HTML5 lerretelementet!
Demoen er et seerprogram som laster dataene fra XML. Innholdet er plassert på lerretet, og brukeren kan zoome inn i lerretet eller klikke på et av bildene for å sentrere det på skjermen. Innstillinger som sidestørrelse, bakgrunnsfarge / tekstur og andre innstillinger lastes dynamisk. Som en bonus kan brukeren opprette flere sider.
I denne opplæringen vil vi se på de grunnleggende konseptene for å lage et program som dette. Det anbefales at du holder kildekoden ved siden av deg mens du leser opplæringen fordi ikke alle deler er forklart. Kildekode er tilgjengelig for bruk med FlashDevelop eller med Flash CS3 Professional og høyere.
Vær oppmerksom på at før du prøver å åpne programmet fra harddisken din, må du legge den til i listen "klarerte steder" som er angitt i panelet Global Security Settings som vises nedenfor. Ellers er det ikke gitt tilgang til å ta bilder fra harddisken. Dette er ikke nødvendig når du lastes opp til et nettsted så lenge bildene er plassert på samme webserver.
Hvis du ikke er kjent med XML, sjekk ut Dru Kepples AS3 101: XML. Vist nedenfor er XML-dataene som tilsvarer en side fylt med ett bilde og ett tekstfelt. Innstillinger som er spesifisert her gjelder for alle sider. Som du kan se, er det enkelt å lage flere sider og legge til innhold for dem. Til bilder kan du legge til en tittel og beskrivelse som ses når du svinger over med musen. Multi-line tekst legges til og størrelse og stil kan tilpasses. Hvert tekstfelt bruker en tilpasset skrifttype som finnes i .fla-filen.
0x000000 … /Bilder/ 580 380 2000 1300 0xEEDEC0 0xC1C59C 10 10 Hei der og velkommen til demonstrasjon av lerret søknaden. Brukes som emne her er min ferie til København. anno 2010. Du er velkommen til å lese teksten og snuse opp kulturen. 23 470 50 Kirke og innsjø Det vakre miljøet i Kastelskirken. Church_And_Lake.jpg 1 750 500
Bruk følgende kode for å sette opp vår søknad. Det er nesten helt generert av FlashDevelop ved hjelp av "AS3 Project" -malen. Main er dokumentklassen - hvilken er klassen først lastet når du starter flash - og innvendig Lerret Vi bygger vår søknad.
offentlig klasse Hoved utvider Sprite offentlig funksjon Main (): void if (stage) init (); ellers addEventListener (Event.ADDED_TO_STAGE, init); privat funksjon init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init); // inngangspunkt var lerret: Lerret = nytt lærred (dette);
Og en forenklet versjon av lærred. Vær oppmerksom på at vi bruker en visningsobjektbeholder som en parameter for å legge til den ekstra kontrollen for å legge til / fjerne lærredet.
offentlig klasse Lerret strekker Sprite offentlig funksjon Lerret (beholder: DisplayObjectContainer) // Lagre parameter lokalt this.container = container; // Legg til container container.addChild (dette);
I denne applikasjonen bruker vi den såkalte BulkLoader: et AS3-bibliotek som tar sikte på å laste og administrere komplekse lastekrav lettere og raskere. Når du først laster opp, bruker vi den til å ta tak i XML-filen og et bakgrunnsbilde. Følgende kode viser hvordan du starter opp BulkLoader og legg til to elementer i lastekøen. De Fullstendig funksjonen kalles når alle elementene er lastet inn.
Accentsconagua
// Init bulk loader loader = Ny BulkLoader ("Canvas"); loader.add ("... /background.jpg", id: "background"); loader.add ("... /settings.xml", id: "xmldata"); // Loader hendelser loader.addEventListener (BulkLoader.COMPLETE, Complete, false, 0, true); loader.addEventListener (BulkLoader.ERROR, HandleError, false, 0, true); // Start loader loader.start (); Vi lagrer de lastede eiendelene inne i klassen for senere bruk. De BulkLoader gir en enkel måte å gripe på de elementene vi trenger. Bare ring funksjonen som svarer til typen objekt og bruk objektets ID-streng. Statiske variabler brukes til å gjøre XML-dataene globalt tilgjengelige (for eksempel tilgang til en statisk variabel ved bruk av Canvas.viewerWidth). De sti variabel angir hvor de eksternt lastede bildene vil bli plassert. Bilder kan bare lastes fra egen webserver på grunn av sikkerhetsrestriksjoner.
// Få bakgrunnsbilde g_background = (loader.getBitmap ("background")). BitmapData; // Få XML-data xmldata = loader.getXML ("xmldata"); // Sett statisk vars for easy access viewerWidth = int (xmldata.settings.viewer_width); viewerHeight = int (xmldata.settings.viewer_height); viewerBgColor = uint (xmldata.settings.viewer_bg_color); sti = String (xmldata.settings.image_path); customFont = new customFontClass (); contentWidth = int (xmldata.settings.content_width); contentHeight = int (xmldata.settings.content_height); // Fjern fullstendig lytter loader.removeEventListener (BulkLoader.COMPLETE, Complete); // Fjern alle data referanser lagret i loader loader.clear (); // Fjern loader fra minnelaster = null; // Sett opp seer InitialiseViewer (); Som du kanskje eller ikke har gjettet, bruker programmet et virtuelt kamera for å trekke ut en del av lerretet og vise til brukeren. Kameraet bruker skalering og oversettelse til en displayobjektbeholder slik at bare området under kameraet vises på skjermen. Følgende demonstrasjon gir deg en bedre ide om hvordan det fungerer.
Kilden til denne demonstrasjonen er også inkludert i arkivet. La oss forklare dette eksempelet ved å starte med å konfigurere innstillingene. Vi ønsker at seeregionen skal være 305 x 230, og innholdsregionen - som er dimensjonene til blomstbildet - bør forsøke å beholde aspektforholdet til seerområdet, slik at det ikke deformeres for mye. Vår blomst er 1000 x 750, som er nær nok. For å vise hele blomsten i seerområdet må kameraet være i samme størrelse som blomsten, som er 1000 x 750.
Følgende kode angir dimensjonsinnstillingene. I dette eksemplet er de hardkodede, men ellers blir det tatt fra XML.
// Innstillinger viewerWidth = 305; viewerHeight = 230; contentWidth = 1000; contentHeight = 750;
Deretter oppretter vi en seer container. Alternativet scrollRect brukes til å klippe ut noe utenfor et spesifisert rektangel. Dette er veldig nyttig, da bare en del av lerretet må vises når du er zoomet inn. Det er en finere løsning enn for eksempel å sette en svart ramme rundt applikasjonen.
// Viewer container viewerContainer = ny Sprite (); viewerContainer.scrollRect = ny rektangel (0,0, viewerWidth, viewerHeight); addChild (viewerContainer);
Til seerbeholderen legger vi til en annen Sprite kalt viewerScroller. Funksjonen til viewerScroller er rett og slett å fungere som en beholder for alt som må tjene som innhold for kameraet. Det gjør det enklere å legge til flere elementer i innholdsregionen.
// Side scroller var viewerScroller: Sprite = ny Sprite (); viewerContainer.addChild (viewerScroller);
Legg til innhold til viewerScroller. I dette tilfellet blomstbildet.
// Innholdsinnhold = Ny Sprite (); viewerScroller.addChild (innhold); var bmp: Bitmap = nytt bilde (); content.addChild (BMP);
Legg nå til Kamera klasse. Selv om vi ennå ikke har gjort det Kamera klassen, vil konstruktøren ta seerens dimensjoner som parameter og funksjonen SetTarget har innholdet Sprite som parameter. Vi posisjonerer Kamera midt i innholdet og gi den en første oppdatering.
// Legg til virtuelt kamerakamera = nytt kamera (viewerWidth, viewerHeight); cam.SetTarget (viewerScroller); cam.x = contentWidth / 2; cam.y = contentHeight / 2; cam.Update ();
Med all denne koden på plass kan vi gjengi og manipulere kameraet. Inne i a Event.ENTER_FRAME loop du kan kjøre cam.Update () for å oppdatere kameravisningen. Det er imidlertid mer effektivt å bare oppdatere ved endring. Ved å endre cam.x og cam.y Du kan flytte kameraet rundt, og ved å endre cam.scaleX og cam.scaleY du kan endre skalaen. Dette er akkurat hva tastaturtastene i eksemplet gjør.
Her ser vi på internals av Kamera. I konstruktørfunksjonen legger vi til noen grafikk som er nødvendig for å manipulere skalskalaen til kameraet. Vi lagrer også dimensjonene til seerinnholdet lokalt inne i klassen.
offentlig funksjon Kamera (bredde: int, høyde: int, initialZoom: Number = 1) // Sprite pleide å gi kameraet en bredde og høyde. g = ny form (); g.graphics.drawRect (0, 0, 10, 10); g.graphics.endFill (); addChild (g); // Angi dimensjoner av seerrektangel tw = bredde; th = høyde; // Initial zoom this.scaleX = this.scaleY = initialZoom;
Deretter festes kameraet til et objekt. Kameraet blir i samme skala som objektet.
offentlig funksjon SetTarget (mål: Sprite): void this.target = target; // juster kameraets dimensjoner g.width = target.width; g.height = target.height;
Dette er den mest interessante delen og motoren til kameraet. Skalering og oversettelse brukes på objektet som er festet til kameraet ved å gi det en ny transformasjonsmatrise. Sjekk ut Matrise klasse i AS3-dokumentasjonen for mer informasjon om bruk av matriser.
offentlig funksjon Oppdatering (): void cw = this.width; ch = this.height; tscaleX = tw / cw; tscaleY = th / ch; // sette nye skaleringsverdier mat.a = tscaleX; mat.d = tscaleY; // sette nye posisjoner (oversettelse) verdier. // kameraposisjonen blir gjort negativ, fordi f.eks. Når kameraet beveger seg rett, må siden bevege seg til venstre for å imøtekomme. // cw og ch legges til for å flytte siden til midten av visningsområdet // alle posisjonene er skalert tilsvarende mat.tx = (-mat.tx + cw / 2) * tscaleX; mat.ty = (-mat.ty + ch / 2) * tscaleY; target.transform.matrix = mat;
Vi kommer tilbake til vår søknad. I dette trinnet legger vi grunnlaget for såkalte Side Objekter som inneholder lerretet med bilder og tekst. Først lag en bakgrunn for hele applikasjonen. Fargen er spesifisert fra XML.
// Bakgrunn var bg: Sprite = ny Sprite (); bg.graphics.beginFill (xmldata.settings.bgcolor); bg.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight); bg.graphics.endFill (); addChild (bg);
Som i eksemplet med Kamera og blomsten bruker vi pageContainer og pageScroller og Kamera. Dette burde se ganske familar.
Neste opp legger til alle Side Objekter som kreves som angitt i XML. I vårt eksempel har vi bare opprettet en side. Legg merke til at Side Klassen eksisterer ikke ennå, siden vi skaper dette neste trinn. sider er en matrise som vil holde alt Side referanser for senere bruk.
Parametre brukt av Side er
pageScroller: Sprite som den Side vil bli lagt tilp: et XML-dataobjekt som inneholder all informasjon på en bestemt side (alle bilder og tekst)g_background: bakgrunnstekstur// Legg til sider sider = nytt Array (xmldata.page.length ()); for hver (var p: XML i xmldata.page) var id: int = int (p.attributes () [0]); sider [id] = ny side (pageScroller, p, g_background);
Vises nedenfor er konstruktøren til Side. Vi lagrer ganske enkelt alle parametrene lokalt i klassen for senere bruk.
offentlig funksjon Side (container: DisplayObjectContainer, data: XML, bakgrunn: BitmapData) this.id = id; this.container = container; this.data = data; this.background = background; this.title = String (data.attributes () [1]);
Nå litt mer interessante ting. De Laste funksjon av Side starter ved å ta bakgrunnstekstur vi lastet inn før og pakker den over lerretet. For å gjøre dette må vi vite størrelsen på bakgrunnsbildet vi er looping og størrelsen på hele lerretet. Lage en Sprite kalt g_background som fungerer som en grafikkbeholder. Legg til en solid bakgrunnsfarge for å forhindre at linjene mellom bitmapbildene vises.
var b: int = background.width; var h: int = background.height; var trueWidth: int = Canvas.contentWidth; var trueHeight: int = Canvas.contentHeight; // bakgrunnslag g_background = ny Sprite (); addChild (g_background); // En solid bakgrunnsfarge var bg: Sprite = ny Sprite (); bg.graphics.beginFill (Canvas.viewerBgColor); bg.graphics.drawRect (0, 0, trueWidth, trueHeight); bg.graphics.endFill (); g_background.addChild (bg);
Innpakning av bakgrunnstekstur bruker to løkker, bare vertikalt og en horisontalt. Det fortsetter å løpe til kanten er nådd. Hver eneste flis på en jevn posisjon - som (2,2), (4,2), (4,6) og så videre - blir vendt rundt ved hjelp av scaleX eller Scaley. Dette gjør teksturflyten over til den neste sømløst. Kontroller om et tall er jevnt, er gjort ved hjelp av modulo-operatøren (%). Hvis resten av et tall etter at 2 er null, må tallet være jevnt. Rundt kantene klipper vi av en tekstur som går utenfor innholdsdimensjonene som angitt i trueWidth og trueHeight. Det er viktig at Side Objektet forblir denne størrelsen, fordi det blir større vil endre størrelsesforholdet og føre til at skjermen deformeres.
// Legg looped bakgrunnsbilde var jeg: int, j: int; mens (jeg * b < trueWidth) j = 0; while (j * h < trueHeight) // new bitmap var s:Bitmap = new Bitmap(background); // position s.x = i * b; s.y = j * h; // alternate horizontal and vertical flip if (i % 2 != 0) s.scaleX *= -1; s.x += b; if (j % 2 != 0) s.scaleY *= -1; s.y += h; // clip if (i * b + b > trueWidth || j * h + h> trueHeight) var clipw: int = Math.min (trueWidth - i * b, b); var cliph: int = Math.min (trueHeight - j * h, h); var nbd: BitmapData = ny BitmapData (clipw, cliph); nbd.copyPixels (bakgrunn, nytt rektangel (0, 0, clipw, cliph), nytt punkt ()); s.bitmapData = nbd; hvis (s.scaleX == -1) s.x - = b - clipw; hvis (s.scaleY == -1) s.y - = h - cliph; // legg til bitmap for å vise listen g_background.addChild (s); j ++; i ++;
Resultatet av den gjentatte bakgrunnen bør være noe slikt. Mørke grenser legges for klarhet.
La oss starte vår sidefylte reise ved å legge til tekst. Gå gjennom alle XML-oppføringene merket "tekst" og send dataene sine til Legg til tekst funksjon.
tekster = nytt Array (); for hver (var tekst: XML i data.text) AddText (text);
De Legg til tekst funksjonen ser slik ut. Den første delen av koden validerer XML-dataene. I tilfelle noen felt ikke fylles i, vil det legge til en standardverdi. QuickText er en klasse som brukes til å lage en tekstfelt med visse alternativer. Til slutt må teksten utelukkes fra museinteraksjon ved å bruke mouseEnabled = false og mouseChildren = false.
privat funksjon AddText (tekst: XML): void if (! text.font) text.font = null; hvis (! text.size) text.size = 12; hvis (! text.color) text.color = 0x000000; hvis (! text.bold) text.bold = 0; hvis (! text.italic) text.italic = 0; var qt: QuickText = ny QuickText (text.x, text.y, String (text.content), Canvas.customFont, int (text.size), uint (text.color), boolsk (text.bold), boolsk text.italic)); qt.blendMode = BlendMode.LAYER; texts.push (qt); addChild (qt); qt.mouseEnabled = false; qt.mouseChildren = false;
Følgende bilde viser alle alternativene til QuickText klasse:
Og resultatet av den nye siden, inkludert tekst:
Det første trinnet her er å lage Bilde objekter som vil holde XML-data, bitmap og litt beskrivende tekst. Lyttere brukes direkte for musekommunikasjon. Alle disse Bilde objekter lagres deretter i en matrise for enkel tilgang senere.
// Grip alle bilder pictures = new Array (); for hver (var bilde: XML i data.image) // nytt bildeobjekt med informasjon i det var bilde: Bilde = nytt bilde (bilde); pictures.push (bilde); // legge til lyttere på bilde picture.addEventListener (MouseEvent.MOUSE_OVER, PictureMouseOver); picture.addEventListener (MouseEvent.MOUSE_OUT, PictureMouseOut); picture.addEventListener (MouseEvent.MOUSE_DOWN, PictureMouseDown);
Og her er den grunnleggende versjonen av Bilde klasse, holder bare XML-dataene. Bilde strekker Sprite, vi kan allerede posisjonere det et sted. Skalinnstillingen er verifisert før den brukes, fordi hvis brukeren utelater den fra XML, returnerer den 0. Standardverdien for skala er 1.
offentlig funksjon Bilde (data: XML) title = data.title; beskrivelse = data.description; url = data.url; side = data.page; x = data.x; y = data.y; hvis (tall (data.scale)! = 0) imgscale = tall (data.scale);
Lage en ny BulkLoader akkurat som for første gang, men nå for å laste batcher av bilder. Vi skal laste 5 bilder om gangen og vise dem når de er ferdige. Det vil fortsette å hente nye bilder til alt er gjort. Funksjonen Fullstendig kalles ved ferdigstillelse av hver batch.
// Lag bulklasteren. Loader = Ny BulkLoader ("side" + id); loader.addEventListener (BulkLoader.COMPLETE, Complete, false, 0, true);
// sett totalt antall bilder totaltPictures = pictures.length; // Ta tak i de første 5 bildene eller den totale mengden bilder hvis det er mindre. i = 0; mens jeg < Math.min(totalPictures,5)) loader.add(String(Canvas.path + pictures[i].url), id: "img" + i ); i++; // Start loader loader.start(); I dette trinnet legger vi inn de lastede dataene inni Bilde objekter. De elementer egenskapen til lasteren holder alle objekter som er lastet inn. Gå over alle disse objektene og kontroller om de er et bilde. Hver bitmap er gitt til tilsvarende Bilde objekt og Bilde legges til lerretet. Vi sletter også det lastede bildet fra listen over lasteelementer for å hindre konflikter med en senere serie med lastede bilder.
// Bilde batch lastet. lagre dataene til individuelle bildeobjekter. i = amountPicturesLoaded; for hver (var-element: LoadingItem i loader.items) if (item.isImage ()) bilder [i] .SetImage (loader.getBitmap (item.id)); loader.remove (item.id); AddPicture (bilder [i]); i ++; amountPicturesLoaded ++;
Og en nærmere titt på SetImage funksjon av Bilde.
offentlig funksjon SetImage (ob: Bitmap): void // hvis ingen bildedata er lastet, viser ingenting hvis (ob == null) returnerer; // lagre dataene i klassen img = ob; // vis bilde addChild (img); // skala img.scaleX = img.scaleY = imgscale;
Og legge til et bilde på lerretet er like enkelt som å ringe addChild.
privat funksjon AddPicture (bilde: Bilde): void addChild (pict);
Resultatet blir nå:
Legge til noe i kameravisningen er gjort ved å legge til et barn i viewerScroller container. Vi har lagt til viewerScroller til hver Side objekt som en parameter slik at vi kan legge den som et barn ved å ringe Vise fram() funksjon av Side.
offentlig funksjon Show (): void container.addChild (this);
Gå tilbake til Lerret klasse og ring funksjonene Load () og Show () når vi vil vise brukeren en side. I tilfelle Side er allerede lastet, Laste() vil returnere direkte, slik at ingen unødvendige tiltak blir gjort. Den nåværende Side vi viser er lagret i klassen som side. Denne referansen vil være viktig for sideinteraksjon.
privat funksjon ShowPage (nr: int): void // skjul gammel side hvis (side) page.Hide (); // sett ny side side = sider [nr]; page.Load (); page.Show ();
Nå som vi har opprettet vår side med bilder og tekst, er det nødvendig å skalere det slik at det passer inn i vår seeregion. Vi bruker de statiske statiske variablene zoom og magnifyStep for dette formålet. magnifyStep er et array som holder alle de forskjellige skalaverdiene til kameraet og zoom er den nåværende posisjonen til magnifyStep kameraet skaleres til. For å vite hvilken skaleringsverdi som er nødvendig for å passe innholdet i visningen, må vi kjenne forholdet mellom innholds- og visningsprogramområdene. For å ta hensyn til feilaktige forhold, tar vi det minimale forholdet mellom bredde og høyde som følger:
// Sett forstørr trinnliste magnifyStepList [0] = Math.min (viewerWidth / contentWidth, viewerHeight / contentHeight);
Vi ønsker å zoome inn når du klikker på lerretet. Legg til en mushendelse på hitfeltet av Side. Hitfield er i utgangspunktet bare grafikken i bakgrunnen av Side og fordi det er a Sprite vi kan sette musekontakt på den.
page.hitField.addEventListener (MouseEvent.MOUSE_DOWN, MouseZoomIn);
Ved et museklikk vil vi at kameraet skal skalere ned til stillingszoomen i magnifyStepList og gå til punktet på lerretet som vi klikket på. Husk fra eksempelet at når kameraet blir mindre (skaler ned), blir zoomen på lerretet større. Dette er grunnen til at vi reduserer integerzoomen med verdien en. Å få museposisjonen vi klikket på lerretet, er lett å bruke page.mouseX og page.mouseY. Flash konverterer automatisk tallene slik at det vises lokalt - noe som betyr at hvis siden er for eksempel 2000 px nedskrudd med 50% og du klikker halvveis, returnerer den 1000 px, selv om museposisjonen på skala koordinater er mye mindre.
privat funksjon MouseZoomIn (e: MouseEvent): void var pt: Point; hvis (! cam.bZooming && zoom> 0) // Zoom inn ett trinns zoom-; // Nytt kamerapunkt. Rette grenser. pt = nytt punkt (page.mouseX, page.mouseY); CameraBounds (pt); cam.Zoom (pt.x, pt.y, magnifyStepList [zoom]);
For å holde området på kameraet inne i lerretet, må vi rette opp stillingen innenfor rammen av kameraet. Ser på kameraeksemplet igjen for demonstrasjon av dette. Kameraet er sentrert rundt seg selv, slik at stillingen horisontalt for eksempel må være innenfor 0 + kamera halvbredde og contentWidth - kamera halv bredde. En pålitelig måte å beregne bredden til kameraet når den er zoomet inn er contentWidth / 2 * magnifyStepList [zoom], fordi kameraet i sin første uzoomede tilstand har størrelsen contentWidth (samme størrelse som lerretet).
privat funksjon CameraBounds (pt: Point): void // horisontalt hvis (pt.x < contentWidth/2 * magnifyStepList[zoom]) pt.x = contentWidth/2 * magnifyStepList[zoom]; else if (pt.x > contentWidth - contentWidth / 2 * magnifyStepList [zoom]) pt.x = contentWidth - contentWidth / 2 * magnifyStepList [zoom]; // vertikalt hvis (pt.y < contentHeight/2 * magnifyStepList[zoom]) pt.y = contentHeight/2 * magnifyStepList[zoom]; else if (pt.y > contentHeight - contentHeight / 2 * magnifyStepList [zoom]) pt.y = contentHeight - contentHeight / 2 * magnifyStepList [zoom];
Vist på bildet nedenfor er kameraet og lerretet zoomet inn på en gang. De røde linjene viser grensene som kameraet ikke kan krysse og må være innenfor.
Zooming utføres ved å legge til skala til kameraet. Vi bruker Tweener klasse og "EasyOutQuint" Overgang for å få dette til å skje på en jevn måte. bZooming er en variabel som brukes til å se om kameraet allerede zoomer eller ikke. Du kan ikke zoome på siden igjen mens den fortsatt er opptatt med å skalere opp eller ned. Ved hver oppdatering av kameraet funksjonen Oppdater kalles, som utfører skaleringen på innholdet.
offentlig funksjon Zoom (newx: int, newy: int, newscale: tall): void bZooming = true; Tweener.addTween (dette, time: 2, x: newx, y: newy, overgang: "easeOutQuint", scaleX: newscale, scaleY: newscale, onComplete: funksjon (): void bZooming = false;, upUddate: Oppdater );
Husk at vi la til Mouseevent lytter til alle bildene på siden. Det vi ønsker å gjøre er å zoome inn på et bilde når man klikker på og sørg for at den passer godt i visningsområdet. Bilder som er mindre enn det faktiske seerområdet må ikke skaleres utover deres oppløsning.
privat funksjon PictureMouseDown (e: MouseEvent): void var newScale: Number; var screenRatio: Number = Canvas.viewerWidth / Canvas.viewerHeight; var imgW: Nummer = Math.max (e.target.width * 1.05, Canvas.viewerWidth); var imgH: Nummer = Math.max (e.target.height * 1.05, Canvas.viewerHeight); var imgRatio: Nummer = e.target.img.width / e.target.img.height // Beregn bildeskalering hvis (imgRatio < 1) newScale = imgH / Canvas.contentHeight; else newScale = imgW / Canvas.contentWidth; Canvas.cam.Zoom(e.target.x + e.target.width/2, e.target.y + e.target.height/2, newScale); Canvas.cam.bLocked = true; PictureMouseDisable();
Det grunnleggende konseptet her er at bildeforholdet mellom et bilde først må bestemmes. Hvis bredden på et bilde er høyere enn høyden da imgRatio < 1 vil holde sant og omvendt hvis høyden er større enn bredden. Vi vil alltid skalere til den største delen av et bilde, noe som betyr at hvis bildet er for eksempel 200x400px, vil vi behandle bildet som et 400x400 kvadrat. Et annet tillegg her er at vi skaler bildet med 1,05 først, noe som betyr at bildet blir 5% større. På denne måten berører ikke bildet sidene når de er zoomet inn. For å beregne skalaen til et bilde i forhold til innholdsstørrelsen, deler vi det med innholdets høyde eller bredde.
Ring Zoom funksjon av kameraet og gå til midten av bildet vi fokuserer på og bruk den nye skalaen som vi har beregnet.
Her vises bildezoomingsprosessen i handlingen. Legg merke til hvordan kameraet holdes innenfor kantene på siden, og hvordan hele bildet inkludert beskrivelsen passer perfekt inn i skjermen.
Hvis du ikke hadde lagt merke til, når du zoomet inn på en side, kan du flytte musemarkøren til kantene på skjermen for å rulle rundt og se mer av siden. Koden som vises nedenfor kan se litt bisarre ut til deg; Det er noe jeg har skrevet for en stund siden for en RTS-stilspillmotor, og har vært gjenbrukende den helt siden for alt som trenger å rulle. Grunnprinsippene her er at du sjekker hvor museposisjonen er, og hvis den beveger seg uten et visst område rundt størrelsene (mouse_scroll_areax_reduced og mouse_scroll_areay_reduced) så vil det begynne å bevege seg til den ene siden med en hastighet som er proporsjonal med hvor langt du er innenfor dette området. Når musemarkøren ikke er innenfor rekkevidden, vil den sette en dra på rullingen for å senke den til slutt.
// Få mengden av scolling som trengs basert på museposisjonen mx = viewerContainer.mouseX; min = viewerContainer.mouseY; hvis (mx < mouse_scroll_areax && mx > 0) scrollAmountX = (((mx - mouse_scroll_areax) / mouse_scroll_areax_reduced) * mouse_scroll_factor) + .5) << 0; else if ((viewerContainer.width - mx) < mouse_scroll_areax && mx < viewerContainer.width) scrollAmountX = (((1 - (viewerContainer.width - mx) / mouse_scroll_areax_reduced) * mouse_scroll_factor) + .5) << 0; if (my < mouse_scroll_areay && my > 0) scrollAmountY = (((my - mouse_scroll_areay) / mouse_scroll_areay_reduced) * mouse_scroll_factor) + .5) << 0; else if ((viewerContainer.height - my) < mouse_scroll_areay && my < viewerContainer.height) scrollAmountY = (((1 - (viewerContainer.height - my) / mouse_scroll_areay_reduced) * mouse_scroll_factor) + .5) << 0; // Put drag on the scroll, so it does not keep on moving forever and slows down smoothly. scollAmountX *= .95; scrollAmountY *= .95; // Update camera position cam.x += int(scrollAmountX); cam.y += int(scrollAmountY); // Make sure the camera is within bounds var pt:Point = new Point(cam.x, cam.y); CameraBounds(pt); cam.x = pt.x; cam.y = pt.y; // Update the camera view cam.Update();
Vist nedenfor er området der musens interaksjon for rulling skjer. Husk at det bare kan skje når du zoomer inn.
Jeg tror dette oppsummerer alle læringsmålene jeg angir for denne opplæringen. Dessverre kan ikke alt som er vist i søknaden bli diskutert på grunn av omfanget av opplæringen, men jeg håper du klarte å lære grunnleggende om XML-data, sidefylling og kamerahåndtering. Takk for at du leste!
