I'm using version 3.6.6 of fabricJS.
When double clicking on the text, I can no longer change the color of it. This is definitely a bug. Anyone find a workaround for this?
Here's the fiddle:
// Do some initializing stuff
fabric.Object.prototype.set({
transparentCorners: false,
cornerColor: 'rgba(102,153,255,0.5)',
cornerSize: 12,
padding: 5
});
var canvas = window._canvas = new fabric.Canvas('c');
let text = new fabric.IText('Some Selectable Text Here', {
strokeWidth: 0,
stroke: "#ffffff",
paintFirst: "stroke",
fill: '#000000',
fontFamily: 'Courier',
fontSize: 20,
typeOfObject: "text",
charSpacing: 0,
top:25,
left: 25,
});
// Set canvas width / height to one of watermarks boundary dimensions
canvas.setWidth(400);
canvas.setHeight(200);
canvas.backgroundColor = '#efefef';
// Add watermark to new canvas
canvas.add(text);
$('#cc').click( function() {
console.log(text);
text.set("fill", '#CC0000');
canvas.renderAll();
});
https://jsfiddle.net/busatlic/ok3rs0ay/60/
How to encounter the bug:
Double click select a portion of text
Type something to change it
Click "Change Color"
Output after following steps.
Thanks!
Trying to change style after having double clicked it and changed some text.
It should change the color of the whole text, but instead only changes the color of all of the text that was NOT double click selected and edited.
Related
I am using fabric js version 1.7.22
I am working on one project in which I need to add text and it's editing.
When I add new iText in canvas and write some text and erase it. It shows me old cursor line in place of erased character,
I Can't generate this issue in fiddle So please check GIF.
I don't know where I am wrong.
Please Help Me.
My Itext added code is like this:
var text = new fabric.IText('Example heading', {
left: 10,
top: 10,
fontFamily: 'Roboto-Regular',
angle: 0,
fontSize: fontSize,
fill: '#000000',
fontWeight: '',
charSpacing: 0,
shadow: {
"color": "#000000",
"blur": 0,
"offsetX": 0,
"offsetY": 0,
"affectStroke": false
},
hasRotatingPoint: true
});
canvas.add(text);
this issue is caused due to text scaling.
the solution is also applied in a fiddle. but if the canvas is in zoom-out mode then the issue will regenerate.
I have Attach one fiddle for that :
https://jsfiddle.net/Mark_1998/ro8gc3zh/5/
When the IText cursor moves, fabric calls text._clearTextArea() to clear the canvas that draws the cursor. One possible solution would be to extend this area a little bit - just enough to remove the traces of the blinking cursor in all possible cases - by patching the fabric.IText.prototype._clearTextArea() method:
fabric.IText.prototype._clearTextArea = function(ctx) {
// was 'this.width + 4'
var width = this.width + this.fontSize * this.scaleX, height = this.height + 4;
ctx.clearRect(-width / 2, -height / 2, width, height);
}
Here's your example with the patch applied:
fabric.IText.prototype._clearTextArea = function(ctx) {
var width = this.width + this.fontSize * this.scaleX, height = this.height + 4;
ctx.clearRect(-width / 2, -height / 2, width, height);
}
var canvas = window._canvas = new fabric.Canvas('c');
var text = new fabric.IText('this is example text', {
left: 20,
top: 50,
fill: 'red',
scaleX: 0.5,
fontFamily: 'verdana'
});
canvas.add(text);
canvas.setActiveObject(text);
canvas.getActiveObject().enterEditing();
canvas.renderAll();
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.js"></script>
<h1>
Try to erase text from end
</h1>
<canvas id="c" width="300" height="150"></canvas>
This looks somewhat hacky, but it does the trick, for the lack of a better solution. A better way would be to back-port the IText from fabric v2 - this bug is fixed there.
developing this app in which there several images on a canvas and i am using using fabricjs.
i want to add text overlaid on an image and then be able to remove it as well.
is a way to directly write over the image or do i have to create another layer and write onto it.
there is text related like
var text = new fabric.Text('hello world', { left: 100, top: 100 });
canvas.add(text);
the problem with the above approach is that if the image moves the text will not, so is it possible that the text could be written directly above the image?
any ideas of how this could be done? i revived several discussions where it's not as clear, how it could be done.
any pointers would be most appreciated.
This could be achieved by creating an image and a text object, then adding both the objects to a group and finally adding that group to the canvas.
Here's an example, showing that in action ...
var canvas = new fabric.Canvas('canvas');
// load image
fabric.Image.fromURL('https://i.imgur.com/Q6aZlme.jpg', function (img) {
img.scaleToWidth(100);
img.scaleToHeight(100);
// create text
var text = new fabric.Text('hello world', {
left: 10,
top: 5,
fontSize: 15,
fontFamily: 'Verdana',
fill: 'white'
});
// add image and text to a group
var group = new fabric.Group([img, text], {
left: 50,
top: 50,
});
// add the group to canvas
canvas.add(group);
});
canvas{border:1px solid #ccc}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.11/fabric.min.js"></script>
<canvas id="canvas" width="200" height="200"></canvas>
I am not quite clear of what exactly is your requirement.
Regardless of it, i have created a JS Fiddle for you.
https://jsfiddle.net/xpntggdo/9/
textBox=new fabric.Textbox("Enter Text",{
fontSize: 16,
fontFamily: 'Arial',
textAlign: 'left',
width: 180, // for 20 characters
top:arrowTop,
left:arrowLeft
});
canvas.add(textBox);
canvas.renderAll();
This might be of a little help at least. Comment on this answer and I will try to help you more on it if that is possible for me.
I want the user to be able to select a fabric.Textbox and do the rotation, move, resizing etc but not the editing of the text. To edit the text the user must select the textbox object and then activate the textediting (not in fabric).
So what I want is to avoid that the user can edit the text in fabric (like fabric.Text).
Is there any way to do this?
canvas = new fabric.Canvas('canvas');
var shape = new fabric.Textbox('I am a not editable textbox', {width: 200, top:0, left:0, editable: false, cursorWidth: 0});
canvas.add(shape);
<script src="http://www.deltalink.it/andreab/fabric/fabric.js"></script>
<canvas id='canvas' width="500" height="400" style="border:#000 1px solid;"></canvas>
Fabric.js Textbox subclasses IText.
From the IText documentation you can see:
/**
* Indicates whether a text can be edited
* #type Boolean
* #default
*/
editable: true,
Why the cursors still appear is a mystery to me. So I applied a cursorWidth = 0 to temporarily patch the problem.
It is probably an issue with the library itself.
var textboxObj = new fabric.Textbox(selectValue, {
fontSize: 24,
originX: 'center',
originY: 'center',
top: center.top,
left: center.left,
editable: false,
});
I am developing a navigation application, which draws planned route on a map. Planned route consists of points connected with a line. Each point is labelled with distance and direction. When I initially draw the route on the map, I calculate text position in a way, where it doesn't interfere with the line - I use offsetX, offsetY and rotation style attributes. Unfortunately, when the map view is rotated, not of the mentioned attributes is changed - text is not rotated. Is there a way, how to rotate the text with the view, so it will remain on it's position relative to the point? I have already tried rotateWithView: true with both image and text parts.
My style is defined like:
return [new ol.style.Style({
image: new ol.style.Circle({
radius: 20,
fill: new ol.style.Fill({color: 'black'}),
stroke: new ol.style.Stroke({color: 'black', width: 1})
}),
text: new ol.style.Text({
textAlign: "center",
textBaseline: "middle",
font: 'normal 1.5rem Arial',
text: "This is my text",
fill: new ol.style.Fill({color: 'black'}),
stroke: new ol.style.Stroke({color: 'black', width: 1}),
offsetX: 10,
offsetY: 15,
rotation: 0.3
})
})];
Update feature rotation on map view property change event.
map.getView().on('propertychange', function(event) {
textStyle.setRotation(this.getRotation());
mySource.changed();
});
var textStyle = new ol.style.Text({
// ...
});
var layer = new ol.layer.Vector({
source: mySource,
style: new ol.style.Style({
text: textStyle,
// ...
})
});
I want to draw text on canvas., how to do it any sample example?
The canvas already contains some shape drawn, i want to show text on the top of that shape on canvas
How can i do it?
Also be aware that you need to actually have loaded a cufon font. There is no default font when using Fabric.js.
<script src="fabric.js"></script>
<script src="cufon.calibri.js"></script>
There are so many fonts available from http://www.cufonfonts.com/
This being the case the author is planning on removing the need for cufon. Discussed here: Fabric.js + Google Fonts
If you're wanting to render a block, then some text inside of that block. I would do something like this.
//Render the block
var block = canvas.add(new fabric.Rect({
left: 100,
top: 100,
fill: 'blue'
}));
//Render the text after the block (so that it is in front of the block)
var text = canvas.add(new fabric.Text('I love fabricjs', {
left: block.left, //Take the block's position
top: block.top,
fill: 'white'
}));
//Render the text and block on the canvas
//This is to get the width and height of the text element
canvas.renderAll();
//Set the block to be the same width and height as the text with a bit of padding
block.set({ width: text.width + 15, height: text.height + 10 });
//Update the canvas to see the text and block positioned together,
//with the text neatly fitting inside the block
canvas.renderAll();
Take a look at How to render text tutorial.
It's as simple as:
canvas.add(new fabric.Text('foo', {
fontFamily: 'Delicious_500',
left: 100,
top: 100
}));
Also worth noting that you might need to adjust Cufon's offsetLeft to help correctly position the text. Something like:
Cufon.fonts[your-fontname-in-lowercase-here].offsetLeft = 120;
The kitchen sink demo of fabric uses this:
http://kangax.github.com/fabric.js/lib/font_definitions.js