FabricJS - text is not working - javascript

I have started using FabricJS, unfortunately I can't get texts to show up. Here is my code:
var canvas = new fabric.Canvas('mainCanvas');
var str = new fabric.Text('Hello World', {
fontSize: 30,
fontFamily: 'Arial',
top: 50,
left: 50,
fill: 'black',
});
canvas.add(str);
Other shapes do show up but the text just doesn't show... What am I doing wrong?

I have figured it out, it didn't work because I have used version 0.8.32 instead of 0.9.15.

better use Itext or Textbox if you really want to, simply replace .text to .Itext

Related

fabricjs how to double-click a picture(or rect) to edit text and name it

How to combine images and text with fabricjs and edit text when double clicking the combined object,
Still combine after editing text,
Please tell me how to edit text when rendering image and text combinations
const canvas = new fabric.Canvas("canvas");
// a rect
const rect = new fabric.Rect({
stroke: "#000",
strokeWidth: 1,
fill: "#ccc",
left: 170,
top: 80,
width: 50,
height: 50
});
// a text for describe rect
const text = new fabric.IText("describe rect", {
fontFamily: "Comic Sans",
fontSize: 14,
stroke: "#000",
strokeWidth: 1,
fill: "#000",
left: 170,
top: 80
});
// 1 Combine the above two things but can not edit text
// 2 use LabeledRect also
Based on your requirements, you can
Create a subclass of Image class (or whatever object that you need to attach a label to)
Make it create an instance of IText or Textbox and save an internal reference to it
By hooking into the event handlers on the image (e.g. double click), manually manage the events of the text. Make sure to keep the position and dimensions of the text updated when the image is modified.
Take a look at this answer: Resize Fabric Rect without resizing Textbox. It does something very similar to what you've described.

Fabric.js iText : How to do text selection on iText while not allowing text modification?

I have been reading docs and forums to solve this problem, but could not find an answer.
var t1 = canvas.t1 = _t1 = new fabric.IText(text1, {
left: 100,
top: 50,
editable: true,
selectable: false,
width: 300,
height: 150,
fontFamily: 'Helvetica',
fontSize: 20,
fill: '#f4b642',
} );
var t2 = canvas.t2 = _t1 = new fabric.IText(text2, {
left: 200,
top: 150,
editable: false,
selectable: true,
width: 300,
height: 150,
fontFamily: 'Helvetica',
fontSize: 20,
fill: '#333',
} );
canvas.add(t1,t2);
t1.enterEditing();
https://jsfiddle.net/qgeryu9o/2/
As shown on the fiddle by the upper iText element , I would like to
access directly to the text at page load , this just to select
some words or sentences.
Using itext.enterEditing(), as on the upper itext box, this works fine except
that it allows also what I do not want : to delete, add, or modify the text.
In setting itext.editable to false ( as on fiddle lower iText element)
the text cannot be modified , but there is no way to show selection.
I tried to catch keydown events on the container div as suggested on this thread.
fabric.js canvas listen for keyboard events?
But it does not work for me (tried on Chrome, Firefox), the event is not fired on itext in editing mode.
Thanks for your help.
Mike
Since I could not find a Fabric.js parameter allowing selection but no editing, I used a work-around.
At first I wanted to remove listeners set on the hidden textarea.
But, as bind() is used , there is no way to remove these listeners
without modifying fabric.js :
fabric.util.addListener(this.hiddenTextarea, 'keydown', this.onKeyDown.bind(this));
fabric.util.addListener(this.hiddenTextarea, 'keyup', this.onKeyUp.bind(this));
So, I just have overwritten the onInput() and onKeydown methods.
t1.onInput = function() {
console.log("no input on t1") ;
return false } ;
t1.onKeyDown = function() {
console.log("no onKeyDown on t1") ;
return false } ;
It works fine as shown on the corrected fiddle:
https://jsfiddle.net/qgeryu9o/4/
If there is a more direct way to get the same result (selection but no edition), I would be happy to hear about it.
Thanks

fabric js fontweight not working

I am using this code to add textbox in canvas using fabric js,
var text = 'Type Text Here';
var textSample = new fabric.Textbox(text, {
left: getCardLeft() + 100,
top: getCardTop() + 10,
width: 200,
height: 20,
fontFamily: 'Helvetica',
fill: getColorPickerForegroundColor(),
fontWeight: '',
fontSize: parseInt('25'),
originX: 'center',
hasRotatingPoint: true,
centerTransform: true,
});
canvas.add(textSample);
Which successfully add textbox into canvas.
Now, if i try to make it bold using this command
canvas.getActiveObject().set("fontWeight", "bold");
canvas.renderAll();
Working, But when try to change it to normal,
canvas.getActiveObject().set("fontWeight", "");
canvas.getActiveObject().set("fontWeight", "100");
canvas.getActiveObject().set("fontWeight", "normal");
canvas.renderAll();
not working.
I don't know where the issue is. Am i doing anything wrong here?.
Its behaving strange
You can see it here.
visit first here
Then visit here
I just take fabric.js from here and replaced with mine, and working all.
The following code works for me. I see two points where I could failed at your side:
canvas.renderAll();
Needed to be rerendered properly. And also:
canvas.setActiveObject(textSample);
was neccessary for me. Because otherwise:
canvas.getActiveObject();
was undefined.
Now a full working code example:
var canvas = new fabric.Canvas('c', { selection: false });
var text = 'Type Text Here';
var textSample = new fabric.Textbox(text, {
left: 300,
top: 50,
width: 200,
height: 20,
fontFamily: 'Helvetica',
fill: "#fac",
fontWeight: '100',
fontSize: parseInt('25'),
originX: 'center',
hasRotatingPoint: true,
centerTransform: true,
});
canvas.add(textSample);
canvas.setActiveObject(textSample);
canvas.getActiveObject().set("fontWeight", "bold");
canvas.renderAll();
canvas.getActiveObject().set("fontWeight", "100");
canvas.renderAll();
Hope that helps.

OpenStreetMap add tag on map

I am working on a webapp with openstreetmap and OpenLayers. What I have done is using JavaScript rendering a line on map with some given points, like the screen capture below:
Now what I would like to do is to have a tag displayed above the line, something like below:
I am not sure how I can achieve this through JavaScript, and I couldn't find any useful reference document. Anyone have done this before please share some experience. Thank you!
Try creating opaque (or zero-width) points with styled labels. Here's my proposition based on Labeled Features Example. (I don't have possibility to test it right now, so watch out).
First: Create new vector layer (as styling settings might interfere with your current layer with line) styled with invisible points and some parameters:
var vectorLayer = new OpenLayers.Layer.Vector("Labeled points", {
styleMap: new OpenLayers.StyleMap({'default':{
// should be invisible, if not, set opaque
strokeWidth: 0,
pointRadius: 0,
// label may have \n linebreaks
label : "${label}",
fontColor: "${fontColor}",
fontSize: "12px",
fontFamily: "Courier New, monospace",
fontWeight: "bold",
labelAlign: "${align}",
labelXOffset: "${xOffset}",
labelYOffset: "${yOffset}",
labelOutlineColor: "white",
labelOutlineWidth: 3
}})
});
Second: Here's how you create feature with given parameters (the ${parameter}'s):
var newLabeledPoint = new OpenLayers.Geometry.Point(-101.04, 35.68);
var newLabeledFeature = new OpenLayers.Feature.Vector(newLabeledPoint );
newLabeledFeature .attributes = {
label: "Line 1",
fontColor: 'blue',
align: "cm",
// positive value moves the label to the right
xOffset: 50,
// negative value moves the label down
yOffset: -15
};
and finally: vectorLayer.addFeatures([newLabeledFeature]);.

How do I fix how my Titanium Developer app Label is rendering on a TableView?

I am having trouble getting the following code to render as I expect it to:
var img = Titanium.UI.createImageView({
top: 0,
left: 0,
width: 140,
height: 92,
image: 'http://cdn.monmotors.com/tn_' + imgr,
defaultImage: 'car.png'
});
post_view.add(img);
var lbl = Titanium.UI.createLabel({
text: desc,
left: 160,
width: 'auto',
top: 0,
height: 92,
textAlign: 'left',
color: '#ffffff',
font: {
fontSize: 12,
fontWeight: 'bold'
},
});
post_view.add(lbl);
This is how it is rendering:
I've set top: 0 and I assumed this would put the label at the top, but this is obviously not the case.
Anyone have any idea how I can achieve this? Thanks in advance.
If all the images are the same height, you can set top to a negative value (perhaps -92 if your height for the image is set to 92). However, if the image sizes vary, you will likely need to vary the value appropriately.
Ideally, setting layout: horizontal in a view you use to wrap the label and the image together would make it so that top: 0 would work for you, but it appears that horizontal may not be supported (yet, at least) for Android in Appcelerator. That info is 9 months old, this link from three weeks ago says that it's now supported, so it's probably worth giving it a shot.
top: -70(or other -#) should bring it up

Categories