Question

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.

  1. There are two objects, object1 and object2.
  2. I selected object1 and apply clipTo function on it.
  3. The object1 is clipped accordingly and other non-selected object2 is not affected. Upto here it is ok.
  4. Now I select object2 and apply clipTo function on it. But at this time the clipTo function also affects object1 which is not selected.

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.

Was it helpful?

Solution

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/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top