Tabellenzellen füllen mit Colorpicker - kann jemand helfen? 3
Hallo zusammen!
Ich hab vor Kurzem angefangen Javascript zu lernen und möchte ein kleines Programm schreiben, mit dem man Strickmuster planen kann.
Dazu frage ich in zwei Formularen ab, wie viele Maschen der oder die NutzerIn in Breite und Höhe haben möchte.
Den Colorpicker habe ich aus einem Tutorial. Mir geht es vor allem um den letzten Absatz, wo ich einfach nicht weiter weiß (this.style.backgroundcolor= XXX?)
Über Hinweise und Tipps wäre ich Sau dankbar! Vielen Dank schonmal!
Der hier verwendete Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Favicon Generator</title>
<link href="/css_webseite/canvaspaint_r.css" rel="stylesheet">
<link href="/css_webseite/font-awesome.min.css" rel="stylesheet">
<style>
#canvaspaint_tab_container {
}
#upload_tab_container {
display: none !important;
}
#typo_tab_container
{
display: none !important;
}
</style>
</head>
<body class="noselect" data-lang="de">
<div id="canvaspaint_tab_container">
<div id="canvaspaint_editor" class="canvaspaint_tabcontent">
<div id="toolbar">
<div id="tool-pencil" class="tool tool-pencil active"><img src="/image/tool_paint.svg" width="30" height="30"></div>
<div id="tool-eraser" class="tool tool-eraser"><img src="/image/tool_eraser.svg" width="30" height="30"></div>
<div id="tool-colorpicker" class="tool tool-colorpicker"><img src="/image/tool_pipette.svg" width="30" height="30"></div>
<div id="tool-colorselection"><button id="colorselector" class="jscolor" data-jscolor="{valueElement:null,value:'000000',onFineChange:'update(this)'}"> </button></div>
</div>
<div id="maincanvas_editor"><svg id="oncanvassvg_editor"></svg></div>
</div>
</div>
<div id="typo_tab_container">
<div id="canvaspaint_editor_typo" class="canvaspaint_tabcontent">
<div id="maincanvas_editortypo"><svg id="oncanvassvg_editortypo"></svg></div>
</div>
</div>
<script src="/js_webseite/jquery.js"></script>
<script src="/js_webseite/snap.svg-min.js"></script>
<script src="/js_webseite/jscolor.min.js"></script>
<script>
var oncanvassnap = Snap("#oncanvassvg_editor");
var oncanvasid = '#oncanvassvg_editor';
var oncanvaspreview = Snap("#canvaspreview_editor");
var oncanvastyposnap = Snap("#oncanvassvg_editortypo");
//var oncanvastypoid = '#oncanvassvg_editortypo';
var oncanvaspreviewtypoid = '#canvaspreview_editortypo';
var oncanvaspreviewtypo = Snap("#canvaspreview_editortypo");
var maincanvasid = "#maincanvas_editor";
var startColor = "#ffffff";
var currentColor = "#000000";
var initialgridsize =256;
//$("#oncanvassvg_editor").css('width',initialgridsize+'px');
var initialpixelscale = 16;
var backgroundcolor = "#ffffff";
var fontcolor = "#000000";
var mouseX = 0;
var mouseY = 0;
//initialise();
//function initialise(){
fillgrid(initialgridsize,initialpixelscale,oncanvassnap, oncanvaspreview);
fillgrid(initialgridsize,initialpixelscale,oncanvastyposnap, oncanvaspreviewtypo);
drawcharsandbackground();
//}
function fillgrid(gridsize,pixelscale,selectedsnap, previewcanvas) {
var cellsinarow = gridsize / pixelscale;
var cellcount =cellsinarow * cellsinarow;
var currentX = 0;
var currentY = 0;
var cellnr = 0;
var rownr = 0;
for (i = 0; i < cellcount; i++) {
if (currentX === gridsize) {
currentX = 0;
currentY = currentY + pixelscale;
rownr = rownr + 1;
}
drawpixel(currentX,currentY,pixelscale,startColor,selectedsnap,cellnr,rownr);
currentX = currentX + pixelscale;
cellnr = cellnr + 1;
}
}
function drawpixel(posX, posY, pixelscale, pixelcolor,selectedsnap,cellnr,rownr) {
var pixelid = posX.toString() + '' + posY.toString();
var svgPixel = selectedsnap.rect(posX, posY, pixelscale, pixelscale).attr({ id: 'cp_pxl_' + pixelid, class: 'cp_pxl', 'data-cellnr': cellnr, 'data-rownr': rownr });
svgPixel.attr({
fill: pixelcolor,
strokeWidth: 0
});
$('cp_pxl_'+pixelid).attr('fill', pixelcolor);
}
function changepixelcolor(pixelid) {
if ($("#tool-colorpicker").hasClass('active')) {
var pixelselected = document.getElementById(pixelid);
var pickedcolor = pixelselected.style.fill;
if (pickedcolor == "") {
pickedcolor = startColor;
}
document.getElementById('colorselector').jscolor.fromString(pickedcolor);
currentColor = pickedcolor;
}else{
var drawincolor = currentColor;
if ($("#tool-eraser").hasClass('active')) {
drawincolor = startColor;
}
var pixelselected = document.getElementById(pixelid);
pixelselected.style.fill=drawincolor;
var pixelselected = document.getElementById('p1616_' + pixelid);
$('#' + pixelid).attr('fill', drawincolor);
$('#p1616_' + pixelid).attr('fill', drawincolor);
}
}
//function changepixelcolor_by_coords(cellnr,rownr, color) {
// $(oncanvastypoid + ' .cp_pxl[data-cellnr="' + cellnr + '"][data-rownr="'+rownr+'"]').css('fill', color);
// $(oncanvastypoid + ' .cp_pxl[data-cellnr="' + cellnr + '"][data-rownr="'+rownr+'"]').attr('fill', color);
//}
function fillbackground() {
var cellpos = 0;
var rowpos = 0;
var posc = 0;
var posr = 0;
for (index = 0; index < initialgridsize; ++index) {
posc = cellpos;
posr = rowpos;
// changepixelcolor_by_coords(posc,posr,backgroundcolor);
cellpos = cellpos + 1;
if (cellpos == 16) {
rowpos = rowpos + 1;
cellpos = 0;
}else{
}
}
}
function drawcharsandbackground() {
fillbackground();
}
var clicking = false;
$(oncanvasid).mousedown(function(){
clicking = true;
});
$(document).mouseup(function(){
clicking = false;
});
$(oncanvasid + " .cp_pxl" ).on( "mousemove", function(e) {
if(clicking == false) return;
mouseX = e.pageX - this.offsetLeft;
mouseY = e.pageY - this.offsetTop;
$(oncanvasid + " .cp_pxl" ).css('cursor', 'crosshair');
$(oncanvaspreview).css('cursor', 'crosshair');
var selectedid = this.id;
if(e.which==1)
{
changepixelcolor(selectedid);
};
});
$(oncanvasid + " .cp_pxl" ).on( "click", function(e) {
mouseX = e.pageX - this.offsetLeft;
mouseY = e.pageY - this.offsetTop;
var selectedid = this.id;
changepixelcolor(selectedid);
});
$( "#toolbar .tool" ).on( "click", function(e) {
$("#toolbar .tool").removeClass('active');
$(this).addClass('active');
});
function update(jscolor) {
currentColor = jscolor.toHEXString();
}
function update_font(jscolor) {
fontcolor = '#' + jscolor;
drawcharsandbackground();
}
</script>
</body>
</html>