Fabric.js - Rotate all object on canvas
https://groups.google.com/forum/#!topic/fabricjs/Wv5aUNju3hQ%5B1-25-false%5D
HTML
<script src="https://raw.github.com/kangax/fabric.js/feature/dynamic_origin/dist/all.min.js"></script>
<div>
<canvas id="c" width="400" height="400"></canvas>
<div id="d">
<canvas id="c2" width="200" height="200"></canvas>
<br/>
<input id="objectWidth" type="text" />
<br/>
<input id="objectHeight" type="text" />
<br/>
<div>
</div>
CSS
canvas {
border-width: 1px;
border-style: solid;
border-color: #000;
}
#d {
width: 200px,
height: 300px,
background-color: "#CCC",
position: absolute;
display: none;
z-index: 2000;
}
JavaScript
// add a custom function to fabric.StaticCanvas,
// so fabric.Canvas also will have this function
fabric.StaticCanvas.prototype.getAbsoluteCoords = function(object) {
return {
left: object.left + this._offset.left,
top: object.top + this._offset.top
};
};
var srcImg = "http://fabricjs.com/article_assets/3_4.png";
var lastTime = 0;
// canvas
var canvas = new fabric.Canvas('c');
canvas.backgroundColor = "#F5F5F5";
// canvas 2 - "modal"
var canvas2 = new fabric.Canvas('c2');
canvas2.backgroundColor = "#F5F5F5";
// rectangle
var rect = new fabric.Rect({
left: 50,
top: 50,
width: 50,
height: 50,
fill: "#dd0000"
});
rect.set("hasRotatingPoint", true);
canvas.add(rect);
// text
var text = new fabric.Text('Text', {
left: 110,
top: 110
});
text.set("hasRotatingPoint", true);
canvas.add(text);
// image
fabric.util.loadImage(srcImg, function (img) {
var object = new fabric.Image(img);
object.set({
left: 200,
top: 200
});
object.set("hasRotatingPoint", true);
object.set("scaleX", 0.25);
object.set("scaleY", 0.25);
canvas.add(object);
canvas.renderAll();
});
canvas.renderAll();
/////////////////
canvas.observe("object:selected", objectSelectedHandler);
function objectSelectedHandler(event) {
$('#d').hide();
var date = new Date();
var now = date.getTime();
if (now - lastTime < 500) {
objectDoubleClickHandler(event.target);
}
lastTime = now;
}
function objectDoubleClickHandler(object) {
// do something
openEdition(object);
}
function openEdition(object) {
canvas2.clear();
var clonedObject = fabric.util.object.clone(object);
canvas2.add(clonedObject);
canvas2.deactivateAll();
clonedObject.center();
canvas2.renderAll();
// get some properties of select object
$("#objectWidth").val(object.get("width"));
$("#objectHeight").val(object.get("height"));
//
// TODO put the float...