Fabricjs - как обрезать только выбранный объект?

Я пробовал старую и последнюю версию Fabricjs 1.1.13, и ни одна из них не может применить функцию clipTo только к выбранному объекту. Если есть только один объект и его нужно обрезать, это нормально, но когда объектов больше и вы пытаетесь обрезать только выбранный объект, все остальные объекты также обрезаются. Самое странное поведение заключается в том, что перед выбором других объектов клип применяется к выбранному объекту, но после того, как другие объекты выбраны и пытаются его обрезать, это также влияет на все объекты, которые уже были обрезаны. Я хочу решить проблему, выполнив следующие шаги.

  1. Есть два объекта, объект1 и объект2.
  2. Я выбрал object1 и применил к нему функцию clipTo.
  3. Объект1 обрезается соответствующим образом, а другой невыбранный объект2 не затрагивается. До сих пор это нормально.
  4. Теперь я выбираю object2 и применяю к нему функцию clipTo. Но в это время функция clipTo также воздействует на объект 1, который не выбран.

Помните, я использую функцию 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();

Как решить эту проблему, помогите.


clipping html5-canvas fabricjs
person ep4f    schedule 18.05.2013    source источник
comment
Небольшая скрипка с полным кодом может помочь найти проблему   -  person arty    schedule 19.05.2013
comment
И вы удаляете clipTo из первого объекта?   -  person kangax    schedule 19.05.2013

Ответы (1)


arrow_upward
2
arrow_downward

Сохраните последний activeObject и удалите clipTo, если 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();

Посмотрите здесь: http://jsfiddle.net/Kienz/qfgfj/

person Kienz    schedule 20.05.2013
comment
jsfiddle.net/qfgfj/5 Draw shape(), который я сделал, который вызывается при изменении выбора чтобы нарисовать другую форму, это работает для всех фигур, кроме опции «Прямоугольник», т.е. 5. Можете ли вы сказать, почему прямоугольник не работает с переменной. - person anam; 25.09.2013
comment
Я решил эту проблему, разобрав значение до числа. obj.setHeight() принимает число - person anam; 25.09.2013