fabricjs_2.3.6
Я работаю над редактором, который позволит пользователю динамически создавать изображения текстовых полей и прямоугольников, и эта часть проекта прекрасно работает.Все объекты на холсте будут существовать до создания групп, поэтому я не хочу жестко программировать любые ткани.Я также хочу сохранить позиционные отношения между сгруппированными элементами.
У меня проблема с созданием групп, когда я выбрал 2 или более существующих объекта на холсте для создания группы.Мой код работает с одним исключением, если выбранные элементы не находятся в верхнем левом углу холста, когда я создаю группу, сгруппированные объекты остаются в исходном положении по желанию, но маркер перемещения находится в верхнем левом углу холста.Если щелкнуть призрак маркера перемещения курсора, а затем щелкнуть пустую область на холсте, проблема исчезнет, и после этого все будет нормально.
Мне не повезло в поиске решения, возможно, потому что я не уверенчто управляет положением курсора перемещения на холсте или если он на самом деле называется «курсор перемещения».
Вот изображение из моего jsfiddle после нажатия кнопки группы: 
Здесьссылка jsfiddle для демонстрации проблемы: https://jsfiddle.net/Larry_Robertson/xfrd278a/
Вот мой код:
HTML
<span> Test 1: select both the line and the text objects with the mouse then click group, works great.</span>
<br/>
<span> Test 2: select both the line and the text objects with the mouse, move the selction to the center of the canvas then click group. This creates the problem where a ghost move handle is left behind in the upper left corner of the canvas. The move handle did not update to the correct position when the group was created. If you hover the mouse in the upper left of canvas you will see the move cursor. Click on the move cursor then click any blank part of the canvas then you can reselect the group and it moves properly. What am I doing wrong???</span>
<br/>
<button id="group">group</button>
<canvas id="c" height="300" width="500"></canvas>
JS
var canvas = new fabric.Canvas('c');
var text = new fabric.Text('hello world', {
fontSize: 30,
originX: 'left',
originY: 'top',
left: 0,
top: 0
});
var line = new fabric.Line([10, 10, 100, 100], {
stroke: 'green',
strokeWidth: 2
});
canvas.add(line);
canvas.add(text);
canvas.renderAll();
$('#group').on(("click"), function(el) {
var activeObject = canvas.getActiveObject();
var selectionTop = activeObject.get('top');
var selectionLeft = activeObject.get('left');
var selectionHeight = activeObject.get('height');
var selectionWidth = activeObject.get('width');
if (activeObject.type === 'activeSelection') {
var group = new fabric.Group([activeObject], {
left: 0,
top: 0,
originX: 'center',
originY: 'center'
});
canvas.add(group);
deleteSelectedObjectsFromCanvas();
canvas.setActiveObject(group);
group = canvas.getActiveObject();
group.set('top', selectionTop + (selectionHeight / 2));
group.set('left', selectionLeft + (selectionWidth / 2));
group.set('originX', 'center');
group.set('originY', 'center');
canvas.renderAll();
}
});
function deleteSelectedObjectsFromCanvas() {
var selection = canvas.getActiveObject();
var editModeDected = false;
if (selection.type === 'activeSelection') {
selection.forEachObject(function(element) {
console.log(element);
if (element.type == 'textbox') {
if (element.isEditing == true) {
//alert('At least one textbox is currently being edited. No objects were deleted');
editModeDected = true;
}
}
});
if (editModeDected == true) {
return false;
}
// Its okay to delete all selected objects
selection.forEachObject(function(element) {
console.log('removing: ' + element.type);
//element.set('originX',null);
//element.set('originY',null);
canvas.remove(element);
canvas.discardActiveObject();
canvas.requestRenderAll();
});
} else {
if (selection.isEditing == true && selection.type == 'textbox') {
//alert('Textbox is currently being edited. No objects were deleted');
} else {
canvas.remove(selection);
canvas.discardActiveObject();
canvas.requestRenderAll();
}
}
}
CSS
#c {
margin: 10px;
padding: 10px;
border: 1px solid black;
}