[FRAGE] Fabric.js

HolgerGr · 19. Feb. 2015

Hallo zusammen,

ich habe eigentlich tausend Fragen zum Thema fabric.js. Wer's nicht kennt: Das ist eine library, die die Verwendung von Canvas vereinfacht.
Fabric.js Javascript Canvas Library

Ich war zuerst total happy, denn sie scheint sozusagen all meine Hoffnungen zu erfüllen. Leider fange ich gerade erst mit JavaScript an und wühle mich momentan durch Berge von Tutorials.

Gestolpert bin ich zuerst durch diese Seite auf fabric.js
HTML5-Canvas: Einfacher zeichnen mit

Dort steht:

Ist „Fabric.js“ im Headbereich des HTML-Dokumentes eingebunden und ein „<canvas>“-Element angelegt, können wir schnell eine erste Form zeichnen.

Wie das mit dem Einbinden aber genau geht, steht da leider nicht. Naja dachte ich, guckst Du halt auf fabricsjs.com. Dort finden sich dutzende von Hilfedateien und Demos. Leider aber kein Hinweis wie man diese library einbindet.

Bei den Demos habe ich in den Quelltext geguckt. Dort wird auf eine fabrics.js verweisen. Nun...ich habe mir jetzt rei mal die zip datei mit sämtlichen Dateien runtergeladen und entpackt. Es befindet sich definitiv keine fabrics.js darin.

Alle Tutorials und Anleitungen die ich gefunden haben, enthalten stets nur Codeschnipsel. Alle funktionieren bei mir nicht. Vermutlich weil ich an anderer Stelle etwas falsch mache.

Was ich echt brauchen könnte wäre ein ganz simpler aber kompletter Code. Einer, der vielleicht nur ein Rechteck zeichnet wo aber alles in richtiger Referenz zueinander steht. Und ich rätsel noch immer herum wie man eine fabric.js einbinden soll, die es nicht gibt...

Hilfeeeee

Viele Grüße
Holger

mikdoe · 19. Feb. 2015

Normalerweise bindet man JS zwischen <head> und </head> oder im <body> mit dieser Syntax ein:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Das ist ein Beispiel, wenn die Lib nicht auf dem eigenen Server liegen soll.
Ansonsten, wenn man sich die auf den eigenen legt (was ich persönlich empfehle) so:
<script type="text/javascript" src="/mein_pfad_zu_js/jquery.min.js"></script>

tsseh · 19. Feb. 2015

HolgerGr schrieb:
ich habe eigentlich tausend Fragen zum Thema fabric.js.

du hast tausend Fragen zum Thema js

HolgerGr schrieb:
Wie das mit dem Einbinden aber genau geht, steht da leider nicht.

du willst eine js bibliothek nutzen und weisst nichtmal wie man js einbindet?
du solltest vorne anfangen und nicht mittendrinn.
JavaScript Where To

HolgerGr schrieb:
Naja dachte ich, guckst Du halt auf fabricsjs.com. Dort finden sich dutzende von Hilfedateien und Demos. Leider aber kein Hinweis wie man diese library einbindet.

js grundlagenwissen wird in frameworks immer vorrausgesetzt.

- - - Aktualisiert - - -

mikdoe schrieb:
Ansonsten, wenn man sich die auf den eigenen legt (was ich persönlich empfehle)

empfehlen sollte man das nicht.
tatsächlich hat die google hosted variante den vorteil, dass die wahrscheinlichkeit sehr groß ist, dass die lib schon auf deinem rechner gecacht ist durch andere seiten die diese auch verwenden.
falls der service allerdings mal temporär nicht zur verfügung steht sollte man auch immer eine eigene version auf dem server haben und die als fallback nutzen

mikdoe · 19. Feb. 2015

Sehr gutes Argument, hesst! Aber wie baut man das Fallback denn in JS? Dann würde ich das nämlich bei mir auch so machen. Ziehe von Google und Fallback vom eigenen.

tsseh · 19. Feb. 2015

bei require https://github.com/jrburke/requirejs/wiki/Upgrading-to-RequireJS-2.0#pathsfallbacks
nativ einfach abprüfen und mit docoment.write die eigene einbinden

Code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script>if (typeof jQuery == 'undefined') { document.write('<script src="jquery.js"><\/script>'); }
</script>

HolgerGr · 19. Feb. 2015

hesst schrieb:
du hast tausend Fragen zum Thema js

du willst eine js bibliothek nutzen und weisst nichtmal wie man js einbindet?
du solltest vorne anfangen und nicht mittendrinn.
JavaScript Where To

Nein, das ist nicht was ich geschieben habe. Wie man jquery einbindet weiß ich ach. Das ist bestens dokumentiert.
Ich schrieb:

Bei den Demos habe ich in den Quelltext geguckt. Dort wird auf eine fabrics.js verweisen. Nun...ich habe mir jetzt rei mal die zip datei mit sämtlichen Dateien runtergeladen und entpackt. Es befindet sich definitiv keine fabrics.js darin.

Wie soll ich eine Referenz auf eine Datei setzen, die es nicht gibt?

Vielen Dank für die Hilfe.

Grüße
Holger

- - - Aktualisiert - - -

Okay, hier mal der Code, den ich die ganze Zeit zu Laufen zu bringen versuche:

Code:

<html> 
 <head> 
 
 <script> 
 window.onload = draw; // Execute draw function when DOM is ready
function draw() { // Assign our canvas element to a variable
var canvas = document.getElementById("canvas1"); // Create the HTML5 context object to enable draw methods
var ctx = canvas.getContext("2d"); // fillStyle (r, g, b, alpha);

ctx.fillStyle = "rgba(0,200,0,1)"; // fillRect (X, Y, width, height);
ctx.fillRect (36, 10, 22, 22); 

} </script> 

<script type="text/JavaScript" src="fabric.js">
window.onload = draw;
function draw() {

// create a wrapper around native canvas element (with id="c")
var canvas = new fabric.Canvas('c');

// create a rectangle object
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 20,
  height: 20
});

// "add" rectangle onto canvas
canvas.add(rect);
}
</script>

</head> 

<body> 
<canvas id="canvas1" width="400" height="300"></canvas> 
<canvas id="c" width="400" height="300"></canvas>

</body> 
</html>

Die html-Datei befindet sich im gleichen Ordner wie die fabrics.js-library. Da es keine Datei mit dem Namen fabric.js gibt, gehe ich davon aus, daß die Referenz auf das Rootverzeichnis der Librry gesetzt werden muss. Dieses heißt farbric.js 1.4.1. Ich habe es jetzt umbenannt in fabric.js.

Wie man sieht verweist die scr im einleitenden script-Tag darauf.

Das erste Beispiel (canvas auf herkömmlichen Weg) funktioniert. Das zweite Beispiel (canvas via fabric.js) funktioniert nicht. Warum nicht? Wo ist der Fehler?

tsseh · 20. Feb. 2015

HolgerGr schrieb:
Wie man jquery einbindet weiß ich ach. Das ist bestens dokumentiert.

dann mach das mit Fabric.js genauso

HolgerGr schrieb:
Wie soll ich eine Referenz auf eine Datei setzen, die es nicht gibt?

https://github.com/kangax/fabric.js/tags

HolgerGr schrieb:
Die html-Datei befindet sich im gleichen Ordner wie die fabrics.js-library.

hast sie also gefunden?

HolgerGr schrieb:
Da es keine Datei mit dem Namen fabric.js gibt,

du hast den downloadlink also selbst gefunden, weisst aber nicht wie man in einem verzeichniss nach einer datei sucht?

HolgerGr schrieb:
gehe ich davon aus, daß die Referenz auf das Rootverzeichnis der Librry gesetzt werden muss.

Grundlagenwissen! wie kommst du auf diese annahme? geraten? raten ist immer eine schlechte idee!

HolgerGr schrieb:
Dieses heißt farbric.js 1.4.1. Ich habe es jetzt umbenannt in fabric.js.

das verzeichniss? egal wie das heißt, mit version ist es ein wenig übersichtlicher.

HolgerGr schrieb:
Wie man sieht verweist die scr im einleitenden script-Tag darauf.

ich sehe dass die src auf eine datei fabric.js verweisst, die im selben verzeichniss wie dein html file liegen muss.

HolgerGr schrieb:
Das zweite Beispiel (canvas via fabric.js) funktioniert nicht. Warum nicht? Wo ist der Fehler?

im verzeichniss deiner html datei liegt keine datei fabric.js
* lade die letzte version von fabric.js runter (fabric.js-1.4.13.zip)
* entpacke an die gewünste stelle
* in fabric.js-1.4.13.zip ist ein verzeichniss dist darin ist die fabric.js eine minify version fabric.min.js und eine version für require

HolgerGr · 20. Feb. 2015

Hallo zusammen,

des Rätsels Lsung oder was ist falsch in meinem Cde lautet:

Der JavaScript-Code muss bei fabric.js unter den Canvas-Tag. Das ist bei Canvas normalerweise nicht so. Wie um Himmels Willen soll man darauf von alleine kommen und wieso ist das nirgendwo dkumentiert.

Viele Grüße
Holger

tsseh · 22. Feb. 2015

HolgerGr schrieb:
Der JavaScript-Code muss bei fabric.js unter den Canvas-Tag. Das ist bei Canvas normalerweise nicht so. Wie um Himmels Willen soll man darauf von alleine kommen und wieso ist das nirgendwo dkumentiert.

weil es nicht so ist. grundlagen!

[FRAGE] Fabric.js

HolgerGr

New member

mikdoe

Moderator

tsseh

Lounge-Member

mikdoe

Moderator

tsseh

Lounge-Member

HolgerGr

New member

tsseh

Lounge-Member

HolgerGr

New member

tsseh

Lounge-Member