We Keep Coding

Fabric.js iText : How to do text selection on iText while not allowing text modification?

I have been reading docs and forums to solve this problem, but could not find an answer.
var t1 = canvas.t1 = _t1 = new fabric.IText(text1, {
left: 100,
top: 50,
editable: true,
selectable: false,
width: 300,
height: 150,
fontFamily: 'Helvetica',
fontSize: 20,
fill: '#f4b642',
} );
var t2 = canvas.t2 = _t1 = new fabric.IText(text2, {
left: 200,
top: 150,
editable: false,
selectable: true,
width: 300,
height: 150,
fontFamily: 'Helvetica',
fontSize: 20,
fill: '#333',
} );
canvas.add(t1,t2);
t1.enterEditing();
https://jsfiddle.net/qgeryu9o/2/
As shown on the fiddle by the upper iText element , I would like to
access directly to the text at page load , this just to select
some words or sentences.
Using itext.enterEditing(), as on the upper itext box, this works fine except
that it allows also what I do not want : to delete, add, or modify the text.
In setting itext.editable to false ( as on fiddle lower iText element)
the text cannot be modified , but there is no way to show selection.
I tried to catch keydown events on the container div as suggested on this thread.
fabric.js canvas listen for keyboard events?
But it does not work for me (tried on Chrome, Firefox), the event is not fired on itext in editing mode.
Thanks for your help.
Mike

Since I could not find a Fabric.js parameter allowing selection but no editing, I used a work-around.
At first I wanted to remove listeners set on the hidden textarea.
But, as bind() is used , there is no way to remove these listeners
without modifying fabric.js :
fabric.util.addListener(this.hiddenTextarea, 'keydown', this.onKeyDown.bind(this));
fabric.util.addListener(this.hiddenTextarea, 'keyup', this.onKeyUp.bind(this));
So, I just have overwritten the onInput() and onKeydown methods.
t1.onInput = function() {
console.log("no input on t1") ;
return false } ;
t1.onKeyDown = function() {
console.log("no onKeyDown on t1") ;
return false } ;
It works fine as shown on the corrected fiddle:
https://jsfiddle.net/qgeryu9o/4/
If there is a more direct way to get the same result (selection but no edition), I would be happy to hear about it.
Thanks

My background Image won't show up on the div

I am trying to create a div and add a background image to it in jQuery. For some reason, I cannot do it. If I instead make my background color white, I get a white background. Here is my code:
function appendToDom(poster) {
var aPoster = $('<div>');
aPoster.css({
display: 'inline block',
float: 'left',
margin: '10px',
marginLeft: '37px',
marginTop: '20px',
width: '200px',
height: '300px',
fontSize: '36px',
color: 'black',
//backgroundColor: 'white',
backgroundSize: '200px 300px',
backgroundImage: './../images/question.png'
})
/*
$(aPoster).attr("css","background-image: url(~/desktop/MyMovies/public/js/images/question.jpeg)");
$(aPoster).attr("css","background-size: 200px 300px");*/
$(main).append(aPoster);
}
Thanks for all the advice! So I took the suggestions given to me, but it still doesn't work for me.Here is a screenshot of what I have:
my improved code
NVM I got it! Thanks!

Try making your method look like this...
aPoster.css({
'display': 'inline block',
'float': 'left',
'margin': 10,
'margin-left': 37,
'margin-top': 20,
'width': 200,
'height': 300,
'font-size': 36,
'color': 'black',
'background-color': 'white',
'background-size': '200px 300px',
'background-image': 'url("./../images/question.png")'
Try something like this and see what you get. You also notice that I got rid of the values with pixel. Because JavaScript's default values for CSS properties like that have their units in pixels. Just try it and see if it works. Hope this helped. Oh and one last thing, if you used an external script, don't forget to use the URL and make it relative to the script itself and not your main page...but in your case, the styles would be added inline to the div element so you should probably make it relative to your main page, the page where the div would be created...

If the style is inline like in your case, the path has to be relative to the html document. Please check it.

how to get fabricJS to work with touch events?

I have an application developped with phonegap and I am testing the touch support for fabricJS but somehow it doesn't work for me.
I tried creating a custom version here but it doesn't work with it.
I have this jsfiddle where I used another version called fabric_events.js but it doesn't seems to work too. (BTW how do you upload your own version to jsfiddle?)
so I tried the FabricJS touch events demo and it DOES work!!
since the demo worked I tried to download it's own version from http://fabricjs.com/lib/fabric_with_gestures.js but still no luck.
this is my code:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, width=device-width, user-scalable=true" />
<script src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/fabric_with_gestures.js"></script>
<script type="text/javascript" >
$(document).ready
(
function () {
var canvas = new fabric.Canvas('c');
// Do some initializing stuff
fabric.Object.prototype.set({
transparentCorners: false,
cornerColor: 'rgba(102,153,255,0.5)',
cornerSize: 12,
padding: 5
});
alert('fabric.isTouchSupported=' + fabric.isTouchSupported);
var info = document.getElementById('info');
canvas.on({
'touch:gesture': function () {
var text = document.createTextNode(' Gesture ');
info.insertBefore(text, info.firstChild);
},
'touch:drag': function () {
var text = document.createTextNode(' Dragging ');
info.insertBefore(text, info.firstChild);
},
'touch:orientation': function () {
var text = document.createTextNode(' Orientation ');
info.insertBefore(text, info.firstChild);
},
'touch:shake': function () {
var text = document.createTextNode(' Shaking ');
info.insertBefore(text, info.firstChild);
},
'touch:longpress': function () {
var text = document.createTextNode(' Longpress ');
info.insertBefore(text, info.firstChild);
}
});
fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function (img) {
img.scale(0.5).set({
left: 150,
top: 150,
angle: -15
});
canvas.add(img);
});
canvas.add(new fabric.Rect({
left: 50,
top: 50,
fill: '#269926',
width: 100,
height: 100,
originX: 'left',
originY: 'top',
hasControls: true,
hasBorders: true,
selectable: true
}));
var obj = new fabric.Rect({
left: 20,
top: 20,
fill: '#555555',
width: 100,
height: 100,
originX: 'left',
originY: 'top',
hasControls: true,
hasBorders: true,
selectable: true
});
canvas.add(obj).renderAll();
canvas.setActiveObject(obj)
//canvas.sendToBack(obj)
}
);
</script>
<title></title>
<style>
canvas {
border: 1px solid #999;
}
</style>
</head>
<body>
<canvas id="c" width="200" height="200" style='z-index:-1'></canvas>
<p id='info' style='background: #eef; width: 583px; padding: 10px; overflow: scroll; height: 80px'></p>
</body>
</html>

Sorry for the late answer. I am working with Fabric.js at the moment and I do not have any problems with gestures. I have tried your code, it is generally working if you care for three things:
1.) Very important: Please remove style='z-index:-1' from the canvas itself. The z-index property specifies the stack order of an element and a negative number will not allow you to interact with the canvas in your example. More information: CSS z-index Property.
2.) Are you sure that you had created a Custom Build with "Interaction" and "Gestures"? "Gestures" is dependent on "Interaction". If you are unsure, create a Custom Build with all modules except "Node" (unless you want to use Node.js later).
3.) Fabric.js and jQuery must be in the subfolder 'js' regarding to your code. But I would think that it was like that already.
Then it should work for you, too.

Kinetic canvas with user text field input

I've pulled out most of my hair trying to find a solution to no avail.
I know this must be easy but being a javascript neophyte I can't seem to wrap my head around it and am hoping someone can help me out!!!
I'm trying to create a simple canvas element that has an image with text (with wrapping) on top of it. The text will come from a text field outside of the canvas (nothing fancy). I've seen where the canvas populates with the text as it is input into the text field which is what I'm looking for (no submit button). Eventually, I will need to add 2 additional text fields with different information, doing the same thing but for right now I'd be happy to get one to work!
The kinetic text tutorial found here (http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-text-tutorial/ - code below) would be perfect if I could only figure out how to get the "complex text" to be pulled from a regular text input field instead of being hard coded!
Any help would be greatly appreciated!
Working code without input text field:
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script>
<script defer="defer">
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 220
});
var layer = new Kinetic.Layer();
var simpleText = new Kinetic.Text({
x: stage.getWidth() / 2,
y: 15,
text: 'Simple Text',
fontSize: 30,
fontFamily: 'Calibri',
fill: 'green'
});
// to align text in the middle of the screen, we can set the
// shape offset to the center of the text shape after instantiating it
simpleText.setOffset({
x: simpleText.getWidth() / 2
});
// since this text is inside of a defined area, we can center it using
// align: 'center'
var complexText = new Kinetic.Text({
x: 100,
y: 60,
text: 'COMPLEX TEXT\n\nAll the world\'s a stage, and all the men and women merely players. They have their exits and their entrances.',
fontSize: 18,
fontFamily: 'Calibri',
fill: '#555',
width: 380,
padding: 20,
align: 'center'
});
var rect = new Kinetic.Rect({
x: 100,
y: 60,
stroke: '#555',
strokeWidth: 5,
fill: '#ddd',
width: 380,
height: complexText.getHeight(),
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: [10, 10],
shadowOpacity: 0.2,
cornerRadius: 10
});
// add the shapes to the layer
layer.add(simpleText);
layer.add(rect);
layer.add(complexText);
stage.add(layer);
</script>
</body>
</html>

Possible solution: to add one input field, set up event listener which fire on change of its value and then start drawing.
<body>
<div id="container"></div>
<input type="text" id='complexText' size="20"/>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script>
<script defer="defer">
var inputField = document.getElementById('complexText');
inputField.addEventListener('change', function() {
var inputText = this.value;
showText(inputText);
}, false);
function showText(inputText) {
*** here goes all your 'Kinetic' code ***
}
See example at jsBin.

FabricJS - text is not working

I have started using FabricJS, unfortunately I can't get texts to show up. Here is my code:
var canvas = new fabric.Canvas('mainCanvas');
var str = new fabric.Text('Hello World', {
fontSize: 30,
fontFamily: 'Arial',
top: 50,
left: 50,
fill: 'black',
});
canvas.add(str);
Other shapes do show up but the text just doesn't show... What am I doing wrong?

I have figured it out, it didn't work because I have used version 0.8.32 instead of 0.9.15.

better use Itext or Textbox if you really want to, simply replace .text to .Itext