In fabricjs textbox if text content(no space) is larger than the textbox width it won't go to next line, it stuck at first line. So that I get the content width using text:changed event and try to press enter programmatically if content is greater than textbox width but its not working. Is there any other way?
I don't want to override fabricjs default method for breakwords it has other conflicts and cursor get misplaced.
var canvas = new fabric.Canvas('c');
var text1 = new fabric.Textbox('Text', {
left: 10,
top: 20,
width: 300
})
canvas.add(text1);
canvas.on('text:changed', function(e) {
if (e.target.width > 300) {
console.log("text over width");
$('#canvas').trigger(jQuery.Event('keypress', {
keyCode: 87,
which: 13
}));
}
});
canvas{
border:1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="400" height="400" style="border:1px solid #000000;"></canvas>
Related
I have a fabricjs canvas with a button that toggles drawing on and off. How can I apply the custom controls to any/all drawn objects that I draw; for example, I'd like to select any of the lines that I draw and only be able to rotate them. I've read the example but must be missing something. How would I accomplish this?
JSFiddle of what I'm working with now
Use cornerStyle to change corner style(rect/circle) and setControlsVisibility to set visibility of controls.
DEMO
var canvas = this.__canvas = new fabric.Canvas('canvas', {
backgroundColor: 'white',
centeredScaling: true,
isDrawingMode: true
});
fabric.Object.prototype.cornerStyle = 'circle';//default rect
fabric.Object.prototype.setControlsVisibility({
tl:false, //top-left
mt:false, // middle-top
tr:false, //top-right
ml:false, //middle-left
mr:false, //middle-right
bl:false, // bottom-left
mb:false, //middle-bottom
br:false //bottom-right
})
$("#drawButton").click(function() {
canvas.isDrawingMode = !canvas.isDrawingMode;
var val = canvas.isDrawingMode ? 'selection' : 'pen_tool';
$("#select").text(val);
});
canvas {
border:1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"></script>
<canvas id="canvas" height="400" width="400"></canvas>
<button class="btn" id='drawButton' value="True"><span><i id="select" class="material-icons">selection</i></span></button>
I have a textbox in which I put text content at the time of adding it over canvas and want to make it active. so that user can start writing after the default text added. I have added enterEditing() which active textbox but move cursor at the beginning.
var object = canvas.getActiveObject('textbox');
canvas.setActiveObject(object);
object.setText("Start");
object.enterEditing();
Use setSelectionStart(length) and setSelectionEnd(length); to set the cursor upto the end of the text.
DEMO
var canvas = new fabric.Canvas('c');
var newText = new fabric.Textbox('Type \n here...', {
fontSize: 27,
top: 10,
left: 10,
width: 200
});
canvas.add(newText);
canvas.setActiveObject(newText);
newText.enterEditing();
newText.setSelectionStart(newText.text.length);
newText.setSelectionEnd(newText.text.length);
canvas{
border: 2px solid #000;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width=300 height=300></canvas>
I am trying to set text to textbox explicitly,in older fabricjs versionobject.setText("something")
was working but not working in fabric js version 2. Any other way introduced in this version?
var canvas = new fabric.Canvas('c');
var text1 = new fabric.Textbox('Text', {
left: 10,
top: 20,
width: 300
})
canvas.add(text1);
canvas.on('text:changed', function(e) {
var objTEmp = e.target;
objTEmp.setText("some");
});
canvas{
border:1px solid #000;
}
<script type="text/javascript" src="
https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.0.0-rc.4/fabric.js"></script>
<canvas id="c" width="400" height="400" style="border:1px solid #000000;"></canvas>
That build doesn't have setter/getter (optional). If you want to set text you can use
obj.text = text;
//or
obj.set({
text:text
});
//or
obj.set('text', text);
DEMO
var canvas = new fabric.Canvas('c');
var text1 = new fabric.Textbox('Text', {
left: 10,
top: 20,
width: 300
})
canvas.add(text1);
canvas.on('text:changed', function(e) {
var objTEmp = e.target;
objTEmp.set({
text : "some"
});
});
canvas{
border:1px solid #000;
}
<script type="text/javascript" src="
https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.0.0-rc.4/fabric.js"></script>
<canvas id="c" width="400" height="400" style="border:1px solid #000000;"></canvas>
You can build your own version of Fabric.js here: http://fabricjs.com/build/
Check "Named accessors" to bring back support for setters and getters. Not recommended and unsupported, who knows how long it will stay in there, but if you just need a quick solution now, that will do the trick.
I have more than one textbox. When I group all textboxes and scale the group horizontally height of group is not increase dynamically and content of textbox get vanish unlike independent textbox which increase height till the content end.
Below code I tried to set same height of group as of textbox but not working. Any Suggestion ?
var canvas = new fabric.Canvas('c');
var text1 = new fabric.Textbox('Text', {
left: 10,
top: 20,
fontSize : 18,
width: 300
})
canvas.add(text1);
var text2 = new fabric.Textbox('If this textbox grouped with above textbox, height will not increase on scaling horizontally and content get vanished but if scalling independently height increase', {
left: 20,
top: 40,
fontSize : 18,
width: 300
})
canvas.add(text2);
canvas.on('object:scaling', function(e) {
/* if(e.target.type == "group"){
var obj=e.target;
obj.height=obj.item(0).height;
obj.width=obj.item(0).width;
}*/
});
canvas{
border:1px solid #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.9/fabric.js"></script>
<canvas id="c" width="400" height="400" style="border:1px solid #000000;"></canvas>
The below code snippets are identical, except for the version of FabricJS being used.
The first one uses version 1.4.13, the second uses the latest (1.7.3).
When clicking Zoom In on the first version, the black square remains exactly top-left (0, 0). So far, so good.
When doing the same on the second version, the black square "drifts" where you can see the pink background above and to the left of the black square.
Does anyone why this behaviour has changed, is there a workaround or other fix?
var canvas = new fabric.Canvas('c');
canvas.setBackgroundImage('http://placehold.it/640x480/dd0055/?text=FabricJS Demo', canvas.renderAll.bind(canvas), {
backgroundImageOpacity: 0.5,
backgroundImageStretch: false
});
canvas.add( new fabric.Rect({
left: 0,
top: 0,
width:100,
height:100,
fill:"rgb(0,0,0)"
}) );
canvas.renderAll();
$("#btnZoomIn").click(function(){
canvas.setZoom(canvas.getZoom()*1.3);
});
$("#btnZoomOut").click(function(){
canvas.setZoom(canvas.getZoom()/1.3);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.13/fabric.min.js"></script>
<button id="btnZoomIn">ZoomIn</button>
<button id="btnZoomOut">ZoomOut</button>
<br/>
<canvas id="c" width="640" height="480"></canvas>
var canvas = new fabric.Canvas('c');
canvas.setBackgroundImage('http://placehold.it/640x480/dd0055/?text=FabricJS Demo', canvas.renderAll.bind(canvas), {
backgroundImageOpacity: 0.5,
backgroundImageStretch: false
});
canvas.add( new fabric.Rect({
left: 0,
top: 0,
width:100,
height:100,
fill:"rgb(0,0,0)"
}) );
canvas.renderAll();
$("#btnZoomIn").click(function(){
canvas.setZoom(canvas.getZoom()*1.3);
});
$("#btnZoomOut").click(function(){
canvas.setZoom(canvas.getZoom()/1.3);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.3/fabric.min.js"></script>
<button id="btnZoomIn">ZoomIn</button>
<button id="btnZoomOut">ZoomOut</button>
<br/>
<canvas id="c" width="640" height="480"></canvas>
Being the main difference after fabric 1.5 the inclusion of strokeWidth in the object bounding box, i guess that if you initialize the fabric.Rect with strokeWidth: 0 OR with a stroke: 'blue' you will se that the object is not drifting, simply is moving from is left top corner.
What cause the drift is a transparent border that is growing in size.