Fabricjs - 선택한 객체 만 클립하는 방법?

Question

나는 fabricjs의 최신 1.1.13 버전을 시도했지만, 그 중 어느 것도 선택된 객체에만 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/