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

Question

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

1. 有两个对象:object1 和 object2。
2. 我选择了 object1 并对其应用了 ClipTo 函数。
3. 对象 1 会被相应剪切，其他未选择的对象 2 不受影响。到这里就OK了。
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/