Hopiu/fabric.js
1
0
Fork 0
mirror of https://github.com/Hopiu/fabric.js.git synced 2026-03-16 22:10:32 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix for dynamic_origin + Remove lines correctly on object moving

Browse source 
Fix if objects have different origins (originX != 'center' and/or originY != 'center')
Lines now removed correctly on object:moving (bug since commit c4bec7045532886a338ef7ae91c80bfd8fb28851)

[BACK_INCOMPAT] for fabric.js versions < 1.0.0
This commit is contained in:
Kienz 2013-01-21 14:22:10 +01:00
parent 6da2ed6d65
commit b555e56241
1 changed files with 31 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
lib/aligning_guidelines.js
View file

@ -57,11 +57,16 @@ function initAligningGuidelines(canvas) {
var activeObject = e.target,
canvasObjects = canvas.getObjects(),
activeObjectLeft = activeObject.get('left'),
activeObjectTop = activeObject.get('top'),
activeObjectCenter = activeObject.getCenterPoint(),
activeObjectLeft = activeObjectCenter.x,
activeObjectTop = activeObjectCenter.y,
activeObjectHeight = activeObject.getHeight(),
activeObjectWidth = activeObject.getWidth(),
noneInTheRange = true;
horizontalInTheRange = false,
verticalInTheRange = false,
transform = canvas._currentTransform;
if (!transform) return;
// It should be trivial to DRY this up by encapsulating (repeating) creation of x1, x2, y1, and y2 into functions,
// but we're not doing it here for perf. reasons -- as this a function that's invoked on every mouse move
@ -70,14 +75,15 @@ function initAligningGuidelines(canvas) {
if (canvasObjects[i] === activeObject) continue;
var objectLeft = canvasObjects[i].get('left'),
objectTop = canvasObjects[i].get('top'),
var objectCenter = canvasObjects[i].getCenterPoint(),
objectLeft = objectCenter.x,
objectTop = objectCenter.y,
objectHeight = canvasObjects[i].getHeight(),
objectWidth = canvasObjects[i].getWidth();
// snap by the horizontal center line
if (isInRange(objectLeft, activeObjectLeft)) {
noneInTheRange = false;
verticalInTheRange = true;
verticalLines.push({
x: objectLeft,
y1: (objectTop < activeObjectTop)
@ -87,12 +93,12 @@ function initAligningGuidelines(canvas) {
? (activeObjectTop + activeObjectHeight / 2 + aligningLineOffset)
: (activeObjectTop - activeObjectHeight / 2 - aligningLineOffset)
});
activeObject.set('left', objectLeft);
activeObject.setPositionByOrigin(new fabric.Point(objectLeft, activeObjectTop), transform.originX, transform.originY);
}
// snap by the left edge
if (isInRange(objectLeft - objectWidth / 2, activeObjectLeft - activeObjectWidth / 2)) {
noneInTheRange = false;
verticalInTheRange = true;
verticalLines.push({
x: objectLeft - objectWidth / 2,
y1: (objectTop < activeObjectTop)
@ -102,12 +108,12 @@ function initAligningGuidelines(canvas) {
? (activeObjectTop + activeObjectHeight / 2 + aligningLineOffset)
: (activeObjectTop - activeObjectHeight / 2 - aligningLineOffset)
});
activeObject.set('left', objectLeft - objectWidth / 2 + activeObjectWidth / 2);
activeObject.setPositionByOrigin(new fabric.Point(objectLeft - objectWidth / 2 + activeObjectWidth / 2, activeObjectTop), transform.originX, transform.originY);
}
// snap by the right edge
if (isInRange(objectLeft + objectWidth / 2, activeObjectLeft + activeObjectWidth / 2)) {
noneInTheRange = false;
verticalInTheRange = true;
verticalLines.push({
x: objectLeft + objectWidth / 2,
y1: (objectTop < activeObjectTop)
@ -117,12 +123,12 @@ function initAligningGuidelines(canvas) {
? (activeObjectTop + activeObjectHeight / 2 + aligningLineOffset)
: (activeObjectTop - activeObjectHeight / 2 - aligningLineOffset)
});
activeObject.set('left', objectLeft + objectWidth / 2 - activeObjectWidth / 2);
activeObject.setPositionByOrigin(new fabric.Point(objectLeft + objectWidth / 2 - activeObjectWidth / 2, activeObjectTop), transform.originX, transform.originY);
}
// snap by the vertical center line
if (isInRange(objectTop, activeObjectTop)) {
noneInTheRange = false;
horizontalInTheRange = true;
horizontalLines.push({
y: objectTop,
x1: (objectLeft < activeObjectLeft)
@ -132,12 +138,12 @@ function initAligningGuidelines(canvas) {
? (activeObjectLeft + activeObjectWidth / 2 + aligningLineOffset)
: (activeObjectLeft - activeObjectWidth / 2 - aligningLineOffset)
});
activeObject.set('top', objectTop);
activeObject.setPositionByOrigin(new fabric.Point(activeObjectLeft, objectTop), transform.originX, transform.originY);
}
// snap by the top edge
if (isInRange(objectTop - objectHeight / 2, activeObjectTop - activeObjectHeight / 2)) {
noneInTheRange = false;
horizontalInTheRange = true;
horizontalLines.push({
y: objectTop - objectHeight / 2,
x1: (objectLeft < activeObjectLeft)
@ -147,12 +153,12 @@ function initAligningGuidelines(canvas) {
? (activeObjectLeft + activeObjectWidth / 2 + aligningLineOffset)
: (activeObjectLeft - activeObjectWidth / 2 - aligningLineOffset)
});
activeObject.set('top', objectTop - objectHeight / 2 + activeObjectHeight / 2);
activeObject.setPositionByOrigin(new fabric.Point(activeObjectLeft, objectTop - objectHeight / 2 + activeObjectHeight / 2), transform.originX, transform.originY);
}
// snap by the bottom edge
if (isInRange(objectTop + objectHeight / 2, activeObjectTop + activeObjectHeight / 2)) {
noneInTheRange = false;
horizontalInTheRange = true;
horizontalLines.push({
y: objectTop + objectHeight / 2,
x1: (objectLeft < activeObjectLeft)
@ -162,16 +168,21 @@ function initAligningGuidelines(canvas) {
? (activeObjectLeft + activeObjectWidth / 2 + aligningLineOffset)
: (activeObjectLeft - activeObjectWidth / 2 - aligningLineOffset)
});
activeObject.set('top', objectTop + objectHeight / 2 - activeObjectHeight / 2);
activeObject.setPositionByOrigin(new fabric.Point(activeObjectLeft, objectTop + objectHeight / 2 - activeObjectHeight / 2), transform.originX, transform.originY);
}
}
if (noneInTheRange) {
verticalLines.length = horizontalLines.length = 0;
if (!horizontalInTheRange) {
horizontalLines.length = 0;
}
if (!verticalInTheRange) {
verticalLines.length = 0;
}
});
canvas.on('after:render', function() {
canvas.clearContext(canvas.contextTop);
for (var i = verticalLines.length; i--; ) {
drawVerticalLine(verticalLines[i]);
}
@ -184,4 +195,4 @@ function initAligningGuidelines(canvas) {
verticalLines.length = horizontalLines.length = 0;
canvas.renderAll();
});
}
}