Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save SebasG22/8a47d9442a5c8ec59641066fd619df1c to your computer and use it in GitHub Desktop.
Save SebasG22/8a47d9442a5c8ec59641066fd619df1c to your computer and use it in GitHub Desktop.
Fabric.js group alignment with scaling
<p>Alignment:</p>
<button onclick="groupAlign('right');">
Check Value
</button>
<button onclick="groupAlign('centerX');">
Center on X
</button>
<button onclick="groupAlign('centerY');">
Center on Y
</button>
<canvas id="c" width="1000" height="500"></canvas>
var canvas = window._canvas = new fabric.Canvas('c', {
backgroundColor: '#eee'
}),
img1 = 'http://dummyimage.com/200/09f/fff.png',
img2 = 'http://dummyimage.com/240x240/b314b3/fff.jpg',
prevDirection;
fabric.Group.prototype.originX = fabric.Group.prototype.originY = 'center';
canvas.on({
'object:modified': objectScaling
});
function objectScaling(options) {
if (options.target.isType('group')) {
groupItemsRefresh(options.target);
}
console.warn('new updates', options);
}
/**
fabric.Image.fromURL(img1, function (img1) {
img1.set({
left: 700,
top: 200,
lockUniScaling: true,
originX: 'center',
originY: 'center',
});
fabric.Image.fromURL(img2, function (img2) {
img2.set({
left: 400,
top: 300,
lockUniScaling: true,
originX: 'center',
originY: 'center',
});
**/
var rect = new fabric.Rect({ width: 100, height: 100, fill: 'red', originX: 'center',
originY: 'center' });
var circle = new fabric.Circle({ radius: 100, fill: 'green', originX: 'center',
originY: 'center' });
var group1 = new fabric.Group([circle, rect], { left: 100, top: 100 });
canvas.add(group1);
var rect1 = new fabric.Rect({ width: 100, height: 100, fill: 'yellow', originX: 'center',
originY: 'center' });
var circle1 = new fabric.Circle({ radius: 100, fill: 'red', originX: 'center',
originY: 'center' });
var group2 = new fabric.Group([circle1, rect1], { left: 400, top: 400 });
canvas.add(group2);
function groupItemsRefresh(group) {
group.forEachObject(function (item) {
group.removeWithUpdate(item).addWithUpdate(item);
});
group.setCoords();
canvas.renderAll();
}
function groupAlign(direction) {
var group = canvas._activeObject;
console.log('group', group);
console.log('Active Objs', canvas.getActiveObjects());
if (direction === prevDirection || !group) {
return;
}
var groupWidth = group.getBoundingRect(true).width,
groupHeight = group.getBoundingRect(true).height,
scaleFactor = 1;
canvas.getActiveObjects().forEach(function (item) {
var itemWidth = item.getBoundingRect().width * scaleFactor,
itemHeight = item.getBoundingRect().height * scaleFactor;
if (direction === 'left') {
item.set({
left: -groupWidth / 2 + itemWidth / 2
});
}
else if (direction === 'top') {
item.set({
top: -groupHeight / 2 + itemHeight / 2
});
}
else if (direction === 'right') {
// item.set({
// left: groupWidth / 2 - itemWidth / 2
// });
}
else if (direction === 'centerX') {
const newItem = Object.assign({}, item);
item.set({
left: 0
});
group.setCoords();
/**
* TODO: Se obtienen las coordenadas de la siguiente manera:
* left: item.group.left - item.left
* top: item.group.top - item-top
* */
item.calcCoords();
console.log('Position Nueva X',group.left);
console.log('Position Nueva Y',group.top + item.top);
debugger;
}
else if (direction === 'centerY') {
const newItem = Object.assign({}, item);
item.set({
top: 0
});
group.setCoords();
/**
* TODO: Se obtienen las coordenadas de la siguiente manera:
* left: item.group.left - item.left
* top: item.group.top - item-top
* */
item.calcCoords();
console.log('Position Nueva X',group.left + item.left);
console.log('Position Nueva Y',group.top);
debugger;
}
prevDirection = direction;
});
groupItemsRefresh(group);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.5/fabric.js"></script>
canvas {
border: 1px solid #999;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment