goldfire / canvasinput Goto Github PK

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 :

• create a CanvasInput without a "canvas" defined
• create a Texture from the CanvasInput::renderCanvas returned value, and assign it to a pixi Sprite :
  new Sprite( Texture.fromCanvas( lInput.renderCanvas()));
• catch "touchstart" and "mousedown" on this Sprite's conatiner to manually control focus :
  myCanvasInput.focus(); myCanvasInput._mouseDown = true; // "hack" to avoid to lose focus
• override the Sprite's Container "updateTransform" method to force focus on CanvasInput::_hiddenInput every time the Container is updated :
  myCanvasInput._hiddenInput.focus();
• you have to manage the end of input in your own way, by manually calling CanvasInput::blur
• when input is done, you also need refresh the whole rendering : on android, the virtual keyboard shift / scale the rendering
• using a "viewport" statement into your html seems to help a bit to prevent weird zoom effects (I need more tests) :
  <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 ^^

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:

1. Type some text (notice the cursor blinks, it should stay solid while typing)
2. Press left arrow (the blinking continues while moving the cursor left)

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..