[JS] RequireJS en verschillende modules/classes - benadering

[M4RTiN]

Ik ben sinds kort aan het verdiepen aan clientside javascript, ik wil een online applicatie maken waarbij ik (voor mij) de nieuwste technieken wil toepassen.

Op basis van requirejs heb ik een config die o.a. jquery, dropzone en fabric.js en een eigen module inlaad, het starten van de pagina begint vervolgens met mijn eigen app, in deze app voer ik vervolgens diverse jquery commando's en dropzone commando's uit. Al deze code die dus prima werkt bevindt zich allemaal binnen:

code:

define(['module'], function(module){

  $(function() {
  }
});

Nu wil ik fabric hier aan toevoegen, en op zich werkt dit gedeeltelijk.

Ik gebruik hiervoor o.a.:

code:

    var canvas = new fabric.Canvas('c');
    canvas.backgroundColor = '#FFFFFF';
    canvas.setHeight(500);
    canvas.setWidth(500);

Maar als ik een afbeelding wil toevoegen met bijvoorbeeld deze code:

code:

  function LoadImageArtboard(fid) {



    var src = 'etc etc etc etc='+ fid;

    fabric.Image.fromURL(src, function(oImg) {

        oImg.set({

      selectable: true,
          borderColor: 'grey',
          cornerColor: 'grey',
        cornerSize: 6,

       });

      //oImg.setOpacity(1);

    canvas.add(oImg).renderAll();
    canvas.setActiveObject(oImg);
    });
  }

Werkt dit alleen buiten de module scope en zelfs dan alleen als ik niet een eigen functie heb gemaakt van het toevoegen van de afbeelding.

Javascript console zegt me:

code:

22:50:59.022 TypeError: canvas.add is not a function
LoadImageArtboard/<() positioner.js:249
fabric.Image.fromURL/<() fabric.js:2
fabric.util.loadImage/i.onload() fabric.js:2
1 positioner.js:249:5

Ik kan me voorstellen dat functie's nu niet meer rechtstreeks benaderbaar zijn omdat ik nu binnen mijn eigen module zit te programmeren en dat fabric via een omweg (via requirejs?) benaderbaar is. Echter is het dan wel raar dat ik wel een "var canvas = new fabric.Canvas('c');" kan uitvoeren.

[pedorus]

Het lijkt me dat de variabele canvas niet het type heeft dat je verwacht, en daarom geen .add() functie. Je zou een andere, niet-overlappende naam kunnen gebruiken, of canvas als parameter mee kunnen geven aan LoadImageArtboard. Je zou ook op die regel een breakpoint kunnen zetten, en kunnen kijken wat het wel is.

[M4RTiN]

En zo bleek het alweer een heel simpel probleem te zijn. Na aanleiding van de tip hierboven ging ik nadenken over hoe ik het in PHP zou doen. Met logisch redeneren zie je al snel dat het object canvas binnen de functie niet bereikbaar is omdat het object canvas ook binnen een functie is aangemaakt.

Oplossing was het canvas object te returnen in het eerste functie, het canvas object mee te geven als argument aan een andere functie blijkt dan niet nodig te zijn aangezien blijkbaar globale variabelen in javascript binnen een functie aanroepbaar zijn.

Dit is in PHP dan weer niet zo.