• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[GELÖST] Hilfe bei CreateJS + txtJS

alphakanal

New member
Hallo zusammen!

Ich bin so ziemlich neu bei allem was mit Javascript / GitHub / Repository und Co. betrifft - daher schon mal vorab Entschuldigung für dämlich Fragen :icon6: :p

Habe zwar ein paar Erfahrungen mit C# und AS3 - aber eher auf advanced-Einsteiger-Niveau

Ich würde gerne die CreatJS Bibliothek mit der txtJS Erweiterung in meine Seite integrieren - doch irgendwie krieg ich es nicht zum laufen. Wenn ich mir txtJS bei Github herunterlade und lokal wie auch online die Beispiele öffne bleib die Seite leer ohne dass etwas passiert.

Die Pfade zu den script Dateien in den Beispiel HTMLs checken ist bei mir noch drin, aber dann wars das auch schon :( Jetzt weiß ich halt ned ob wo ich da was falsch bzw. noch etwas ändern muss.

Würde mich auf jeden Tip freuen!! :)
 
Zuletzt bearbeitet von einem Moderator:
in welcher umgebung hast du probiert? wie sieht das html der seite aus (bitte in code tags posten)? lokal einen webserver installiert? was sagt die fehlerkonsole des browsers (F12)? wir brauchen mehr details.
 
Hi!
Also ich versuch es lokal ( WIN 10 ) sowio online. lokal -> vs code mit http-server

Dateien/Ordner sind original aus der github ZIP - hab lediglich den Pfad zu pathseg.js und txt.js geändert - und auch die js dementsprechend abgelegt ;)

HTML sieht so aus:
HTML:
<!DOCTYPE html>
<html>
<head>
    <title>txt: PathText Example</title>

    <script src="http://code.createjs.com/easeljs-0.8.0.min.js"></script>
    <script type="text/javascript" src="js/pathseg.js"></script>
    <script type="text/javascript" src="js/txt.js"></script>

    <script type="text/javascript">
    var canvas;
    var stage;

    var PIXEL_RATIO = (function () {
    var ctx = document.createElement("canvas").getContext("2d"),
        dpr = window.devicePixelRatio || 1,
        bsr = ctx.webkitBackingStorePixelRatio ||
              ctx.mozBackingStorePixelRatio ||
              ctx.msBackingStorePixelRatio ||
              ctx.oBackingStorePixelRatio ||
              ctx.backingStorePixelRatio || 1;
        return dpr / bsr;
    })();

    createHiDPICanvas = function(w, h, ratio) {
        if (!ratio) { ratio = PIXEL_RATIO; }
        var can = document.createElement("canvas");
        can.width = w * ratio;
        can.height = h * ratio;
        can.style.width = w + "px";
        can.style.height = h + "px";
        can.getContext("2d").setTransform(ratio, 0, 0, ratio, 0, 0);
        return can;
    }
    

    function init() {
        
        canvas = createHiDPICanvas( 1000 , 1000 , 2 );
        document.body.appendChild( canvas );
        stage = new createjs.Stage(canvas);
        stage.scaleX = stage.scaleY = 4;
        
        stage.addChild( new txt.PathText({
            x:-46.0000,
            y:101.0000,
            flipped:false,
            text:'This Is Text On Path',
            font:'lobster',
            size:16,
            valign:txt.VerticalAlign.Center,
            path:'M 226 159.333333333333 C 350.816352746667 159.333333333333 452 123.665351484444 452 79.6666666666667 C 452 35.667981848889 350.816352746667 0 226 0 C 101.183647253333 0 0 35.667981848889 0 79.6666666666667 C 0 123.665351484444 101.183647253333 159.333333333333 226 159.333333333333 Z',
            start:620.5843673934,
            end:394.750579307083,
            debug:true,
            tracking:0
        }));
        
      

        stage.update();



    }

    </script>

</head>
<body onload="init()">
</body>
</html>

Mit der Console bin ich erst am Einarbeiten und noch nicht so fit - jedoch sind beim DOM Tab einige Knoten rot -> Screenshot. Denke dass es Probleme mit den Fonts und/oder deren Pfand gibt und diese daher nicht angezeigt werden. Die Fonts sind im Root des Projekts abgespeichert.

Hoffe das hilft schon mal ein wenig weiter - sorry wenns umständlich erklärt ist. Alles ein wenig neu für mich :confused:
 

Anhänge

  • Console.JPG
    Console.JPG
    65,3 KB · Aufrufe: 4
Zuletzt bearbeitet:
und die fehler sagen dir nichts? in der txt.js wird versucht, auf etwas nicht definiertes zuzugreifen. ist da irgendeine js vlt. nicht geladen?
 
Eben nicht - alle js sind geladen und parat. Glaube eben dass irgendwelche Schriften nicht geladen werden und deswegen nicht auch nicht angezeigt werden.

In dem Projekt ist ein Font Ordner dabei jedoch finde ich nicht wo ich den Pfad zum Ordner einstellen kann.

Update:

TATA!!!! Habe den Fontordner aus dem Projekt ins Rootverzeichnis der Webseite gelegt - und nun sind die Schriften da! Vorher war alles in nem Unterordner...
Danke für die Mühe :eagerness:
 
Zuletzt bearbeitet:
Zurück
Oben