Question

我在html页面上动态创建多个fabricjs画布时遇到问题。使用angularjs和控制器。

    <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>

以下是控制器中的javascript：

    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);
    }

所以这就是问题 - 我在vm.imagetags中只使用一个图像进行测试。我已将长度验证为1.但是对于相同的图像标记，imgLoaded被多次调用。我知道由于角度的原因，{{vm.imgLoaded}}函数可能被多次调用。我坚持如何防止这种情况发生 - 我只想要一个新的画布并从每个图像标记的URL加载。

任何帮助表示感谢。

多个FabricJS画布动态加载到单页

0 个答案: