Wie man farbige Muster in transparentem Bild verwendet

Question

Ich versuche ein Spiel zu erstellen (Mittelalter Konzept), aber ich bin fest in der Bildung der Schilde. Ich mag jede Kolonie sein eigenes einzigartiges Schild haben, die durch bestanden werden:

1. Schildform (14 Formen)
2. Muster (12 Muster)
3. Color (16 x 2 Farben, da jedes Muster werde 2 Farben zur Auswahl hat)
4. Symbol (12 Symbole)

die ich angelegt habe bereits das Schild Formen mit photoshop. Jede Schildform wird ihre Grenze haben und sie wird innen und außen transparent sein. Mein Ziel ist es, dass jeder Benutzer das Muster, die 2 Farben und das Symbol seines Schildes wählen kann, das seine Fraktion repräsentiert.

Es ist eine Möglichkeit, all diese verschiedenen Kombinationen zu erstellen und sie setzen von CSS und jQuery verwenden, aber diese Option wird eine große Anzahl von farbigen Mustern fordern:

14 Formen x 12 Muster x 16x2 Farben = 5,376 (verschiedene farbige Muster mindestens).

Also meine Fragen sind:

1. Wie kann ich das Bild richtig dargestellt, wenn jemand auf den Schild Icons klicken Sie HIER? Um den Hauptschirm zu ändern, indem ich auf eine der kleineren Formen darunter klicke, habe ich den folgenden jquery Code benutzt, aber aus unerfindlichen Gründen funktioniert er nicht auf Fiddle, während er auf meinem lokalen Server richtig funktioniert.

   jQuery(function($) { 
       $("#shield-1").click(function() { 
        $('.modal-shield img').attr('src',function(i,e){ 
         $(this).attr('src', "path/to-image/shield-1.png"); 
        }); 
       }); 
   });   
   

2. Wie kann ich innerhalb der Abschirmung sein eigenes Muster darstellen, entsprechend jeder anderen Form? Kann ich die Option "Überlauf" auf CSS verwenden, um seinen transparenten Teil im Inneren und dann mit JQuery zu füllen, um die Muster zu erstellen?

3. Wie kann ich die Farbe des Musters ändern?

4. Gibt es eine Möglichkeit, das Ergebnis all dieser Optionen als Bild zu speichern, um später das Schild in verschiedenen Größen anzuzeigen?

Wenn es möglich ist, würde Ich mag CSS und jQuery verwenden, aber wenn diese Option kann ich svg und JQuery verwenden nicht möglich ist?

PS. Ich habe eine Geige erstellt, aber da ich nicht weiß, wie ich sie hier einfügen soll, werde ich sie zu meinem nächsten Kommentar hinzufügen.

Answer 1

Für alle das gleiche Problem zu Frage # 1, habe ich die folgenden aktualisierten jquery Code unter

durch Klicken auf Formen Hauptschild zu ändern

jQuery(function($) { 
    $("[id^='shield-']").click(function() {  
     var mysrc = $(this).attr("src"); 
     $('.modal-shield img').attr('src',function(i,e){    
      $(this).attr('src', mysrc); 
     }); 
    }); 
}); 

Wenn eine ID mit beginnt „shield_“ geklickt, Variable " mysrc“die bekommen sein src-Attribut, und dann ändert Klasse‚modal-Schild‘img mit‚myscr‘Wert .. Hoffe, es hilft jemand ...