Skip to content

Instantly share code, notes, and snippets.

@Kienz
Created November 27, 2013 17:37
Show Gist options
  • Select an option

  • Save Kienz/7679869 to your computer and use it in GitHub Desktop.

Select an option

Save Kienz/7679869 to your computer and use it in GitHub Desktop.
`centeredRotation` and `centeredScaling` for programmatic use.
(function() {
canvas = this.__canvas;
canvas.__eventListener = null;
fabric.Object.prototype.transparentCorners = false;
var $ = function(id){return document.getElementById(id)};
var rect = canvas.item(0);
var angleControl = $('angle-control');
angleControl.onchange = function() {
var reset = false;
if ((rect.originX !== 'center' || rect.originY !== 'center') && (canvas.centeredRotation || rect.centeredRotation)) {
rect.setOriginToCenter && rect.setOriginToCenter();
reset = true;
}
rect.setAngle(parseInt(this.value, 10)).setCoords();
if (reset) {
rect.setCenterToOrigin && rect.setCenterToOrigin();
}
canvas.renderAll();
};
var scaleControl = $('scale-control');
scaleControl.onchange = function() {
var reset = false;
if ((rect.originX !== 'center' || rect.originY !== 'center') && (canvas.centeredScaling || rect.centeredScaling)) {
rect.setOriginToCenter && rect.setOriginToCenter();
reset = true;
}
rect.scale(parseFloat(this.value)).setCoords();
if (reset) {
rect.setCenterToOrigin && rect.setCenterToOrigin();
}
canvas.renderAll();
};
var topControl = $('top-control');
topControl.onchange = function() {
rect.setTop(parseInt(this.value, 10)).setCoords();
canvas.renderAll();
};
var leftControl = $('left-control');
leftControl.onchange = function() {
rect.setLeft(parseInt(this.value, 10)).setCoords();
canvas.renderAll();
};
function updateControls() {
scaleControl.value = rect.getScaleX();
angleControl.value = rect.getAngle();
leftControl.value = rect.getLeft();
topControl.value = rect.getTop();
}
canvas.on({
'object:moving': updateControls,
'object:scaling': updateControls,
'object:resizing': updateControls,
'object:rotating': updateControls
});
fabric.Object.prototype.setOriginToCenter = function() {
this._originalOriginX = this.originX;
this._originalOriginY = this.originY;
var center = this.getCenterPoint();
this.set({
originX: 'center',
originY: 'center',
left: center.x,
top: center.y
});
};
fabric.Object.prototype.setCenterToOrigin = function() {
var originPoint = this.translateToOriginPoint(
this.getCenterPoint(),
this._originalOriginX,
this._originalOriginY);
this.set({
originX: this._originalOriginX,
originY: this._originalOriginY,
left: originPoint.x,
top: originPoint.y
});
};
})();
@raumzeitkeks

Copy link
Copy Markdown

Hi, der Gist hier ist zwar schon etwas älter, aber falls du interessiert wärst beruflich etwas in dieser Richtung bei einem neuen Arbeitgegber zu machen, dann schau mal auf LinkedIn nach meiner Kontaktanfrage.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment