Login

Biwo · 01.05.2022, 12:20

Nochmal vielen vielen Dank für die Hilfe und die Geduld!

Die Angaben für maincanvas_editor, maincanvas_editortypo und pixelscale sind jetzt ja fix, ich frag mich, ob ich die nicht einfach gegen eine Variable austauschen kann. Hintergrund ist, dass ich die Formulare zur Datenabfrage gerne übernehmen würde. Denn je nachdem, welches Muster man plant, ist vllt auch mal ein Rechteck bzw. einfach eine andere Zahl an Zellen geschickt.

Ich hab jetzt mal angefangen, in deinem Code rumzupfuschen. Es funktioniert noch nicht, wie ich mir das vorstelle, aber geht das überhaupt?
Hier mal, was ich gemacht hab.

CSS (Nur der Abschnitt, den ich geändert habe):

Code:
#oncanvassvg_editor {

    height: var(--grid-height)px;

    width: var(--grid-width)px;

    background-color: white;

    cursor: crosshair;

    border: 1px solid #cccccc;

}

#canvaspreview_editor {

    background-color: white;

    border: 0px;

    height: 16px;

    width: 16px;

}

#oncanvassvg_editortypo {

    height: var(--grid-height)px;

    width: var(--grid-width)px;

    background-color: white;

    border: 1px solid #cccccc;

}

HTML (komplett):

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 rel="stylesheet" href="Test Pattern Builder CSS.css">

    <link href="https://basti1012.bplaced.net/testodner_forums/javascriptforum/stickmuster/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 class="settings">

        <form>

        <label for="h-stitches">Vertical Stitches:</label>

        <input type="number" min="0" id="v-stitches" name="v-stitches"><br><br>

        <label for="v-stitches">Horizontal Stitches:</label>

        <input type="number" min="0" id="h-stitches" name="h-stitches">

        </form>

    </div>

<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="https://basti1012.bplaced.net/testodner_forums/javascriptforum/stickmuster/tool_paint.svg" width="30" height="30"></div>

            <div id="tool-eraser" class="tool tool-eraser"><img src="https://basti1012.bplaced.net/testodner_forums/javascriptforum/stickmuster/tool_eraser.svg" width="30" height="30"></div>

            <div id="tool-colorpicker" class="tool tool-colorpicker"><img src="https://basti1012.bplaced.net/testodner_forums/javascriptforum/stickmuster/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)'}">&nbsp;</button></div>

        </div>

        <div id="maincanvas_editor"><svg id="oncanvassvg_editor"></svg>

            <script>

                let GRID_HEIGHT = document.getElementById("v-stitches").value;

                let GRID_WIDTH = document.getElementById("h-stitches").value;

                const GRID = document.getElementById("#oncanvassvg_editor");

                GRID.style.setProperty("--grid-width", GRID_WIDTH);

                GRID.Element.style.setProperty("--grid-height", GRID_HEIGHT);

            </script>

        </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>

        <script>

            let GRID_HEIGHT = document.getElementById("v-stitches").value;

            let GRID_WIDTH = document.getElementById("h-stitches").value;

            const GRID_TYPO = document.getElementById("#oncanvassvg_editortypo");

            GRID_TYPO.style.setProperty("--grid-width", (GRID_WIDTH*16));

            GRID_TYPO.Element.style.setProperty("--grid-height", (GRID_HEIGHT*16));

        </script>

    </div>

</div>

<script src="https://favicon.1and1.org/js/jquery-3.1.0.min.js"></script>

<script src="https://basti1012.bplaced.net/testodner_forums/javascriptforum/stickmuster/snap.svg-min.js"></script>

<script src="https://basti1012.bplaced.net/testodner_forums/javascriptforum/stickmuster/jscolor.min.js"></script> <!-- Color-Picker -->

<script>

let GRID_HEIGHT = document.getElementById("v-stitches").value;

let GRID_WIDTH = document.getElementById("h-stitches").value;

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 =  GRID_HEIGHT*16*GRID_WIDTH*16;

//$("#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(initialgridsize,pixelscale,selectedsnap, previewcanvas) {

    var cellsinarow = initialgridsize / pixelscale;

    var cellcount = GRID_HEIGHT * GRID_WIDTH;

    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>

Login
Benutzername:
Passwort:	Passwort vergessen?
	Merken