goldfire / canvasinput Goto Github PK
View Code? Open in Web Editor NEWHTML5 Canvas Text Input
Home Page: http://goldfirestudios.com/blog/108/CanvasInput-HTML5-Canvas-Text-Input
HTML5 Canvas Text Input
Home Page: http://goldfirestudios.com/blog/108/CanvasInput-HTML5-Canvas-Text-Input
Hi, I did following: 1. create a CanvasInput, 2. Destroy that CanvasInput object and clearRect whole canvas. After that wherever I click on the canvas there is error. Can you please help?
var input = new CanvasInput({
canvas: document.getElementById('myCanvas'),
x: 40,
y: 40
});
function foo(input) {
console.log("foo input x = " + input.x() + " y = " + input.y()
+ " width = " + input.width()
+ " height = " + input.height());
input.destroy();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext("2d");
context.clearRect(0, 0, canvas.width, canvas.height);
}
setTimeout(foo, 1000, input);
Error:
"error"
"TypeError: Cannot set property 'font' of null
at window.CanvasInput._textWidth (xeletudahe.js:10:14120)
at window.CanvasInput._clipText (xeletudahe.js:10:13961)
at window.CanvasInput._clickPos (xeletudahe.js:10:15620)
at window.CanvasInput.mouseup (xeletudahe.js:10:10394)
at HTMLCanvasElement.<anonymous> (xeletudahe.js:10:2431)"
Newbie.. Im trying to build a small app that people can type a text that they like and in Tamil with a font I've designed and download an image of it. For input I need to use https://developers.google.com/transliterate/ api.
I was wondering if I can use it with your plugin.
Steps to recreate bug:
1- Create a new Input Box.
2- Type anything longer than the Box Width.
3.1- Use mouse to select previous words, any input from now on will have wrong alignment.
3.2- Unable to use arrow key to visit the first word which is at the front, outside of view.
If I'm not missing something it's currently not possible to use the input type "password" or something similar to it, whereas it would be a great-to-have feature.
If you're not going to implement this, is there at least a quick workaround for it?
Thanks in advance.
Awesome work! I'm totally gonna use this.
It would be great if this control allowed keyboard selection using the shift key.
When resizing the input scaled correctly but the "select" box to focus stays relative to the original canvas width.
Something like this fixes it . 1359 - 1362
var self = this,
relativeX = self._ctx.canvas ? self._x / ( self._ctx.canvas.width / self._ctx.canvas.offsetWidth) : self._x,
relativeY = self._ctx.canvas ? self._y / ( self._ctx.canvas.height / self._ctx.canvas.offsetHeight) : self._y,
xLeft = x >= relativeX + self._extraX,
xRight = x <= relativeX + self._extraX + self._width + self._padding * 2,
yTop = y >= relativeY + self._extraY,
yBottom = y <= relativeY + self._extraY + self._height + self._padding * 2;
I just figureout that when I destroy the textbox the events associated aren't removed giving to me, in my loop game, the error:
CanvasInput.js:1284 Uncaught TypeError: Cannot set property 'font' of null(…)
every time I click with mouse.
can you please help me to solve this problem? ty
Hello,
Not really an issue. I needed to prototype an input text field for a coming development.
I did a wrapper (work in progress), adapted to my own framework. If you can read Haxe code, maybe it can help you to develop your own solution :
wrapper :
https://github.com/NicolasVereenoghe/git.vega.pixi4/blob/master/src/vega/ui/MyCanvasInputContainer.hx
haxe externs (minimum to make it work) :
https://github.com/NicolasVereenoghe/git.vega.pixi4/blob/master/haxe/lib/CanvasInput/1%2C2%2C7/src/CanvasInput.hx
It only works with "canvas" rendering mode. With "webgl", it is displayed but i didn't manage to input anything.
The trick is :
new Sprite( Texture.fromCanvas( lInput.renderCanvas()));
myCanvasInput.focus(); myCanvasInput._mouseDown = true; // "hack" to avoid to lose focus
myCanvasInput._hiddenInput.focus();
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0" />
For now my tests are on stand by, but I hope it could help someone who would try to make this nice CanvasInput work with pixijs.
Thanks for reading, and thanks to people developing CanvasInput ^^
var input = new CanvasInput({
canvas: document.getElementById('canvas')
});
input.value('xxx')
input.onkeydown(()=>{
console.log(input.value())
})
This seems like it should be so easy.. How would I clear the text?
It would be very nice if support were added for double-click on word to select it similar to how every other native interface works.
When I spawn a text box on a canvas, I have to put the cursor below the text box to be able to select it. When the cursor is directly over the box, the input is not selectable.
Not an issue for me since I'm using the focus method after spawning, but I thought you'd be interested in knowing :)
Steps to reproduce:
Can you add CanvasInput.hide and CanvasInput.unhide methods that set the rendered objects to visible or invisible (and simultaneously disable input)?
This would make the CanvasInput library act more like the other text objects already being used in the Phaser library.
I use the CanvasInput method as a text input box along with other Phaser.game text objects. I have a .hide() method that sets a field for text objects and makes them invisible:
visible=false.
However, I can't apply this same method to the text input box inheriting from CanvasInput.
Hi guys
I want to create an InputCanvas and retrieve the String when the user hits enter.
var input = new CanvasInput({
...
...
value: 'Test',
onsubmit: function () {console.log(self.value);}
})
gives me "undefined". Please excuse my noob-question...
Marco
At the moment, text alignment is set to left without an option to change that.
I tried changing ctx.textAlign
to center, but that breaks the display (only half of the text is visible and the cursor still operates under the premise that the text is left-aligned).
Is there an easy way to implement support for center (and possibly right) alignment?
At line 1210 ctx is null after destroying input and creating new.
It is normal to use this plugin on pages that have only one canvas,
and then when I use it in the game engine I don't see the plugin,
only when the mouse moves in it will change the style, and the input will have no effect.
I try use the latest version v1.2.7 and master branch get the same result.
the game engine is called Phaser.js that I used.
thanks for your dedication,good luck!
Hello,
Looking for a way to get the exact (or close approximate) of the text rendered. I tried measureText, but it didn't work
Thanks.
Hello,you have develop a great library.I have used it and it help me alot.
I just wanted to ask please help me about the text appear in text box.It appear blurry ,not clear.I have used exact code for the input as in example..
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.