Fabric.js clipTo func

Question

I have a trouble with serialization clipTo function to JSON. When I'm loading my JSON into canvas, I see the following error in my console:

Uncaught ReferenceError: clipByName is not defined.

I'm using function from this link: http://jsfiddle.net/ZxYCP/198/;

How can I fix this error, or how to stringify clipTo function.

Now in JSON object I have this:

clipTo:"function (ctx) {
    return _.bind(clipByName, currentCanvas.getItemByName(obj.name))(ctx);
}

here is my code:

document.getElementById('uploadText').addEventListener('click', function() {

        var textObj = itextObject.objT();

        textObj.id = time.getMilliseconds() + '_' + time.getMinutes() + random(0, 1000);
        textObj.name = textObj.id;
        textObj.clearObj = 'clear';

        if (currentFlag.flag === 'mainFlag') { textObj.clipName = 'clippingElem'; } else if (currentFlag.flag === 'mainFlagB') {
            textObj.clipName = 'clippingElemB';
        }
        textObj.clipTo = function(ctx) { return _.bind(clipByName, currentCanvas.getItemByName(textObj.name))(ctx); };


        currentCanvas.getItemByName(currentFlag.flag).set({ clipFor: textObj.clipName });

        textObj.left = currentCanvas.getItemByName(currentFlag.flag).left;

        currentCanvas.add(textObj);
        currentCanvas.renderAll();
    });

i had changed fiddle, and have the same error: http://jsfiddle.net/ZxYCP/749/

clipByName should be defined before you load JSON. In fiddle it defined on top of code. — KoIIIeY, Mar 01 '17 at 13:54
@KoIIIeY clipByName on top of code, all works is fine, but i see error when i had converted my canvas into JSON, and then i'm loading the same JSON into canvas. sorry for my English — Lieutenant Jim Dangle, Mar 01 '17 at 14:02
Functions can't be converted to JSON ) that's your problem. Before converting, remove clipTo function from object. — KoIIIeY, Mar 01 '17 at 14:22
So, clone object, remove functions, convert to JSON, then save. After load return function. — KoIIIeY, Mar 01 '17 at 14:22
http://stackoverflow.com/questions/6754919/json-stringify-function - or use this — KoIIIeY, Mar 01 '17 at 14:24
@KoIIIeY big big big thank to you, after loading JSON i'm adding clipTo function for each elements who has clipName, and then renderAll(), and that's works, you had helped me to decide many problems in future :) — Lieutenant Jim Dangle, Mar 02 '17 at 10:47
@LieutenantJimDangle can you update the jsfiddle with working code please? — Tharanga, Oct 25 '17 at 05:57

Fabric.js clipTo func

0 Answers0