Login

***admin*** · 28.04.2022, 20:37

So ganz verstehe ich das nicht.
Ich verstehe das so.
Wenn man die Textfelder ausfüllt und dann auf der Farbe klickt, soll das in einer Tabelle geschrieben werden.
Also so ?

Biwo · 29.04.2022, 17:49

Wenn ich mir ein Muster überlege, nehm ich normalerweise ein kariertes Blatt. Da steht dann eine Kachel für eine Masche, die ich später stricke. Und dann mal ich auch mal Kacheln aus oder markiere sie mit einer Farbe, damit ich mir vorstellen kann, wie das am Ende aussehen könnte. Das würd ich aber gern digital machen. Die ersten zwei Formulare spucken also erstmal nur Werte aus, wie groß ein Mustersatz sein soll. Mit dem dritten Feld will ich dann einzelne Zellen farblich markieren können.
Tut mir Leid dass das so umständlich ist, ich hoffe, dass das so leichter zu verstehen ist.

***admin*** · 29.04.2022, 22:23

Das wird aber etwas komplizierter.
Wie viele Kacheln sind das in etwa, die du da brauchst?

Man müsste das schon anders bauen .
Erstmal die Kacheln erstellen, die du brauchst .
An besten mit Javascript und create Dokument.
Und dann den Color Picker auf jeder Kachel aufrufbar machen.
Wenn man dann alle Kacheln markiert hat, mit einer Farbe, was soll dann passieren?

***admin*** · (Dieser Beitrag wurde zuletzt bearbeitet: 30.04.2022, 03:15 von admin.)

Du solltest sowas in der Art bauen

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>

***admin*** · 01.05.2022, 16:52

Der Code von mir aus #14 kann man jetzt so nicht einfach die Variablen austauschen.

Ich frage mal anders.
Würde dir sowas helfen, wie in Beitrag #14 zu sehen ist.
Ich würde dann mal was bauen, wo du die Kästchen ändern kannst , also Höhe und Breite anpassen kannst.
Bei dem Code geht das so nicht so einfach.
Man müsste da einiges ändern, um das Flexibel zu machen.

Wenn das aber so gut ist und du das in Formular so haben willst das du Höhe und breite anpass haben möchtest, werde ich mal versuchen das umzubauen

09.05.2022, 13:51

Könntest du mir vllt erklären, warum man das in dem Fall nicht mit Variablen machen kann?
Das würde mir in jedem Fall helfen. Vielen, vielen Dank!

Biwo · 09.05.2022, 13:52

Oh, war nicht angemeldet. Also wenn das ginge, wär das wie gesagt super hilfreich.

***admin*** · 09.05.2022, 21:16

so einfach geht das mit den Code nicht. Wie viele Felder brauchst du den maximal , also vertikal und horizontal ?

Biwo · 12.05.2022, 17:58

mh, schwer zu sagen. Aber 100x100 wäre eine gute Größe.

Login
Benutzername:
Passwort:	Passwort vergessen?
	Merken