ich habe
Ich möchte im Wesentlichen eine ähnliche Seite haben: Ссылка
Aber anstatt es als statische Seite zu haben, möchte ich, dass ein Benutzer in der Lage ist:
und dann wird der Name in diesem Muster angezeigt.
Offensichtlich könnte ich separate JPGs für jede Kombination von Buchstaben erstellen (momentan habe ich ein JPG für jeden Buchstaben mit weißer Hintergrundfarbe) und Muster, aber ich wollte herausfinden, ob es eine elegantere Art der Codierung gab es fügt dynamisch ein Bild auf den Buchstaben in der anderen Seite.
BEARBEITEN: In meinem ersten Post ging ich davon aus, dass dies ein Frontend-Ding (Javascript) sein müsste, aber wenn es das einfacher macht (wie einige Leute gefragt haben was?) ist das Backend), mein Backend ist ein asp.net-mvc. Wenn es also eine Lösung gibt, diese auf der Serverseite aufzubauen und zum Client zu schicken, bin ich mehr als glücklich, das auch zu benutzen.
Sie können Hintergrundbilder mithilfe von CSS auf Bilder anwenden und dann eine Ladung transparenter PNG-Bilder für die Buchstaben verwenden.
Ich habe es verspottet:
%Vor%und Sie können es in Aktion sehen .
alt text http://www.dumension.co.uk/files/1/SO /A.png & lt; Dies ist einer der Buchstabenausschnitte (schwer zu sehen!)
alt text http://www.dumension.de/files/1/SO /leaves.png und eines der Hintergrundmuster.
Ich habe mich bei G gelangweilt, also kann man nur Wörter schreiben, die die Buchstaben enthalten, es ist auch ein bisschen faul, da es nur Großbuchstaben und nur zwei Muster gibt, aber hoffentlich sollte es genug sein, um dir eine Idee zu geben
Sie können die ImageMagick-Bibliotheken verwenden, um beliebige Kombinationen von Überlagerungen zu erstellen, die Sie und die Herzen Ihrer Benutzer wünschen. Auf diese Weise sind Sie nicht auf etwas Einfaches beschränkt, das mit CSS erreicht werden kann.
Der einfachste Weg, dies über Javascript zu tun, ist wahrscheinlich, eine Bildmaske für jeden Buchstaben zu haben und sie auf ein Muster anzuwenden. Mit Bildmaske meine ich ein einfaches Bild komplett schwarz (oder weiß, oder was auch immer Sie bevorzugen) mit einem "ausgeschnittenen" transparenten Teil in der Form des Buchstabens. Sie können dies einfach über die Musterdatei legen, um den gewünschten Effekt zu erhalten.
%Vor% Sie können die img src und div background url dynamisch ändern, um Muster und Buchstaben zu wechseln. Sie können auch dynamisch divs basierend auf Benutzereingaben erstellen.
Beachten Sie, dass dies in IE6 aufgrund des transparenten PNG nicht einfach funktioniert.
Alternativ könnten Sie das Bild dynamisch auf dem Server generieren, indem Sie etwas wie gd verwenden, was ein bisschen aufwendiger, aber letztendlich flexibler ist.
Damit Benutzer ihren eigenen Namen eingeben können, benötigen Sie ein Textfeld. Sie benötigen außerdem eine Schaltfläche, die eine JavaScript-Funktion auslöst, die den Wert des Textfelds überprüft und die Buchstabenbilder rendert.
Sie können den folgenden Code verwenden, um die Buchstaben zu erstellen. Sie benötigen ein Textfeld mit der ID 'textfield' und einem div, um die Ergebnisse mit der ID 'output' zu rendern, die Sie natürlich ändern können. Ich empfehle, ein select-Element zu verwenden, um die Musteroptionen zu speichern (#patternChooser in diesem Beispiel)
%Vor%Sie können das folgende CSS verwenden, um eine bestimmte Positionierung auf die Buchstaben anzuwenden (passen Sie die Breite und Höhe der Bilder an):
%Vor%Sie müssen Ihre Bilder wie folgt benennen: flowerpattern_a.png, brickpattern_j.png, etc.
Wenn Sie möchten, dass die Buchstaben in Echtzeit angezeigt werden, können Sie Javascript verwenden, um ein onkeyup () auszulösen Funktion, die das letzte Zeichen des Textfelds überprüft und ein Element dafür erstellt.
Sprites
Sie können auch ein Sprite verwenden, um die Leistung zu erhöhen. Legen Sie alle Bilder für die Buchstaben in ein Bild. Sie legen dieses Bild als Hintergrund für jeden Buchstaben fest.
Schnelles Lesen von CSS-Sprites: Ссылка
Sie können background-image: url(sprite.png); zum obigen CSS-Snippet hinzufügen.
Anstatt nur ein backgroundImage mit Javascript zu setzen, müssen Sie die Hintergrundposition des Buchstabens ( letter.style.background-position = '100px 200px' )
Schrifteinbettung
Wenn Sie Schriftarten verwenden müssen: Es gibt viele Schrifteinbettungsoptionen wie Schriftschnitt und Cufon . Am angenehmsten finde ich die Verwendung von font-face . Es ist schnell und der Text wird sich wie jeder andere Text verhalten.
Wenn Sie Ihre .TTF Truetype-Schriftart erhalten haben, müssen Sie die Schriftart für die Verwendung mit Internet Explorer in .EOT konvertieren. Sie können auch SVG-Fonts für die vollständige Browserabdeckung hinzufügen. Es ist eigentlich sehr einfach: Fügen Sie einfach das folgende Snippet oben auf Ihrem Stylesheet ein:
%Vor%Der Vorteil dieser Technik ist, dass sie einfach zu bedienen ist und Sie wie jeder andere Text auf Ihrer Website die volle Kontrolle über den gerenderten Text haben. Sie können die Schriftgröße, den Buchstabenabstand usw. einstellen. Hier finden Sie eine gute Lektüre über font-face font Einbetten . Sie können Microsoft WEFT oder TTF2EOT , um .EOT-Schriftarten zu erstellen.
Zum Beispiel könnte Ihr Code so aussehen.
Javascript
%Vor%HTML
%Vor%CSS
%Vor%Jetzt müssen Sie nur die Schriftarten konvertieren und in Ihr Stylesheet importieren.
Natürlich können Sie sich auch für eine andere Schrifteinbettungsmethode entscheiden. Hier finden Sie einen Artikel über Optionen zum Einbetten von Schriftarten , aber ein schneller Google wird es Ihnen zeigen die Optionen auch.
Selbst auf dem Server ist dies kein triviales Problem, da es nicht möglich ist, eine direkte Fill () -Methode mit einer Farbmaske zu erstellen, was genau das ist, was Sie brauchen.
Ich würde eher die vorhandenen Pixel durchlaufen, einen Lookup durchführen und das Musterpixel in das resultierende Bild schreiben, wenn das Buchstabenbild nicht weiß ist:
%Vor%Und dann finden Sie ein Benennungsschema, um diese auf der Festplatte nach der Erstellung zwischenzuspeichern, so dass Sie nur jedes Muster & lt; - & gt; Buchstabenkombination einmal rendern müssen.
GDI + funktioniert unter ASP.NET einwandfrei. (WPF verwendet, aber dann wurde mit einem Service Pack gebrochen. Nicht sicher, ob es jetzt wieder funktioniert).
Das Erstellen von Images serverseitig ist ziemlich einfach - der Trick besteht darin, sie mit clientseitigen Anforderungen zu verknüpfen. Ich habe eine Stack-Darstellung benutzt - mein Artikel hier:
Nachdem ich mit OO (dem Poster) bestätigt hatte, wollte ich Flash in den Mix werfen.
Flash hat den Vorteil, dass es wirklich schönes Anti-Aliasing und geniale Typografieunterstützung (besonders seit CS4) hat. Sie können wählen, ob Sie die gesamte Schnittstelle in Flash verwenden möchten, wo Sie die gemusterten Buchstaben direkt eingeben, oder ob swf das Ergebnis entsprechend den Parametern rendern soll, die den Namen und das Muster angeben.
Ich persönlich würde die ganze Sache in Flash machen und die Schnittstelle mit den optionalen Mustern mit zum Beispiel JSON versorgen. Aber die grundlegendsten Schritte, die Sie ergreifen könnten, sind
Erstellen Sie ein Formular mit der Eingabe für den Namen und einem Auswahlfeld für die Muster
Anzeige der Flash-Datei mit Parametern patterntype.swf? name = flash & amp; pattern = disco.png
Das Grundkonzept besteht darin, den Text als Maske für das Muster festzulegen. Ich habe einen schnellen Test im Flash gemacht, um die Leistung des Tilings des Musters zu testen (und ob es tatsächlich funktionieren würde)
%Vor%Wenn alles nach den Wünschen des Benutzers ist, können Sie ein neues Bitmap-Objekt aus dem Ergebnis erstellen und die Daten an den Server senden, der die Daten direkt in eine Bitmap-Datei schreiben kann (jpeg ist auch möglich).
Ein paar Dinge, die Flash ein bisschen mehr verkaufen könnten:
Lesen Sie den Link unten hier finden Sie die dynamischen Ladedetails mit Beispiel Ссылка
Tags und Links asp.net-mvc html image dhtml jpeg
