If I move an object by code, when the mouse is used to select the object, the selection seems to select the object based on its old position. In the example below, the object can be selected by its old position, and not in its current position.
Am I doing something wrong, or is this a bug in FabricJS?
var canvas = window._canvas = new fabric.Canvas('c');
var rect = new fabric.Rect({
left: 50,
top: 50,
width: 50,
height: 50,
fill: 'rgba(255,0,0,0.5)',
});
canvas.add(rect);
var rect_json = rect.toJSON();
rect_json.left += 100;
rect.set(rect_json);
See this fiddle to see it in action.
You need to call setCoords in order to make the control positions recalculate.
Please check this link When to call setCoords.
var canvas = window._canvas = new fabric.Canvas('c');
var rect = new fabric.Rect({
left: 50,
top: 50,
width: 50,
height: 50,
fill: 'rgba(255,0,0,0.5)',
});
canvas.add(rect);
rect.set({ left: 300 }).setCoords()
Related
var canvas = window._canvas = new fabric.Canvas('c');
var red = new fabric.Rect({
top: 100,
left: 0,
width: 80,
height: 50,
fill: 'red'
});
var blue = new fabric.Rect({
top: 0,
left: 100,
width: 50,
height: 70,
fill: 'blue'
});
var green = new fabric.Rect({
top: 100,
left: 100,
width: 60,
height: 60,
fill: 'green'
});
canvas.add(red, blue, green);
const alignLeft = document.getElementById('align_left');
alignLeft.onclick = function() {
const objs = canvas.getActiveObjects();
}
<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" ></canvas>
<button id="align_left">Align Left</button>
Looking for a utility method to align edges (top,right,bottom,left) of array of objects from canvas.getActiveObjects in FabricJS v3
http://jsfiddle.net/rlightner/bzs0798x/1/
$('#align_left').click(function(){canvas.getActiveObject().set({left:0);})
I try to rotate an object around the canvas center smoothly using a slider,
I use fabric.util.rotatePoint to find the new center point and set the new angle,but it seems not exactly around the center point and the object position is jumping.
https://jsfiddle.net/j0g1tLsb/26/
here is my code doing this:
const canvas = new fabric.Canvas('c', { width: innerWidth, height: innerHeight });
canvas.controlsAboveOverlay = true;
canvas.preserveObjectStacking = true;
const rect = new fabric.Rect({
width: 300,
height: 150,
left: 400,
top: 400,
fill: "lightgray",
originX: 'center',
originY: 'center'
});
const centerPoint = new fabric.Circle({
originX: 'center',
originY: 'center',
top: innerHeight/2,
left: innerWidth/2,
radius: 10,
fill: 'red',
hasControls: false,
selectable:false
});
const log = new fabric.Text('', {
left: 30,
top: 30,
originX: 'left',
originY: 'top',
fontSize: 18,
evented: false,
selectable: false
});
canvas.add(rect, centerPoint, log);
document.getElementById('img-rotation').oninput = function() {
rect.set('angle', this.value);
var posNewCenter = fabric.util.rotatePoint(
rect.getCenterPoint(),
canvas.getVpCenter(),
fabric.util.degreesToRadians(this.value)
);
rect.set({
left: posNewCenter.x,
top: posNewCenter.y,
angle: this.value
});
log.set('text', `angle: ${Math.round(rect.angle)} \nleft: ${rect.left} \ntop: ${rect.top}`);
canvas.requestRenderAll();
};
rect.on('modified', () => {
log.set('text', `angle: ${Math.round(rect.angle)} \nleft: ${rect.left} \ntop: ${rect.top}`);
canvas.renderAll();
});
Your problem is in getting center point from the rectangle every time. You need just set new Point from the original rectangle position.
var posNewCenter = fabric.util.rotatePoint(
new fabric.Point(400, 400), //here is your mistake
canvas.getVpCenter(),
fabric.util.degreesToRadians(this.value)
);
rect.set({
left: posNewCenter.x,
top: posNewCenter.y,
angle: this.value
});
Working fiddle
UPDATE:
In order of the modification of the Rectangle you need to use object:modified event to reassign top and left coordinates.
First of all declare top and left variables and use them inside rectangle object:
let top = 400;
let left = 400;
const rect = new fabric.Rect({
...
left: left,
top: top,
...
targetObj: 'rectangle' //you can use any value or ID, it's only for targeting purpose
});
Then you need to check when object is modified. If event is fired then check if it is rectangle.
canvas.on('object:modified', (e) => {
if (e.target.hasOwnProperty('targetObj') && e.target.targetObj === 'rectangle') {
left = e.target.get('left');
top = e.target.get('top');
}
})
Finally, use left and top variables inside oninput event of the slider:
var posNewCenter = fabric.util.rotatePoint(
new fabric.Point(left, top),
canvas.getVpCenter(),
fabric.util.degreesToRadians(this.value)
);
Working updated fiddle
After drawing an object and modifying the object with the mouse, the coordinates(Object.width and Object.height) remain the same as the originally drawn object.
const button = document.querySelector('button');
function load() {
const canvas = new fabric.Canvas('c');
const rect = new fabric.Rect({
width: 100,
height: 100,
left: 10,
top: 10,
fill: 'yellow',
});
function objectAddedListener(ev) {
let target = ev.target;
console.log('left', target.left, 'top', target.top, 'width', target.width, 'height', target.height);
}
function objectMovedListener(ev) {
let target = ev.target;
console.log('left', target.left, 'top', target.top, 'width', target.width, 'height', target.height);
}
canvas.on('object:added', objectAddedListener);
canvas.on('object:modified', objectMovedListener);
canvas.add(rect);
}
load();
button.addEventListener('click', load);
See codepen
width = target.width * target.scaleX,
height = target.height * target.scaleY
As we are scalling, so you need to multiply the scaleX and scaleY value to width and height respectively. Here is updated codepen
Currently You can use:
this.yourObject.getScaledWidth();
this.yourObject.getScaledHeight();
Which returns the same result.
My canvas has two objects. The first one is selectable true and the second one is selectable false. I am looking to manage the second object through the first object's action.
If the first object moves, then the second objects need to move in the same direction. If the first one rotates, then the second one rotates at the same angle in the second one's position.
I have tried adding events (moving,rotating) to the first selectable object, and then getting the required values from the first object and setting it to second object, but rotating is not working properly. My code is as follows:
imageOne.on('rotating', function (evt) { imageThree.angle = imageOne.getAngle(); });
var canvas = new fabric.Canvas('c');
var evented = false;
var rect1 = new fabric.Rect({
left: 50,
top: 60,
fill: 'blue',
width: 150,
height: 150,
});
var rect2 = new fabric.Rect({
left: 210,
top: 60,
fill: 'magenta',
width: 150,
height: 150,
selectable: false
});
canvas.add(rect1,rect2);
function rect1MouseDown(option){
this.mousesDownLeft = this.left;
this.mousesDownTop = this.top;
this.rect2Left = rect2.left;
this.rect2Top = rect2.top;
}
function rect1Move(option){
rect2.left = this.rect2Left+ this.left - this.mousesDownLeft ;
rect2.top = this.rect2Top+ this.top- this.mousesDownTop;
rect2.setCoords();
}
function rect1Rotating(options){
rect2.setAngle(this.angle);
}
register();
function register(){
if(evented) return;
rect1.on('moving', rect1Move);
rect1.on('mousedown', rect1MouseDown);
rect1.on('rotating', rect1Rotating);
evented = true;
}
function unRegister(){
rect1.off('moving');
rect1.off('mousedown');
rect2.on('rotating');
evented = false;
}
canvas {
border: blue dotted 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.min.js"></script>
<button onclick='register()'>Register Event</button>
<button onclick='unRegister()'>Unregister Event</button><br>
<canvas id="c" width="400" height="400"></canvas>
You can use obj.setAngle() for version <1.7.19 and obj.rotate() for version 2 , to set angle to an object.
Why the rectangle is not showing up? I've found the examples at GitHub, official site etc. But they're not working for me.
<script type="text/javascript">
var fCanvas;
window.onload = function (){
var oldCanvas = document.getElementById('canvas');
fCanvas = new fabric.Canvas('canvas',
{
width: oldCanvas.parentNode.clientWidth,
height: oldCanvas.parentNode.clientHeight
});
}
function CreateGraphicObject(id){
//...
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 20,
height: 20
});
fCanvas.add(rect);
//fCanvas.renderAll(); - did not help
}
</script>
Thanks.
I had created a fiddle. I hope it will help you.
https://jsfiddle.net/mullainathan/hgnvaqej/
You have created function but never called it, so the rectangle never gets created.
You just need to call the function, in your code I suppose the best place to call it after creating the canvas:
window.onload = function (){
var oldCanvas = document.getElementById('canvas');
fCanvas = new fabric.Canvas('canvas',
{
width: oldCanvas.parentNode.clientWidth,
height: oldCanvas.parentNode.clientHeight
});
CreateGraphicObject(); //I didn't pass any "id" because it makes no sense in the given code
}
function CreateGraphicObject(){
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 20,
height: 20
});
fCanvas.add(rect);
fCanvas.renderAll();
}