How do I use Fabric.js’s canvas.clear if I only want a certain element to be cleared? My intention is to clear the background once the “delete” button is pressed, but the font to remain. How do I achieve that? They both are added onto the canvas, so if I use canvas.clear they both are removed.
Do I have to use two canvases?
JSFiddle Demo
var canvas = new fabric.Canvas('canvas');
var textObj1 = new fabric.Text('font test', {
left: 100,
top: 350,
fontSize: 30,
fill: "#FF0000" // Set text color to red
});
canvas.add(textObj1);
fabric.Image.fromURL('http://s17.postimg.org/4740ku7z3/i_Stock_000000284123_XSmall.jpg', function(oImg) {
// scale image down, and flip it, before adding it onto canvas
oImg.scale(1);
oImg.selectable = false;
canvas.add(oImg);
});
function deleteimg() {
canvas.clear();
};
<canvas id="canvas" width="800" height="450" style="border:1px solid #000000"></canvas>
<button class="button-big" onclick="deleteimg()">delete</button>
You must repaint everything except the background:
function draw( background ) {
var canvas = new fabric.Canvas( 'canvas' );
canvas.clear();
var textObj1 = new fabric.Text('font test', {
left: 100,
top: 350,
fontSize: 30,
fill: "#FF0000" // Set text color to red
});
canvas.add(textObj1);
if ( background ) {
fabric.Image.fromURL( 'http://s17.postimg.org/4740ku7z3/i_Stock_000000284123_XSmall.jpg', function (oImg) {
// scale image down, and flip it, before adding it onto canvas
oImg.scale(1);
oImg.selectable = false;
canvas.add(oImg);
} );
}
}
// Call function with background
draw( true );
function deleteimg(){
// Call function without background
draw( false );
};
http://jsfiddle.net/o6a2uot4/
Related
I need a circle, which gets bigger every second. If I click the circle, it should disappear.
Ok so I added an animation and a mousedown function. But at the end of the animation the mousedown function does not work.
The circle is not recognized any more and is null until the animation finishes.
Any suggestions?
MyCode:
let canvas = new fabric.Canvas('c');
var temp = new fabric.Circle({
left: 0,
top: 0,
fill: 'red',
radius: 20
});
temp.on('mousedown', function(e){
console.log("clicked");
});
temp.selectable = false;
canvas.add(temp);
function animate(c){
c.animate('radius', '80',{
duration: 6000,
onChange: canvas.renderAll.bind(canvas)
});
}
animate(temp);
You need to call object#setCoords. in onChange handler.
DEMO
let canvas = new fabric.Canvas('c');
var temp = new fabric.Circle({
left: 0,
top: 0,
fill: 'red',
radius: 20,
selectable: false
});
temp.on('mousedown', function(e) {
console.log("clicked");
canvas.remove(temp);
temp.isRemoved = true;
});
canvas.add(temp);
function animate(c) {
c.animate('radius', '80', {
duration: 6000,
onChange: function() {
c.setCoords();
canvas.requestRenderAll();
},
abort: function() {
return c.isRemoved;
}
});
}
animate(temp);
canvas {
border: 1px solid #999;
}
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.0.0/fabric.js"></script>
<canvas id='c' width=300 height=200></canvas>
<div id='result'></div>
<div id='result2'>
</div>
I uploaded an image as background image, so that I am able to draw circle and rectangle on top of it.
But, when I try to delete any shape, I am not able to do that.
I tried debugging and it just says Unexpected token ) on Delete
I am just not able to figure out what exactly is the problem here.
//-----------------------------Getting hold of Canvas----------------------------
var canvas = new fabric.Canvas('canvas');
canvas.setHeight(window.innerHeight * .75);
canvas.setWidth(window.innerWidth * .75);
drawBackground();
//--------------------------Image Rendering--------------------------------------
function drawBackground() {
fabric.Image.fromURL('https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg', function(img) {
img.scaleToWidth(window.innerWidth * .75);
img.scaleToHeight(window.innerHeight * .75);
canvas.setBackgroundImage(img);
canvas.renderAll();
});
}
//------------------------Reset--------------------------------------------------
/*window.reset = function(){
canvas = new fabric.Canvas('canvas');
drawBackground();
}*/
//------------------------Rectangle----------------------------------------------
window.addRect = function() {
var rect = new fabric.Rect({
left: 0,
top: 0,
stroke: 'red',
fill: 'rgba(255,0,0,.4)',
width: 50,
height: 50,
});
rect.hasRotatingPoint = false;
canvas.add(rect);
}
//---------------------Circle----------------------------------------------------
window.addCircle = function() {
var circle = new fabric.Circle({
left: 0,
top: 0,
radius: 20,
stroke: 'green',
fill: 'transparent',
});
circle.hasRotatingPoint = false;
canvas.add(circle);
}
//--------------------Delete Objects---------------------------------------------
window.delete = function() {
canvas.remove(canvas.getActiveObject());
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.6/fabric.min.js">
</script>
<canvas id="canvas" width="800" height="600" style="border:1px solid red;"></canvas>
<!--<button onClick="reset()">Reset</button> !-->
<button onClick="addCircle()">Circle</button>
<button onClick="addRect()">Box</button>
<button onClick="delete()">Delete</button>
delete is a reserved word and cant be used as a function on the window object.
A helpful link:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete
You use delete as function inline right here:
<button onClick="delete()">Delete</button>
I have an application, with fabricjs. It works with the zoom of the mousewheel, when I do mousewheel up, my canvas save the state, like as if I do mousewheel down.
I have a state in the canvas when I put the mouse over on an object.
When you are hovering an object and do zoom-in and zoom-out, the state of the canvas is saved with the hover state. I don't want this to happen. How I can prevent this?
//click on the rect to see that the color red is saved in the json
//shown in the console log, but i want the original State, the red fill
canvas.on("mouse:over", function(event){
if("target" in event){
color = event.target.fill;
event.target.fill="red";
canvas.renderAll();
}
});
canvas.on("mouse:out", function(event){
if("target" in event){
event.target.fill=color;
canvas.renderAll();
}
});
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'blue',
width: 20,
height: 20,
angle: 45
});
canvas.add(rect);
You can check the fiddle at:
https://jsfiddle.net/samael205/xtcmokuy/9/
There is no way to just ignore the hover state. You can save the color in some other field and pass that field in to the toObject() call and the reset it after the export.
var canvas = new fabric.Canvas('canvas', {
perPixelTargetFind: true
});
canvas.on("mouse:down", function(event) {
var state = canvas.toObject(['trueColor']);
state.objects.forEach(o => {
if (o.trueColor) {
o.fill = o.trueColor;
}
})
console.log(state);
});
//click on the rect to see that the color red is saved in the json
//shown in the console log, but i want the original State, the red fill
canvas.on("mouse:over", function(event) {
if (event.target) {
event.target.trueColor = event.target.fill;
event.target.fill = "red";
canvas.renderAll();
}
});
canvas.on("mouse:out", function(event) {
if (event.target) {
event.target.fill = event.target.trueColor;
canvas.renderAll();
}
});
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'blue',
width: 20,
height: 20,
angle: 45
});
canvas.add(rect);
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.6/fabric.min.js"></script>
<canvas id="canvas"></canvas>
When I remove the object and click on canvas element , the removed shape re-appears and I am not able to select it also.
var delete = function(){
var canvas = document.getElementById("canvas").fabric;
canvas.remove(canvas.getActiveObject());
}
You have to register an handler to object selection on canvas, then remove the object.
Check the runnable snippet below if could work for your needs:
$(function() {
var canvas = new fabric.Canvas('c')
var operation = '';
var circle = new fabric.Circle({
radius: 20,
fill: 'green',
left: 100,
top: 100
});
var triangle = new fabric.Triangle({
width: 20,
height: 30,
fill: 'blue',
left: 50,
top: 50
});
canvas.add(circle, triangle);
canvas.on('object:selected', doOperationHandler);
function doOperationHandler() {
if (operation == 'remove') {
remove();
}
}
function remove() {
canvas.remove(canvas.getActiveObject());
}
$('#btn_select').on('click', function() {
operation = '';
});
$('#btn_delete').on('click', function() {
operation = 'remove';
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id='c'>
</canvas>
<button id='btn_select'>Select</button>
<button id='btn_delete'>Delete</button>
In fabric-js, i am making Group of Rect and text field and then adding it to the canvas. i am using following code , but can i change the Text of text field once it is added in canvas .
I have made Fiddle Please Check,
http://jsfiddle.net/HAb4N/5/
var canvas = new fabric.Canvas('c');
var Bar = new fabric.Text('Bar', {selectable: false, top: 50, left: 10});
var rect = new fabric.Rect({width: 100, height: 100, left: 100, top: 100, fill: 'red'});
var group = new fabric.Group([rect, Bar], {selectable: true, top: 50, left: 100});
canvas.add(group);
canvas.renderAll();
$(document).click(function(e) {
console.log('click');
console.log('ActiveObject', canvas.getActiveObject());
console.log('ActiveGroup', canvas.getActiveGroup());
Bar.set('Text','Selectedoooooooo');
});
This works for me:
Bar.setText("my_text");
canvas.renderAll();
When using the "set" function try camelcase for the first argument!
In other words change:
Bar.set('Text','Selectedoooooooo');
to:
Bar.set('text','Selectedoooooooo');
This works for me 🙏🏼
Use the new IText in FabricJS. Here is a nice solution
This is my answer to it
addText(color) {
color = color ? color : '#333';
let textEl = new fabric.IText('', {
fontFamily: 'Open Sans',
fill: color,
fontSize: 50
});
this.canvas.add(textEl).setActiveObject(textEl);
textEl.enterEditing();
}
Yes you can set text once it is added to canvas.Here is the jsfiddle
try changing your
Bar.set('Text','Selectedoooooooo');
to
Bar.setText('Selectedoooooooo');
Hope it helps....
You can access children of a group via getObjects() or item() methods:
canvas.on('object:selected', function(e) {
e.target.item(1).setText('Selectedoooooooo');
});
See http://jsfiddle.net/fabricjs/HAb4N/12/
Hope this will help select first object then enter text in text area
<canvas id="c" width="600" height="200"></canvas>
<textarea id="textinput" name="textarea" placeholder="Enter Text"> </textarea>
var canvas = new fabric.Canvas('c');
document.getElementById('textinput').addEventListener('keyup', function (e) {
var obj = canvas.getActiveObject();
if (!obj) return;
obj.setText(e.target.value);
canvas.renderAll();
});
var text = new fabric.Text('Your Text Here', { left: 400, top: 200,fill:'#A0A0A0'});
canvas.add(text);
var rect = new fabric.Rect({width: 100, height: 200, left: 200, top: 100, fill:'red'});
var group = new fabric.Group([rect,text], {selectable: true, top: 50, left: 350});
canvas.add(group);
canvas.renderAll();