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,
});
Related
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.
There has been multiple changes in the Fabricjs API that affect the way scaling points behave. One of the latest changes in version 4 (http://fabricjs.com/v4-breaking-changes) states that uniformScaling is now the way to go to force proportional scaling.
This is my test canvas:
<canvas id="c" width="400" height="400" style="border:1px solid #ccc"></canvas>
And this is my simple code snippet:
const canvas = (this.__canvas = new fabric.Canvas("c"));
canvas.uniformScaling = true;
const Add = () => {
const rect = new fabric.Rect({
left: 100,
top: 100,
fill: "yellow",
width: 200,
height: 100,
stroke: "lightgreen",
});
canvas.add(rect);
canvas.setActiveObject(rect);
};
Add();
See a codepen illustrating the issue.
Why are the control points for resizing horizontally and vertically still there? What am I doing wrong?
The uniformScaling property only determines the behavior of the corner resize controls. You can hide the side controls using the setControlsVisibility method.
http://fabricjs.com/docs/fabric.Object.html#setControlsVisibility
fabric.Rect.prototype.setControlsVisibility({
ml: false,
mt: false,
mr: false,
mb: false
});
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.