Please help me resolve this problem.
1. I have a text display at postion : left: 10, top: 10.
2. Using viewportTransform to move viewPort to new position : translate by X axis 100 & by Y axis 100
3. The text object is moving to new position
Expected:
User can selected text Object ( 'hello world' ) by click on the text ( at new position )
Actual:
At first time, user can't click on text Object. & object bounder still at old position ( left: 10, top: 10 ). ( see attach image)
Please check in my demo code.
I'm using Fabricjs version 2.4.0 this demo
How to pass through this problem?
Thank you !
var canvasObject = document.getElementById("editorCanvas");
// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());
canvas = new fabric.Canvas('editorCanvas', {
backgroundColor: 'white',
selectionLineWidth: 2,
width: $("#canvasContainer").width(),
height: $("#canvasContainer").height()
});
canvas.controlsAboveOverlay = true;
// Add a text to canvas
var text = new fabric.Text('hello world', { left: 10, top: 10 });
canvas.add(text);
// Transform View
canvas.viewportTransform[4] = 100;
canvas.viewportTransform[5] = 100;
canvas.requestRenderAll();
#canvasContainer {
width: 100%;
height: 100vh;
background-color: gray;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.0/fabric.js"></script>
<div id="canvasContainer">
<canvas id="editorCanvas"></canvas>
</div>
Call object.setCoords(), it will set bounding cordinate after change. And check When-to-call-setCoords
DEMO
var canvasObject = document.getElementById("editorCanvas");
// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());
canvas = new fabric.Canvas('editorCanvas', {
backgroundColor: 'white',
selectionLineWidth: 2,
width: $("#canvasContainer").width(),
height: $("#canvasContainer").height()
});
canvas.controlsAboveOverlay = true;
// Add a text to canvas
var text = new fabric.Text('hello world', {
left: 10,
top: 10
});
canvas.add(text);
// Transform View
canvas.viewportTransform[4] = 100;
canvas.viewportTransform[5] = 100;
setObjectCoords();
canvas.requestRenderAll();
function setObjectCoords(){
canvas.forEachObject(function(object){
object.setCoords();
})
}
#canvasContainer {
width: 100%;
height: 100vh;
background-color: gray;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.0/fabric.js"></script>
<div id="canvasContainer">
<canvas id="editorCanvas"></canvas>
</div>