Beiträge von Sempervivum

Sempervivum

Ich wüsste nicht, dass in Canvas eine direkte Texteingabe möglich ist. Ich habe so etwas mal selbst zusammen gebaut, indem ich die Tastatureingabe abgefragt habe:

Code

                    $(document).off("keypress").on('keypress', function (event) {
                        if (active) {
                            txt += String.fromCharCode(event.which);
                            $(canvas).setLayer('text' + thisobj.idText, { text: txt + "|" })
                                .drawLayers();
                        }
                    });

http://ulrichbangert.de/div/webentwick…rawing-pad.html

Mit jCanvas realisiert, "Text" auswählen und in das Rechteck klicken.

In deinem Fall würde ich jedoch die Lösung mit Plus- und Minustasten vorziehen, weil Du dann die Eingabe nicht zu überprüfen brauchst, ob sie zulässig ist (nummerisch und Wertebereich).

Sempervivum

Ich würde dir ja gern helfen, aber leider gehen mir die Joomla-Kenntnisse ab. Hast Du die Filterung selber programmiert? Wenn ja, kannst Du sicher einen Hinweis geben, in welchem der zahlreichen JS-Files der Code steht. Generell ist es nämlich kein Problem, eine Aktion erst dann auszuführen, wenn in allen Selects etwa ausgewählt wurde.

Sempervivum

In einer for-Anweisung kann man für die Startaktionen mehrere Anweisungen, durch Komma getrennt, notieren. In diesem Fall werden die Variablen x, y und nr auf ihre Anfangswerte gesetzt. xstart ist der Anfangswert für die x-Position und ystart der für die y-Position.

In deinem Code hast Du es etwas anders gemacht, indem Du nur eine Zählvariable i führst und die Position daraus berechnest. Das geht natürlich genau so gut.

Sempervivum

Selbstverständlich:

Code

            var wrect = 50, hrect = 20, dist = 5,
                xstart = 10, ystart = 10,
                cv = $("#canvas2");
            for (var x = xstart, y = ystart, nr = 0; nr < 10; nr++) {
                cv.drawRect({
                    fillStyle: 'lightblue',
                    x: x, y: y, width: wrect, height: hrect,
                    fromCenter: false
                }).drawText({
                    fillStyle: 'black',
                    x: x + wrect / 2,
                    y: y + hrect / 2,
                    text: nr
                });
                if ((nr + 1) % 5 == 0) {
                    y += dist + hrect;
                    x = xstart;
                } else {
                    x += dist + wrect;
                }
            }

Alles anzeigen

Sempervivum

Der Grund ist, dass jCanvas per Default die Koordinaten auf das Zentrum des gezeichneten Objektes bezieht, während es beim Standard-Canvas die linke obere Ecke ist. Bei jCanvas kannst Du dies durch die Eigenschaft "fromCenter" umschalten:

https://projects.calebevans.me/jcanvas/docs/rectangles/

Sempervivum

Verrätst Du uns auch, wie Du es gelöst hast?

Sempervivum

Eine Lösung könnte jQuery.getScript() sein:

https://api.jquery.com/jquery.getscript/

Sempervivum

Das wird hier diskutiert:

https://developer.mozilla.org/en-US/docs/Web…_considerations

Zitat

HTML5 specifies that a <script> tag inserted via innerHTML should not execute.

Sempervivum

Zitat

Ich möchte aber beide haben: Einmal in blue und einmal in red.

Ach so, dann habe ich dich ganz falsch verstanden: Wenn Du zwei Boxen haben willst, musst Du sie nacheinander zeichnen, z. B. mit drawRect(), und ihnen unterschiedliche Namen geben. setLayer() dient dazu, einen vorhandenen Layer nachträglich zu ändern.

Sempervivum

Gängiges Problem: Steht das CSS in einer externen Datei gilt deren Verzeichnis als Basis für Bildpfade etc.

D. h. die URL müsste laufen:

background-image: url("../img/landing.jpg");

Sempervivum

Ja, über setLayer(), lies in der Doku nach.

https://projects.calebevans.me/jcanvas/docs/manipulateLayers/

Sempervivum

Die Funktion alignText() richtet den Text rechts aus:

HTML

<!doctype html>
<html>

<head>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jcanvas/20.1.2/jcanvas.js"></script>
</head>

<body>
        <canvas id="display1" width="220" height="220"></canvas>
        <canvas id="display2" width="220" height="220"></canvas>
        <input id="val" />
    <button id="colorbtn">Change color</button>
    <script>
        function getColor2(value, opts) {
            var color = opts.colorBar;
            if (opts.colors) {
                opts.colors.forEach(function (item, idx) {
                    if (value > item.threshold) color = item.colorAbove;
                });
            }
            return color;
        }
        function getText(value, max, opts) {
            return opts.templateText.replace("{value}", value)
                .replace("{remaining}", max - value)
        }
        function alignText(cv) {
            var maxTextWidth = cv.data("max-text-width");
            var textWidth = cv.measureText('text').width;
            var delta = maxTextWidth - textWidth;
            var xText  = cv.data("x-text");
            cv.setLayer('text', {
                x: xText + delta
            });
        }
        function erstelleBalken(selector, value, max, options) {
            var balkenEigenschaften = { barWidth: 400, barHeight: 40, barPos: 10,
                cornerRadius: 5, colorBg: "lightgrey", colorText: "black", textPos: "right", 
                templateText: "{value} min" }
            $.extend(balkenEigenschaften, options);
            $(selector).each(function (index, element) {
                var cv = $(this);
                cv.data("balkenEigenschaften", balkenEigenschaften);
                cv.data("max", max);
                if (value > max) max = value;
                var colorBar = getColor2(value, balkenEigenschaften);
                var height = 2 * balkenEigenschaften.barPos + balkenEigenschaften.barHeight;
                cv.drawText({
                    layer: true,
                    name: 'text',
                    fromCenter: false,
                    fillStyle: balkenEigenschaften.colorText,
                    strokeWidth: 4,
                    x: balkenEigenschaften.barPos, y: balkenEigenschaften.barPos,
                    fontSize: 40,
                    fontFamily: 'Arial',
                    text: balkenEigenschaften.templateText.replace("{value}", max).replace("{remaining}", max)
                });
                cv.data("max-text-width", cv.measureText('text').width);
                yBar = balkenEigenschaften.barPos + cv.measureText('text').height / 2 - balkenEigenschaften.barHeight / 2;
                if (balkenEigenschaften.textPos == "left") {
                    var xBar = balkenEigenschaften.barPos + cv.measureText('text').width + 5,
                        xText = balkenEigenschaften.barPos;
                } else {
                    var xBar = balkenEigenschaften.barPos,
                        xText = balkenEigenschaften.barPos + balkenEigenschaften.barWidth + 10;
                }
                cv.data("x-text", xText);
                var width = balkenEigenschaften.barPos + cv.measureText('text').width + 10 + balkenEigenschaften.barWidth + balkenEigenschaften.barPos;
                cv.attr("width", width);
                cv.attr("height", height);
                cv.setLayer('text', {
                    text: getText(value, max, balkenEigenschaften),
                    x: xText,
                });
                cv.drawLayers();
                cv.drawRect({
                    layer: true,
                    name: 'background',
                    fromCenter: false,
                    fillStyle: balkenEigenschaften.colorBg,
                    x: xBar, y: yBar,
                    cornerRadius: balkenEigenschaften.cornerRadius,
                    width: balkenEigenschaften.barWidth, height: balkenEigenschaften.barHeight
                });
                cv.drawRect({
                    layer: true,
                    name: 'bar',
                    fromCenter: false,
                    fillStyle: colorBar,
                    x: xBar, y: yBar,
                    cornerRadius: balkenEigenschaften.cornerRadius,
                    width: value / max * balkenEigenschaften.barWidth, height: balkenEigenschaften.barHeight
                });
            });
        }
        function sychronisiereBalken(selector) {
            var maxTextWidth = 0;
            $(selector).each(function (index, element) {
                var cv = $(element);
                var currentWidth = cv.data("max-text-width");
                if (currentWidth > maxTextWidth) maxTextWidth = currentWidth;
            });
            $(selector).each(function (index, element) {
                var cv = $(element);
                var balkenEigenschaften = cv.data("balkenEigenschaften");
                if (balkenEigenschaften.textPos == "left")
                    xText = balkenEigenschaften.barPos;
                else
                    xText = balkenEigenschaften.barPos + maxTextWidth + balkenEigenschaften.barWidth + balkenEigenschaften.barPos;
                cv.setLayer('background', {
                    x: maxTextWidth + balkenEigenschaften.barPos
                }).setLayer('bar', {
                    x: maxTextWidth + balkenEigenschaften.barPos
                }).setLayer('text', {
                    x: xText
                }).drawLayers();
                alignText(cv);
                cv.attr("width", balkenEigenschaften.barPos + 2 * maxTextWidth + balkenEigenschaften.barWidth + balkenEigenschaften.barPos)
                    .drawLayers();
            });
        }
        erstelleBalken("#display1", 50, 100, {textPos: "left"});
        erstelleBalken("#display2", 5, 100, {textPos: "left"});
        sychronisiereBalken("#display1, #display2");

    </script>

</body>

</html>

Alles anzeigen

Möglicher Weise musst Du das in der Funktion, die den Balken aktualisiert, auch noch einfügen.

Sempervivum

OK, ich werde eine Blick darauf werfen. War eine schlechte Wahl, den Weg mit Canvas statt HTML/CSS zu gehen, aber ich möchte jetzt auch nicht alles neu machen.

Sempervivum

Zitat

Also ich habe es jetzt hinbekommen so wie ich es haben möchte

Wie hast Du es denn hin bekommen, hast Du meinen Code aus Posting #79 verwenden können?

Sempervivum

jCanvas einbinden:

Code

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jcanvas/21.0.0/jcanvas.js"></script>

Sempervivum

Um sie nach dem Zeichnen ansprechen zu können, musst Du sie als Layer definieren und ihnen einen Namen geben:

https://projects.calebevans.me/jcanvas/docs/addLayers/

Dann kannst Du sie später auch ändern:

https://projects.calebevans.me/jcanvas/docs/manipulateLayers/

Sempervivum

Code

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

<script src="jcanvas.min.js"></script>

Die erste Zeile reicht aus. Für die zweite Zeile musst Du jCanvas herunter laden und lokal bzw. auf deinem Webspace ablegen.

Sempervivum

Der Grund ist lediglich, dass Du ein Problem mit den Hochkommas hast. So wird es funktionieren:

$ges= '<p class="pfehlt">Das Passwort fehlt!</p>';

Sempervivum

Zitat

muss ich dann ,siehe Bild, mehrere Canvas anlegen wenn ich z.B. unterschiedliche Schriften haben will?,

Nein, Du kannst die Farben, Schriftarten etc. während des Zeichnens umschalten. fillStyle z. B. wirkt nur auf das, was danach gezeichnet wird und verändert nicht das, was davor gezeichnet wurde. Ich möchte jetzt nicht einsteigen und Beispiele dafür geben, sondern empfehlen lieber gleich eine Bibliothek wie jCanvas zu verwenden. Dort gibt man die Eigenschaften direkt beim Zeichnen des Objektes an und kann sie später auch noch ändern. IMO ist dies wesentlich klarer.

https://projects.calebevans.me/jcanvas/docs/text/

Sempervivum

Zitat

irgendwie bekomme ich es nicht hin, dass eine Schrift vor einem farbigen Hintergrund zu lesen ist.

Ich habe es mit ctx.globalAlpha = 0.2 probiert, hat mal funktioniert, dann wieder nicht.

Was soll den transparent sein, die Schrift oder der Hintergrund? Oder das ganze Canvas? Hast Du es mit rgba() versucht?

Beiträge von Sempervivum

Canvas Texteingabe möglich

Filterausgabe unterdrücken

jcanvas Rectangle dynamisch erzeugen

jcanvas Rectangle dynamisch erzeugen

Canvas jcanvas Unterschiede bei den Koordinaten?

[Javascript] Ajax-Rückgabe

[Javascript] Ajax-Rückgabe

[Javascript] Ajax-Rückgabe

jCanvas: Layer über Namen aufrufen

Bild wird nicht angezeigt

jCanvas: Layer über Namen aufrufen

Java Script Bibliotheken

Java Script Bibliotheken

Java Script Bibliotheken

Jcanvas Startprobleme

jcanvas Einzelne Elemente ansprechen

Installation jscanvas

class mitgeben ?

Canvas: Wie handle ich ctx.fillRect und transparence

Canvas: Wie handle ich ctx.fillRect und transparence