I have tried old and latest 1.1.13 version of fabricjs and none of them can apply clipTo function on selected object only. If there is only one object and need to clip it, it's ok but when there are more objects and trying to clip only selected object, all the other objects are also clipped. The most strange behavior is that before selecting the other objects, the clip is applied to the selected object but after other objects are selected and trying to clip it then all the object that is already clipped are also affected. I want to clear the issue using following steps.
Remember, I use clipTo function dynamically, not during object initialization period using following function.
var obj = canvas.getActiveObject();
var roundness = dynamicValue; // get using jquery sliders
if(obj)
obj.clipTo = function(ctx) {
ctx.arc(0, 0, roundness, 0, Math.PI * 2, true);
}
canvas.renderAll();
How to solve this issue, please help.
Save the last activeObject and delete clipTo if activeObject !== lastActive.
var obj = canvas.getActiveObject();
if (!obj) return;
if (lastActive && lastActive !== obj) {
lastActive.clipTo = null;
}
var roundness = Math.round(Math.random() * 60, 2)
obj.clipTo = function (ctx) {
ctx.arc(0, 0, roundness, 0, Math.PI * 2, true);
}
lastActive = obj;
canvas.renderAll();
Look here: http://jsfiddle.net/Kienz/qfgfj/