I am working in one project, in which I used fabricJS-3.6.3. It is a best library
for canvas manipulations.
As we know the limitation of the canvas, canvas renders a half-pixel of an image. So sometimes it's blurry. Same Problem I put in front of you.
I am trying to render Text into canvas using following code
var text = new fabric.Textbox("lorem ipsum pixel", {
top: 13.5
left: 12.13
width: 157.68
fontSize: 15
fontFamily: 'opensans-lightItalic'
scaleX: 0.67
scaleY: 0.67
})
canvas.add(text);
I have tried this code to make it round:
var text = new fabric.Textbox("lorem ipsum pixel", {
top: 13.5
left: 12.13
width: 157.68
fontSize: 15
fontFamily: 'opensans-lightItalic'
scaleX: 0.67
scaleY: 0.67
})
text.set({
height: Math.round(text.height),
width: Math.round(text.width)
})
canvas.add(text);
canvas.loadFromJSON(canvas.toJSON(), canvas.renderAll.bind(canvas));
Now the result of this code will always blurry Because canvas render Half a Pixel and we got image blurry.
So For clear Result, I have to just set it to with Rounded value. Now the actual problem is that project is too large and has a complex structure, So I want to make one fabricJs patch that automatically replace (top, left, scale ETC...) properties into rounded value. I have tried to make it using fabric.Object method override, but can't be got success in that.
If Anyone knows that how to access and set a property to all object, Then Please help me.
Instead of Textbox you should use IText
var text = new fabric.IText('lorem ipsum pixel', {
top: 13.5,
left: 12.13,
fontSize: 15,
fontFamily: 'opensans-lightItalic'
});
canvas.add(text);
Related
I have a problem with adding shadow to my View Component.
here is the style object:
header: {
width: '95%',
height: '15%',
marginTop: 50,
alignSelf: 'center',
borderRadius: 20,
justifyContent: 'center',
flexDirection: 'row',
paddingHorizontal: 10,
elevation: 2,
},
and it looks like this :
and as soon as I add these style properties :
borderWidth: 1,
borderColor: 'white',
it looks better but not the best way:
what is my problem? can you help me ?
If you'd like to add a shadow to a <View/> component I would suggest you to use the shadow props. You can add a shadow to a view component by using the style properties like so:
// Just picked some random values for each of the properties.
const styles = StyleSheet.create({
header: {
shadowOffset: {
width: 20,
height: 10
},
shadowOpacity: 0.2,
shadowRadius: 20
},
});
Result of example code
I am not able to replicate the styling you have shown with just the code you have supplied. So I can't give you an answer as to why adding borderWidth and borderColor properties change your shadows. If you'd like me to dive into that, please supply the code of the entire component or even better an Expo snack.
What I did notice is that you used the elevation style property, which is will only add a shadow on Android (source). Additionally this property will also affect the z-order for overlapping views, so I would advise against using this if it is just for shadows.
Expo Snack Demo
BackgroundColor:white fixed the problem, thanks to #Ajay
use backgroundColor:'white' fixed the problem
I am working on image cropper using fabric js version 1.7.22.
As usually, every cropper display black transparent overlay over the image (where image look like dull), and also display one Rect. (crop Area where image look full with color).
we can create this functionality using fabric js with background image and fabric.Rect object.
My problem is that when I use GlobalCompositeOperation with destination-out property to fabric.Rect object. It will make hole through canvas.
In simple word :
when I add globalCompositeOperation to destination-out, it will make hole through canvas also.
Expected result of canvas:
Current Result of canvas:
I have made one codepen for demonstration :
https://codepen.io/mayurkukadiya0/pen/zYYWOGL?editors=0110
I have found one codepen also for do same but they are add multiple canvas for display image in separate layer and rect and overlay in separate layer
Is there any way to do this without add external any canvas or css image behind canvas ?
Here is that reference : https://codepen.io/s0nnyv123/pen/eravaN
try using setOverlayImage
here'a demonstration, based on your codepen
var canvas = new fabric.Canvas('canvas', {preserveObjectStacking: 'true'});
canvas.setHeight(300);
canvas.setWidth(300);
canvas.setOverlayImage('https://images.pexels.com/videos/856973/free-video-856973.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500', canvas.renderAll.bind(canvas), {
top: 0,
left: 0,
width: 300,
height:300,
lockMovementX: true,
lockMovementY: true,
lockRotation: true,
selectable: false,
globalCompositeOperation: 'destination-atop',
});
var overlay = new fabric.Rect({
left: 0,
top: 0,
width: 300,
height: 300,
fill: '#00000050',
selectable: false,
globalCompositeOperation: 'source-over'
});
canvas.add(overlay);
var rect = new fabric.Rect({
left: 100,
top: 100,
width: 100,
height: 100,
fill: '#451245',
globalCompositeOperation: 'destination-out'
});
canvas.add(rect);
canvas.renderAll();
I want to clip image, BUT default clipping behaviour just hiding a part of image which out of border. Is there a way to make it visible and set less opacity for overflowed content?
There's one of old clipping examples I told about. It also using lodash to bind clip name to object:
return _.bind(clipByName, pug)(ctx)
Is there a way to replace this functionality with vanilla es5?
I found unclear solution. Again.
Background color of canvas could make an opacity and background image could be clipping object (w/o clipping by itself).
Also, loaded image shoul define globalCompositeOperation set to source-atop.
var canvas = new fabric.Canvas('c');
var clipingRect = new fabric.Rect({
originX: 'left',
originY: 'top',
top: 50,
left: 50,
height: 300,
width: 300,
fill: 'white',
selectable: false
});
canvas.backgroundColor = 'rgba(255,255,0,0.5)';
canvas.setBackgroundImage(clipingRect);
fabric.Image.fromURL('http://placeimg.com/640/480/any', function(fimg) {
canvas.add(fimg.set({
left: 0,
top: 0,
width: canvas.getWidth(),
height: canvas.getHeight(),
globalCompositeOperation: 'source-atop'
}));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.12/fabric.min.js"></script>
<canvas id="c" width="400" height="400"></canvas>
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 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