Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
show object positoin
_transformObject: function(e) {
this.renderAll();
transform.target._renderTransformDetail(transform);
}
fabric.Object = fabric.util.createClass({});
transformDetailOffset: 30,
showTransformDetails: true,
_renderTransformDetail: function(transform) {
if (!this.showTransformDetails) {
return;
}
this.setCoords();
var text = this._getTextForTransform(transform.action),
ctx = this.canvas.contextContainer;
ctx.font = "10px Arial";
var textWidth = ctx.measureText(text).width,
coords = this._getCoordinatesToRenderTransformDetail(transform.corner, textWidth),
padding = 1.5,
textHeight = 8;
ctx.save();
ctx.fillStyle = '#ffffff';
ctx.globalAlpha = 0.5;
ctx.fillRect(coords.x - padding, coords.y - textHeight - padding, textWidth + 2 * padding, textHeight + 2 * padding + 1);
ctx.restore();
ctx.save();
ctx.fillStyle = "#000000";
ctx.fillText(text, Math.round(coords.x), Math.round(coords.y));
ctx.restore();
},
_getTextForTransform: function(action) {
var text = '';
switch (action) {
case 'drag':
var x, y, angle = this.angle,
corners = this.getCornerPoints(this.getCenterPoint());
if (angle > 45 && angle < 135) {
x = corners.bl.x;
y = corners.bl.y
} else if (angle > 135 && angle < 225) {
x = corners.br.x;
y = corners.br.y
} else if (angle > 225 && angle < 315) {
x = corners.tr.x;
y = corners.tr.y
} else {
x = corners.tl.x;
y = corners.tl.y
}
text = Math.round(x) + ", " + Math.round(y);
break;
case 'rotate':
text = Math.round(this.angle) + "°";
break;
case 'scaleX':
case 'scaleY':
case 'scale':
text = Math.round(this.width * this.scaleX) + " x " + Math.round(this.height * this.scaleY);
break;
}
return text;
},
_getCoordinatesToRenderTransformDetail: function(corner, textWidth) {
console.info(this.transformDetailOffset)
var dx, dy, angle = this.angle,
theta = fabric.util.degreesToRadians(angle),
textWidthOffset = textWidth / 2,
textHeight = 8,
textHeightOffset = textHeight / 2;
switch (corner) {
case 'tl':
dx = (this.oCoords.tl.x) + (this.transformDetailOffset * Math.sin(theta - Math.PI / 4));
dy = (this.oCoords.tl.y) - (this.transformDetailOffset * Math.cos(theta - Math.PI / 4));
if (angle >= 0 && angle < 45 || angle > 225) {
dx -= textWidth;
}
break;
case 'tr':
dx = (this.oCoords.tr.x) + (this.transformDetailOffset * Math.sin(theta + Math.PI / 4));
dy = (this.oCoords.tr.y) - (this.transformDetailOffset * Math.cos(theta + Math.PI / 4));
if (angle > 135 && angle < 315) {
dx -= textWidth;
}
break;
case 'bl':
dx = (this.oCoords.bl.x) - (this.transformDetailOffset * Math.sin(theta + Math.PI / 4));
dy = (this.oCoords.bl.y) + (this.transformDetailOffset * Math.cos(theta + Math.PI / 4));
if (angle >= 0 && angle < 135 || angle > 315) {
dx -= textWidth;
}
break;
case 'br':
dx = (this.oCoords.br.x) + (this.transformDetailOffset * Math.cos(theta + Math.PI / 4));
dy = (this.oCoords.br.y) + (this.transformDetailOffset * Math.sin(theta + Math.PI / 4));
if (angle > 45 && angle < 225) {
dx -= textWidth;
}
break;
case 'mt':
dx = (this.oCoords.mtr.x) - textWidthOffset + ((this.transformDetailOffset + textWidthOffset) * Math.sin(theta));
dy = (this.oCoords.mtr.y) + textHeightOffset - (this.transformDetailOffset * Math.cos(theta));
break;
case 'mr':
dx = (this.oCoords.mr.x) - textWidthOffset + ((this.transformDetailOffset + textWidthOffset) * Math.cos(theta));
dy = (this.oCoords.mr.y) + textHeightOffset + (this.transformDetailOffset * Math.sin(theta));
break;
case 'mb':
dx = (this.oCoords.mb.x) - textWidthOffset - ((this.transformDetailOffset + textWidthOffset) * Math.sin(theta));
dy = (this.oCoords.mb.y) + textHeightOffset + (this.transformDetailOffset * Math.cos(theta));
break;
case 'ml':
dx = (this.oCoords.ml.x) - textWidthOffset - ((this.transformDetailOffset + textWidthOffset) * Math.cos(theta));
dy = (this.oCoords.ml.y) + textHeightOffset - (this.transformDetailOffset * Math.sin(theta));
break;
case 'mtr':
dx = (this.oCoords.mtr.x) - textWidthOffset + ((this.transformDetailOffset + textWidthOffset) * Math.sin(theta));
dy = (this.oCoords.mtr.y) + textHeightOffset - (this.transformDetailOffset * Math.cos(theta));
break;
default:
if (angle > 45 && angle < 135) {
dx = (this.oCoords.bl.x) - (this.transformDetailOffset * Math.sin(theta + Math.PI / 4)) - textWidth;
dy = (this.oCoords.bl.y) + (this.transformDetailOffset * Math.cos(theta + Math.PI / 4));
} else if (angle > 135 && angle < 225) {
dx = (this.oCoords.br.x) + (this.transformDetailOffset * Math.cos(theta + Math.PI / 4)) - textWidth;
dy = (this.oCoords.br.y) + (this.transformDetailOffset * Math.sin(theta + Math.PI / 4));
} else if (angle > 225 && angle < 315) {
dx = (this.oCoords.tr.x) + (this.transformDetailOffset * Math.sin(theta + Math.PI / 4)) - textWidth;
dy = (this.oCoords.tr.y) - (this.transformDetailOffset * Math.cos(theta + Math.PI / 4));
} else {
dx = (this.oCoords.tl.x) + (this.transformDetailOffset * Math.sin(theta - Math.PI / 4)) - textWidth;
dy = (this.oCoords.tl.y) - (this.transformDetailOffset * Math.cos(theta - Math.PI / 4));
}
}
var cw = this.canvas.width,
ch = this.canvas.height,
padding = 3;
if (dx < 0) {
dx -= (dx - padding)
} else if (dx + textWidth > cw) {
dx -= (dx - cw + textWidth + padding)
}
if ((dy - textHeight) < 0) {
dy -= (dy - textHeight - padding)
} else if (dy > ch) {
dy -= (dy - ch + padding)
}
return new fabric.Point(dx, dy)
},
getCornerPoints: function(center) {
var angle = this.angle,
width = this.width * this.scaleX,
height = this.height * this.scaleY,
tl, tr, bl, br, x = center.x,
y = center.y,
theta = fabric.util.degreesToRadians(angle);
if (width < 0) {
width = Math.abs(width);
}
var sinTh = Math.sin(theta),
cosTh = Math.cos(theta),
_angle = width > 0 ? Math.atan(height / width) : 0,
_hypotenuse = (width / Math.cos(_angle)) / 2,
offsetX = Math.cos(_angle + theta) * _hypotenuse,
offsetY = Math.sin(_angle + theta) * _hypotenuse;
tl = {
x: x - offsetX,
y: y - offsetY
};
tr = {
x: (x - offsetX) + (width * cosTh),
y: (y - offsetY) + (width * sinTh)
};
br = {
x: x + offsetX,
y: y + offsetY
};
bl = {
x: (x - offsetX) - (height * sinTh),
y: (y - offsetY) + (height * cosTh)
};
return {
tl: tl,
tr: tr,
bl: bl,
br: br
};
},
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.