Как редактировать текстовое поле в группе в fabricjs - PullRequest
Новая
       18

Как редактировать текстовое поле в группе в fabricjs

0 голосов
/ 04 мая 2019

Моему приложению Fabric требуется функция, которая позволяет пользователю редактировать текстовые поля внутри групп.У меня почти все работает.Как это работает, вот как работает мое приложение:

  1. Нажмите на группу
  2. Проверяет, чтобы увидеть, нажимаете ли вы на текстовое поле.Если да ...
  3. Разгруппировать группу
  4. Устанавливает фокус на текстовое поле, чтобы пользователь мог вносить изменения.
  5. При «редактировании: выход» перегруппирует объекты

Вот скрипка с моим кодом: https://jsfiddle.net/1dr8jn26/4/

Выполните следующие действия, чтобы скопировать мойПроблема:

  1. Добавить 2 поля ввода с помощью кнопки вверху
  2. Группировать поля ввода с помощью кнопки вверху
  3. Нажмите один раз на один из входовящики в созданной вами группе
  4. Нажмите на холст за пределами группы
  5. Нажмите на тот же блок ввода
  6. Нажмите на холст за пределами группы еще раз
  7. Повторите 5 & 6

Вы заметите, что группа создает дубликаты себя сбоку от страницы.То, что я обнаружил самостоятельно:

  • "object.on ('edit: exited ... - это то, что постоянно повторяется.
  • " Счетчик дублирования "сбрасываетсяесли щелкнуть одно поле ввода против другого.
  • Когда появляются дубликаты, если щелкнуть некоторые из них, они исчезают.

Я все еще относительно новичок в программировании, поэтомуЯ уверен, что это что-то очевидное для опытных программистов здесь. Любая помощь будет оценена! 

canvas.on('mouse:down', function(options) {
if (options.target) {
    var thisTarget = options.target; 
    var mousePos = canvas.getPointer(options.e);
    if (thisTarget.isType('group')) {
       var groupPos = {
            x: thisTarget.left,
            y: thisTarget.top
        }
var currentGroup = [];
var groupItems = []
groupItems = thisTarget._objects;
thisTarget.forEachObject(function(object,i) {
currentGroup[i] = object;
currentGroup.push(object);
})
        thisTarget.forEachObject(function(object,i) {
         if(object.type == "textbox"){            
 console.log("Start for statement that finds the x and y for each 
object")            
var matrix = thisTarget.calcTransformMatrix()
var newPoint = fabric.util.transformPoint({y: object.top, x: 
object.left}, matrix)
            var objectPos = {
                xStart: newPoint.x,
                xEnd: newPoint.x + object.width,
                yStart: newPoint.y,
                yEnd: newPoint.y + object.height
            }
            if (mousePos.x >= objectPos.xStart && mousePos.x <= 
(objectPos.xEnd)) {
                if (mousePos.y >= objectPos.yStart && mousePos.y <= 
objectPos.yEnd) {
function ungroup (group) {
groupItems = group._objects;
group._restoreObjectsState();
canvas.remove(group);
for (var i = 0; i < groupItems.length; i++) {
    canvas.add(groupItems[i]);
}
canvas.renderAll();
};
ungroup(thisTarget)
canvas.setActiveObject(object);
object.enterEditing();
object.selectAll();
object.on('editing:exited', function (options) {
var items = [];
groupItems.forEach(function (obj) {
    items.push(obj);
    canvas.remove(obj);
});
console.log(JSON.stringify(groupItems))
var grp = new fabric.Group(items, {});
canvas.add(grp);   
                  });
                }
            }
        }
        });   
      }    
   }
});

-Chris

...