Beiträge von Sempervivum

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?

Sempervivum

Zitat

Code

/* So ist es falsch: */
div.klasse { background-color: black; }

Warum sollte das falsch sein?

Sempervivum

Code

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

var ctx1 = c.getContext("2d");

var ctx2 = c.getContext("2d");

var ctx3 = c.getContext("2d");

var ctx4 = c.getContext("2d");

Alles anzeigen

Zitat

warum hat ctx2 die farbe von ctx1. Sind das nicht zwei verschiedene Objekte oder wie man das nennt?

In Javascript ist es i. allg. so, dass mit Referenzen auf Objekte gearbeitet wird. In diesem Fall nehme ich an, dass es das Context-Objekt für ein Canvas nur einmal gibt und dass getContext jeweils nur die Referenz bzw. einen Verweis auf dieses Objekt liefert. Daher wirken die Aktionen, die man darauf anwendet, auf das selbe Objekt.

Sempervivum

Das ist bei allen HTML-Elementen so.

Beiträge von Sempervivum

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

Probleme mit :hover, wie kann ich auf ein anderes Element zugreifen

Canvas: Wie handle ich ctx.fillRect und transparence

komischer kasten