Fabric JS How to call a function from another function - javascript

I have a function that hides and shows an image whenever it's clicked, but I want to do the same thing, by clicking another object.
Here is the code for the image
function drawCheckbox(left, top, width, height){
var imgClass = new fabric.Image.fromURL('https://image.flaticon.com/icons/svg/33/33281.svg',function(img){
img.width = width;
img.height = height;
img.left = left;
img.top = top;
img.set({
hoverCursor: 'default',
selectable: true,
opacity: 0
})
img.on('mousedown', function(e) {
if(e.target.opacity <= 0.5){
e.target.opacity = 1;
}else{
e.target.opacity = 0;
}
canvas.renderAll();
});
canvas.add(img);
canvas.renderAll();
})
}
And this is the code for the rectangle object:
function addRect(left, top, width, height, id) {
const o = new fabric.Rect({
width: width,
height: height,
fill: tableFill,
stroke: tableStroke,
strokeWidth: 2,
shadow: tableShadow,
originX: 'center',
originY: 'center',
centeredRotation: true,
snapAngle: 45,
selectable: true
})
const t = new fabric.IText(number.toString(), {
fontFamily: 'Calibri',
fontSize: 14,
fill: '#fff',
textAlign: 'center',
originX: 'center',
originY: 'center'
})
const g = new fabric.Group([o, t], {
left: left,
top: top,
centeredRotation: true,
snapAngle: 45,
selectable: true,
type: 'table',
id: id,
number: number
})
canvas.add(g)
number++
g.on('selected', function () {
// here I want to make de image dissapear, when the object is clicked
})
canvas.hoverCursor = 'pointer';
canvas.discardActiveObject();
canvas.renderAll();
return g;
}
I tried creating the image inside the rectangle, but it doesn't do anything when the rectangle it's clicked. Does anyone had a similar problem?
Here is the codepen: codepen.io/Zerro1/pen/PoZvmOE .

Here i have created a codepen for you, this is one way to do it. I tried to create a square and clicking on that square i am toggling the last checkbox visibility.
portion of code:
var square = new fabric.Rect({
width: 100,
height: 100,
fill: '#000',
left:120
});
square.on('mousedown', function(e) {
if(img.opacity <= 0.5){
img.opacity = 1;
}else{
img.opacity = 0;
}
canvas.renderAll();
});
canvas.add(img);
canvas.add(square);
canvas.renderAll();

Related

Detect collision between two text object (not the bounding box)

I'm trying to check for a collision between 2 text objects and using the intersectsWithObject. It's working but it's taking the bouding rect into account. Is it possible to check on pixel level?
Current behaviour:
Wanted behaviour:
const canvas = new fabric.Canvas('canvas');
canvas.setWidth(document.body.clientWidth);
canvas.setHeight(document.body.clientHeight);
const text = new fabric.Textbox('some text', {
width: 300,
fontSize: 70,
top: 120,
left: 100
});
const text2 = new fabric.Textbox('some more text', {
width: 350,
fontSize: 50,
top: 200,
left: 20,
})
if (text.intersectsWithObject(text2, true, true)) {
text.set('fill', 'red');
}
else {
text.set('fill', 'black');
}
canvas.on('after:render', function() {
canvas.contextContainer.strokeStyle = '#555';
canvas.forEachObject(function(obj) {
var bound = obj.getBoundingRect();
canvas.contextContainer.strokeRect(
bound.left + 0.5,
bound.top + 0.5,
bound.width,
bound.height
);
})
});
canvas.add(text);
canvas.add(text2);
https://jsbin.com/menadejato/edit?js,console,output

Create checkbox mecanism with Fabric JS

How can you create a checkbox like component with Fabric JS? More like to click on the image, and to set the opacity to 0. If you click again, to set the opacity to 1.
Here is my code:
For the checkbox image:
fabric.Image.fromURL('https://image.flaticon.com/icons/svg/33/33281.svg', (image) => {
image.scale(0.35);
image.set({
left: 152,
top: 120,
hoverCursor: 'default',
selectable: true,
opacity: 0.5,
hasControls: false,
lockMovementX: true,
lockMovementY: true
})
if(image.onselect === true ) {
image.set().opacity = 0;
}
canvas.add(image);
});
The box where the image is put:
function addBox(left, top, width, height) {
const o = new fabric.Rect({
left: left,
top: top,
width: 30,
height: 30,
fill: boxFill,
strokeWidth: 2,
originX: 'left',
originY: 'top',
centeredRotation: true,
snapAngle: 45,
selectable: true,
type: 'box',
id: generateId()
})
if(image.onselect === true ) {
image.set().opacity = 0;
}
canvas.add(o)
canvas.getObjects().map(o => {
o.hasControls = false
o.lockMovementX = true
o.lockMovementY = true
o.borderColor = '#38A62E'
o.borderScaleFactor = 2.5
})
canvas.selection = false
canvas.hoverCursor = 'pointer'
canvas.discardActiveObject()
canvas.renderAll()
return o
}
How can I resolve this issue? Is there a way to make the image appear and dissapear when you click on it ( using opacity or something similarly) ?
Hope this helps you and many who want to add Event on objects.
var canvas = new fabric.Canvas("canvas");
function drawCheckbox(left,right, width, height){
var imgClass = new fabric.Image.fromURL('https://image.flaticon.com/icons/svg/33/33281.svg',function(img){
img.width = width;
img.height = height;
img.left = left;
img.top = right;
img.hasControls = false
img.on('mousedown', function(e) {
if(e.target.opacity <= 0.5){
e.target.opacity = 1;
}else{
e.target.opacity = 0.4;
}
canvas.renderAll();
});
canvas.add(img);
canvas.renderAll();
})
}
drawCheckbox(0,0, 100,100)
drawCheckbox(100,100, 100,100)
drawCheckbox(200,200, 100,100)
body {
background-color:silver;
}
canvas {
border:1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"> </script>
<canvas id="canvas" width=300 height=300></canvas><br>

Problem with FabricJS TextBox can't select and edit value & Layer Index is not working correctly

I have a problem with Fabric Text Box: user can't select TextBox & edit value. And using function canvas.MoveTo to set image of cloud to index 2 & Text Box to index 7, I expect TextBox is above Image, but actually, the Text box is always display behind the cloud image.
Here is my code
var canvasObject = document.getElementById("editorCanvas");
// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());
var canvas = new fabric.Canvas('editorCanvas', {
backgroundColor: 'white',
selectionLineWidth: 2,
width: $("#canvasContainer").width(),
height: $("#canvasContainer").height()
});
canvas.setBackgroundImage('https://futushigame.firebaseapp.com/Background.svg', canvas.renderAll.bind(canvas), {
// Needed to position backgroundImage at 0/0
originX: 'left',
originY: 'top'
});
fabric.Image.fromURL("https://futushigame.firebaseapp.com/group5.svg", function(img) {
img.left = 0.2;
img.top = 54.94981;
canvas.add(img);
canvas.moveTo(img, 2);
canvas.renderAll();
});
var textbox7 = new fabric.Textbox("LITTLE PRINCESS", {
left: 0,
top: -14.620352,
width: 169.598436,
fontSize: 19.3302,
fontFamily: 'Nunito-Bold',
fill: "#000000",
editable: true,
});
textbox7.editable = true;
canvas.add(textbox7);
canvas.moveTo(textbox7, 7);
textbox7.transformMatrix = [1, 0, 0, 1, 64.7895, 169.1073];
textbox7.setCoords();
canvas.renderAll();
#canvasContainer {
width: 100%;
height: 100vh;
background-color: gray;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<div id="canvasContainer">
<canvas id="editorCanvas"></canvas>
</div>
For moveTo index, better choose a number between 0 and number of object present in canvas.
And as I see you are changing left and top using tansformMatrix, so just set left and top to the object.
var canvas = new fabric.Canvas('editorCanvas', {
backgroundColor: 'white',
selectionLineWidth: 2,
width: $("#canvasContainer").width(),
height: $("#canvasContainer").height()
});
canvas.setBackgroundImage('https://futushigame.firebaseapp.com/Background.svg', canvas.renderAll.bind(canvas), {
// Needed to position backgroundImage at 0/0
originX: 'left',
originY: 'top'
});
fabric.Image.fromURL("https://futushigame.firebaseapp.com/group5.svg", function(img) {
img.left = 0.2;
img.top = 54.94981;
canvas.add(img);
canvas.moveTo(img, 0);
canvas.renderAll();
});
var textbox7 = new fabric.Textbox("LITTLE PRINCESS", {
left: 64.7895,
top: 154.4856948,
width: 169.598436,
fontSize: 19.3302,
fontFamily: 'Nunito-Bold',
fill: "#000000",
editable: true,
});
canvas.add(textbox7);
canvas.moveTo(textbox7, 1);
//textbox7.transformMatrix = [1, 0, 0, 1, 64.7895, 169.1073];
textbox7.setCoords();
canvas.renderAll();
#canvasContainer {
width: 100%;
height: 100vh;
background-color: gray;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<div id="canvasContainer">
<canvas id="editorCanvas"></canvas>
</div>

FabricJS animating :selected object on canvas during mouse:up and :down

I am trying to use FabricJS to animate any object when it is selected.
So when selected an object 'shrinks' from center on mouse:down (10px off the width and 10px off the height)
And on mouse:up it returns to the original size and state.
I don't know if I need to use FabricJS built in animation for this. I wanted it to grow and shrink linear though.
Right now my Fiddle does pretty much nothing, I can't get far enough without errors.
Does anyone have any examples of this or similar? I couldn't find anything about changing the appearance of FabricJS objects on mouse:up/:down when selected.
(function() {
var canvas = this.__canvas = new fabric.Canvas('canvas');
var touchedObject;
var rect = new fabric.Rect({
left: 50,
top: 50,
width: 50,
height: 50,
fill: 'blue',
hasBorders: false,
});
canvas.add(rect);
var rect2 = new fabric.Rect({
left: 190,
top: 50,
width: 50,
height: 50,
fill: 'red',
hasBorders: false,
});
canvas.add(rect2);
canvas.on('object:selected', function(evn) {
/*animate({
'width': ,
'height':
}, {
duration: 200,
});*/
});
canvas.renderAll();
})();
You could accomplish that using the fabric.util.animate() method.
(function() {
var canvas = this.__canvas = new fabric.Canvas('canvas');
var touchedObject;
var rect = new fabric.Rect({
left: 50,
top: 50,
width: 50,
height: 50,
fill: '#07C',
hasBorders: false,
});
canvas.add(rect);
// disable controls and set hover-cursor
canvas.forEachObject(function(o) {
o.hasBorders = o.hasControls = false;
});
canvas.hoverCursor = 'pointer';
// mouse events
canvas.on('mouse:down', function(e) {
animate(e, 1);
});
canvas.on('mouse:up', function(e) {
animate(e, 0);
});
function animate(e, p) {
if (e.target) {
fabric.util.animate({
startValue: e.target.get('height'),
endValue: e.target.get('height') + (p ? -10 : 50 - e.target.height),
duration: 200,
onChange: function(v) {
e.target.setHeight(v);
canvas.renderAll();
},
onComplete: function() {
e.target.setCoords();
}
});
fabric.util.animate({
startValue: e.target.get('width'),
endValue: e.target.get('width') + (p ? -10 : 50 - e.target.width),
duration: 200,
onChange: function(v) {
e.target.setWidth(v);
canvas.renderAll();
},
onComplete: function() {
e.target.setCoords();
}
});
fabric.util.animate({
startValue: e.target.get('top'),
endValue: e.target.get('top') + (p && 5),
duration: 200,
onChange: function(v) {
e.target.setTop(v);
canvas.renderAll();
},
onComplete: function() {
e.target.setCoords();
}
});
fabric.util.animate({
startValue: e.target.get('left'),
endValue: e.target.get('left') + (p && 5),
duration: 200,
onChange: function(v) {
e.target.setLeft(v);
canvas.renderAll();
},
onComplete: function() {
e.target.setCoords();
}
});
}
}
canvas.renderAll();
})();
#canvas {
border: 1px solid lightgrey;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
<canvas id="canvas" width="150"></canvas>

Deselecting mouse event 'mouse:down' after initial event has been rendered

I am very new to fabric.js, but I am learning quickly.
I have a few items that, when clicked, will fill with the color red.
My problem lies with clicking the image again to reset only that image back to default (black).
Can someone explain how to achieve this?
canvas.on('mouse:down', function(e) {
e.target.setFill('red');
e.target.lockMovementX = e.target.lockMovementY = true;
e.target.lockScalingX = e.target.lockScalingY = true;
e.target.lockUniScaling = true;
canvas.deactivateAll().renderAll();
});
Please see the JSFIDDLE for the full example code
Look at the if statement below. It detects the current color and switches it:
(function(){
var canvas = new fabric.Canvas('c4');
canvas.hoverCursor = 'default';
canvas.on('mouse:down', function(e) {
var color = e.target.fill;
if(color == '#000')
{
e.target.setFill('red');
} else {
e.target.setFill('#000');
}
e.target.lockMovementX = e.target.lockMovementY = true;
e.target.lockScalingX = e.target.lockScalingY = true;
e.target.lockUniScaling = true;
canvas.deactivateAll().renderAll();
});
canvas.add(new fabric.Circle({ radius: 10, fill: '#000', top: 100, left: 200 }));
canvas.add(new fabric.Circle({ radius: 10, fill: '#000', top: 100, left: 150 }));
canvas.add(new fabric.Circle({ radius: 10, fill: '#000', top: 100, left: 100 }));
})();
Look at this Fiddle : http://jsfiddle.net/hpyrk05w/3/
it is so simple :
you have to check on mouse down if current fill of object is what?
if current fill is red than fill it with black color and if not, than fill it with red color
(function(){
var canvas = new fabric.Canvas('c4');
canvas.hoverCursor = 'default';
canvas.on('mouse:down', function(e) {
if(e.target.getFill()=="red")
e.target.setFill('black');
else
e.target.setFill('red');
e.target.lockMovementX = e.target.lockMovementY = true;
e.target.lockScalingX = e.target.lockScalingY = true;
e.target.lockUniScaling = true;
canvas.deactivateAll().renderAll();
});
canvas.add(new fabric.Circle({ radius: 10, fill: '#000', top: 100, left: 200 }));
canvas.add(new fabric.Circle({ radius: 10, fill: '#000', top: 100, left: 150 }));
canvas.add(new fabric.Circle({ radius: 10, fill: '#000', top: 100, left: 100 }));
})();
pre { margin-left: 15px !important }
canvas{border: 1px solid red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://fabricjs.com/lib/fabric.js"></script>
<canvas id="c4" width="450" height="500"></canvas>

Categories

Resources