Created
July 3, 2017 12:01
-
-
Save karthickvkumar/f11d95e3cdaa01c84095118cb8fdf4f4 to your computer and use it in GitHub Desktop.
show object positoin
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| _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