Fabricjs - 如何仅剪辑选定的对象？

Question

我已经尝试过旧的和最新的 1.1.13 版本的fabricjs，它们都不能只对选定的对象应用clipTo 函数。如果只有一个对象并且需要剪裁它，那没关系，但是当有更多对象并且尝试仅剪裁选定对象时，所有其他对象也会被剪裁。最奇怪的行为是，在选择其他对象之前，剪辑已应用于所选对象，但在选择其他对象并尝试对其进行剪辑之后，所有已剪辑的对象也会受到影响。 我想通过以下步骤解决问题。

1. 有两个对象，object1 和 object2。
2. 我选择了 object1 并对其应用了 clipTo 函数。
3. object1 被相应地剪裁，其他未选择的 object2 不受影响。到这里还可以。
4. 现在我选择 object2 并对其应用 clipTo 函数。但此时clipTo函数也会影响未被选中的object1。

请记住，我是动态使用 clipTo 函数，而不是在对象初始化期间使用以下函数。

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

如何解决这个问题，请帮忙。

Answer 1

如果 activeObject !== lastActive 则保存最后一个 activeObject 并删除 clipTo。

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

看这里： http://jsfiddle.net/Kienz/qfgfj/