Zeichentabelle

Ich habe ein Ding gemacht, mit dem du mit deiner Maus auf einem Raster mit verschiedenen Farben zeichnen kannst. Du kannst dann den HTML-Code des von dir erstellten Designs kopieren und einfügen.

Demo ansehen   Dateien herunterladen

Funktionen

• Löschen des aktuellen Designs
• Ändern der Rastergröße auf verschiedene Voreinstellungen
• Farbfelder zum Ändern der aktuell aktiven Farbe
• Farbauswahl zum Ändern der Farben der Farbfelder
• Weiße Farbe = Radieren
• Wenn du die [Option]-Taste gedrückt hältst, wechselst du in den Radiergummi-Modus. Wenn du die Taste loslässt, kehrst du zur vorherigen Farbe zurück.
• Möglichkeit, ein Bild im Raster zu platzieren, um davon abzuzeichnen (dimmt das darüber liegende Raster)
• Ein- und Ausschalten des Zeichenmodus
• Und der Sinn der ganzen Sache… die Möglichkeit, den HTML-Code des fertigen Designs zu kopieren und einzufügen.

Was ist der Sinn?

Ich war bei einer Präsentation von @blueys, wo sie über HTML-E-Mails sprach und einige besonders schöne Beispiele zeigte. Eines, das ich extra cool fand, war dieses hier, das sie aus der Campaign Monitor Galerie gefunden hatte.

„Inky“, der blaue Geist aus PacMan, der oben gezeigt wird, wurde ohne Bilder erstellt, nur mit Tabellenzellen mit angewendeten Hintergrundfarben. Das ist besonders cool für HTML-E-Mails, denn in vielen (den meisten?) E-Mail-Clients werden heutzutage Bilder erst angezeigt, wenn ein Benutzer explizit auf einen Link klickt, um sie anzeigen zu lassen. Durch die Verwendung von farbigen Tabellenzellen können einfache Grafiken ohne tatsächliche Bilder angezeigt werden.

Erstellung dieser Mini-App

Dies ist im Wesentlichen eine One-Page-JavaScript-(jQuery)-gesteuerte Mini-Anwendung. Lassen Sie uns behandeln, wie einige der verschiedenen Teile davon funktionieren.

Erstellung des Rasters

Die Zeichentabelle selbst ist buchstäblich eine HTML-Tabelle. Wir könnten Tabellen-Markup direkt in HTML einfügen, aber es ist viel flexibler, wenn JavaScript das Markup erstellt. So können wir die Tabellenstruktur programmatisch ändern, anstatt den HTML-Code direkt zu verändern. Dies ermöglicht uns auch, neue Tabellengrößen dynamisch zu erstellen. Eine der Funktionen ist ein Dropdown-Menü für verschiedene Rastergrößen, also sollten wir unsere Rastererstellungs-JavaScript-Funktion tatsächlich dort einbauen, wo sie auf Änderungen reagiert.

function buildGrid(cols, rows) {

	var tableMarkup = "";

	for (x = 0; x < cols; x++) {
		tableMarkup += "<tr>";
		for (y = 0; y < rows; y++) {
			tableMarkup += "<td>&nbsp;</td>";
		}
		tableMarkup += "</tr>";	
	}

	$("#drawing-table").html(tableMarkup)

};

Dies erstellt einen leeren String, dann gibt es eine äußere Schleife, die so oft läuft, wie es der übergebene rows-Parameter angibt, und eine innere Schleife, die so oft läuft, wie es der übergebene cols-Parameter angibt. Für jede Zeile werden umgebende <tr>-Tags an den String angehängt, und für jede Spalte werden <td>s eingefügt.

Wenn fertig, wird der HTML-Code des Rasters durch das neu erstellte Markup ersetzt. Ich war etwas neugierig auf die Geschwindigkeit der String-Verkettung für diese Art von Aufgabe, aber es scheint, dass dies keine schlechte Vorgehensweise ist. Die Alternativen wären das Erstellen und Anhängen von Elementen im laufenden Betrieb und die Verwendung von Arrays. Weitere Informationen finden Sie in diesem Forrst-Thread.

Jetzt können wir einige Variablen für die anfänglichen Zeilen und Spalten festlegen und die Funktion aufrufen.

 var cols = 20, rows = 20;

// Inital Build of Table 
buildGrid(cols, rows);

Der HTML-Code für unser Dropdown-Menü für die Rastergröße wird wie folgt aussehen

<select id="gridSize">
	<option value="10,10">10 x 10</option>
	<option value="20,20" selected>20 x 20</option>
	<option value="30,30">30 x 30</option>
</select>

Und dann werden wir auf die Änderung des Werts im Dropdown achten und die Funktion buildGrid() erneut aufrufen, wenn dies geschieht.

// Dropdown for changing Grid Size
$("#gridSize").change(function() {
	$el = $(this);
	rows = $el.val().split(",")[0];
	cols = $el.val().split(",")[1];
	buildGrid(rows, cols);
});

Ebenso prüft das Löschen des Designs einfach die aktuelle Einstellung des Dropdowns und baut das Raster mit dieser Größe neu auf.

Das eigentliche Zeichnen

Wir müssen bei der Maus und der Umsetzung der Klick-und-Ziehen-Zeichenfunktion etwas clever vorgehen. Wir können offensichtlich nicht einfach Klick-Events an die Zellen anhängen, da dies das Zeichnen mühsam machen würde. Wir müssen das mouseenter-Event verwenden, aber auch wissen, ob die Maustaste gerade gedrückt ist oder nicht. Denken wir darüber nach.

• Beim mousedown einer beliebigen Tabellenzelle wird der Zeichenzustand auf "ein" gesetzt
•   – Wenn der Radiergummi-Modus aktiviert ist, wird der Stil der Zelle entfernt
•   – Wenn der Radiergummi-Modus deaktiviert ist, wird die Zelle eingefärbt
• Beim mouseenter einer beliebigen Tabellenzelle wird geprüft, ob der Zeichenzustand aktiviert ist
•   – Wenn ja, wird die Zelle eingefärbt
• Beim mouseout irgendwo wird der Zeichenzustand auf "aus" gesetzt

// Drawing functionality
$("#drawing-table").delegate("td", "mousedown", function() {
	mouseDownState = true;
	$el = $(this);
    if (eraseState) {
    	$el.removeAttr("style");
    } else {
    	$el.css("background", curColor);
    }
}).delegate("td", "mouseenter", function() {
	if (mouseDownState) {
		$el = $(this);
	    if (eraseState) {
	    	$el.removeAttr("style");
	    } else {
	    
	    	// DRAWING ACTION
	    	$el.css("background", curColor);
	    }
	}
});
$("html").bind("mouseup", function() {
	mouseDownState = false;
});

Radiergummi-Modus

Unser Zeichenmodus ist bereits darauf vorbereitet, sowohl zu radieren als auch zu malen. Wir müssen also nur sicherstellen, dass die Variable eraseState entsprechend auf true oder false gesetzt wird. Die erste Möglichkeit, ihn zu aktivieren, ist das Klicken auf den weißen Kreis. Beachten Sie im unten stehenden HTML-Code, dass das Attribut data-color verwendet wird, um den Farbwert für die drei Farbfelder zu speichern, aber für den vierten/weißen/Radiergummi-Kreis ist der Wert "eraser".

<fieldset id="color-selector">
	<legend>Color Picker</legend>
	<div class="color red selected" data-color="red"><input type="text"></div>
	<div class="color green" data-color="green"><input type="text"></div>
	<div class="color blue" data-color="blue"><input type="text"></div>
	<div class="color eraser" data-color="eraser"></div>
	<p>Hold [Option] key for temporary erase mode</p>
</fieldset>

Wenn einer der Kreise angeklickt wird, wird die aktuelle Farbe auf die Farbe des Farbfeldes gesetzt und der Radiergummi-Modus ausgeschaltet, wenn es sich um eine Farbe handelt. Wenn der angeklickte Kreis der Radiergummi ist, wird der Radiergummi-Modus umgeschaltet. Außerdem wird eine Klasse selected angewendet, um visuelles Feedback über die Änderung zu geben.

// Color selection swatches
$("#color-selector").delegate(".color", "click", function() {
	
	$el = $(this);
	var pulledVal = $el.attr("data-color");
	
	if (pulledVal == 'eraser') {
		eraseState = true;
	} else {
		eraseState = false;
		curColor = pulledVal;
	}
	
	$(".color").removeClass("selected");
	$(this).addClass("selected");
});

Wir haben auch im Markup geschrieben, dass du die [Option]-Taste gedrückt halten kannst, um den Radiergummi-Modus umzuschalten. Das erleichtert das Zeichnen erheblich, da du zwischen den Modi wechseln kannst, ohne die Maus manuell über den Radiergummi bewegen und ihn auswählen zu müssen. Dazu überwachen wir keydown- und keyup-Ereignisse im Dokument. Wenn die Taste 18 (die Option-Taste) ist, schalten wir den Radiergummi-Modus entsprechend ein und aus und wenden auch die Klasse selected für mehr visuelles Feedback an.

// Erasing functionality through OPTION key
$(document).keydown(function(event) {
	if (event.keyCode == 18) {
		eraseState = true;
		$(".selected").addClass("previous");
		$(".color").removeClass("selected");
		$(".eraser").addClass("selected");
		
	}
}).keyup(function(event) {
	if (event.keyCode == 18) {
		eraseState = false;
		$(".color").removeClass("selected");
		$(".previous").addClass("selected").removeClass("previous");
		$("." + curColor).addClass("selected");
	}
});

Farbauswahl

Ich habe diesen jQuery Color Picker verwendet. Beachten Sie, dass jedes der Farbfelder im HTML oben ein <input type="text" /> innerhalb des <div> hatte. Diese Eingabefelder werden für die Farbauswahl verwendet, um den Wert zu speichern.