0

I am having trouble with having multiple fabricjs canvases dynamically on on html page. using angularjs and a controller.

    <div ng-repeat="t in vm.imagetags">
        <div style="position:absolute; top:{{t.y}}px; left:{{t.x}}px; ">
            <canvas id='{{t.descp}}' width={{t.wid}} px; style="border:1px solid #888" height={{t.ht}} px
                    ng-loadeddata="{{vm.imgLoaded(t.src, t.descp);}}">
                Your browser does not support HTML5 Canvas.
            </canvas>

        </div>
    </div>

Here is the javascript in the controller:

    function imgLoaded(src, canvasID) {
        console.log("imgloaded img= " + src + ' canid= ' + canvasID );
        var canvas = new fabric.Canvas(canvasID);

        fabric.Image.fromURL(src, function (img) {
            console.log('fromURL=' + src);
            img.scale(0.5).set({
                left: 100,
                top: 100,
                angle: -15,
                //clipTo: function (ctx) {
                //    ctx.arc(0, 0, radius, 0, Math.PI * 2, true);
                //}
            });
            canvas.add(img).setActiveObject(img);
            var circle = new fabric.Circle({
                radius: 20, fill: 'green', left: 100, top: 100
            });
            var triangle = new fabric.Triangle({
                width: 20, height: 30, fill: 'blue', left: 50, top: 50
            });
            //canvas.add(imgInstance);
            canvas.add(triangle).add(circle);

        });
        //console.log('canvas = ' + canvas);
        //vm.canvasList.push(canvas);
    }

So here is the problem - I am testing with just one image in vm.imagetags. I have verified the length as 1. But imgLoaded is being called multiple times for the same image tag. I understand that the {{vm.imgLoaded}} function may be called multiple times due to angular. I am stuck on how to prevent this from happening - I want only one new canvas and load from url per image tag.

Any help appreciated.

EdtheC
  • 127
  • 1
  • 5
  • It is quite simple, create array of objects with page and data and render elements from array page wise – Rahul_Dabhi May 05 '16 at 06:36
  • Maybe I don't quite understand, but originally that's what I tried to do. The problem was I was rendering in the controller init function, but the render's failed because the img tag had not yet been 'created'. So when I tried to attached the fabric Canvas, there was nothing to attach it to. Then I tried to use onload because on load (I thought) would only trigger when the image got loaded, but it seems it gets triggered a lot. What did you mean by "page wise"? I guess I am looking for the proper trigger to do the rendering. TIA – EdtheC May 05 '16 at 14:23
  • Unless there's a better answer, I ended up checking saving in an array the canvasID's in the function above, and then at the begin of the function, see if its been done or not. If done, getout. Seems to work. FYI I did find many techniques for checking if everything has been loaded, all of which were not something part of angular or DOM for that matter. Here's one such lengthy discussion of the issue: http://stackoverflow.com/questions/14968690/sending-event-when-angular-js-finished-loading – EdtheC May 05 '16 at 16:20

0 Answers0