Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #34177 > unrolled thread

CTX filltext "positioning"

Back to article view | Back to comp.lang.javascript

Contents

  CTX filltext "positioning" jonas.thornvall@gmail.com - 2017-10-24 10:33 -0700
    Re: CTX filltext "positioning" jonas.thornvall@gmail.com - 2017-10-24 10:46 -0700
      Re: CTX filltext "positioning" jonas.thornvall@gmail.com - 2017-10-24 10:58 -0700
      Re: CTX filltext "positioning" "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2017-10-24 11:00 -0700
    Re: CTX filltext "positioning" "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2017-10-24 10:56 -0700
      Re: CTX filltext "positioning" jonas.thornvall@gmail.com - 2017-10-24 11:00 -0700

#34177 — CTX filltext "positioning"

Is there a generic way to get the correct offset positioning doing filltext by character by character?

Since javascript is able to do it when writing out filltext strings on canvas, one would think it would be possible to get the position but there probably is no such attribute. 


I wonder since i echo out the characters as i write them to keylistener, i try make a command driven app, where you also can change interface featurs like font etc.

But i do not know if there is a way to get the offset for the font in use?

[toc] | [next] | [standalone]

#34178

Den tisdag 24 oktober 2017 kl. 19:33:31 UTC+2 skrev jonas.t...@gmail.com:
> Is there a generic way to get the correct offset positioning doing filltext by character by character?
> 
> Since javascript is able to do it when writing out filltext strings on canvas, one would think it would be possible to get the position but there probably is no such attribute. 
> 
> 
> I wonder since i echo out the characters as i write them to keylistener, i try make a command driven app, where you also can change interface featurs like font etc.
> 
> But i do not know if there is a way to get the offset for the font in use?

I rephrase that can you get CTX filltext endposition?

[toc] | [prev] | [next] | [standalone]

#34181

Den tisdag 24 oktober 2017 kl. 19:46:39 UTC+2 skrev jonas.t...@gmail.com:
> Den tisdag 24 oktober 2017 kl. 19:33:31 UTC+2 skrev jonas.t...@gmail.com:
> > Is there a generic way to get the correct offset positioning doing filltext by character by character?
> > 
> > Since javascript is able to do it when writing out filltext strings on canvas, one would think it would be possible to get the position but there probably is no such attribute. 
> > 
> > 
> > I wonder since i echo out the characters as i write them to keylistener, i try make a command driven app, where you also can change interface featurs like font etc.
> > 
> > But i do not know if there is a way to get the offset for the font in use?
> 
> I rephrase that can you get CTX filltext endposition?

I guess i go with the ugly way paint over rectangle and buffer up next character ;), time after time.

[toc] | [prev] | [next] | [standalone]

#34182

jonas.t...@gmail.com wrote:

> I rephrase that can you get CTX filltext endposition?

If you knew where it started, and what the text was, yes:

<https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/measureText>


var text = ctx.measureText('foo'); // TextMetrics object
text.width; // 16;

You still need to store this information separate from the canvas though...

[toc] | [prev] | [next] | [standalone]

#34180

jonas.t...@gmail.com wrote:
> Is there a generic way to get the correct offset positioning doing filltext by character by character?
> 
> Since javascript is able to do it when writing out filltext strings on canvas, one would think it would be possible to get the position but there probably is no such attribute. 
> 
> 
> I wonder since i echo out the characters as i write them to keylistener, i try make a command driven app, where you also can change interface featurs like font etc.
> 
> But i do not know if there is a way to get the offset for the font in use?

For this use case you should be managing your Scene Graph in JavaScript yourself  instead of trying to derive what you did directly from the drawn output.

#1 - Why not just use SVG? seems more appropriate
#2 - If you insist on going this route and not having your own Scene Graph, you could write the text to an invisible span element and then derive the total width from the offsetSize of that element.

[toc] | [prev] | [next] | [standalone]

#34183

Den tisdag 24 oktober 2017 kl. 19:56:52 UTC+2 skrev Michael Haufe (TNO):
> jonas.t...@gmail.com wrote:
> > Is there a generic way to get the correct offset positioning doing filltext by character by character?
> > 
> > Since javascript is able to do it when writing out filltext strings on canvas, one would think it would be possible to get the position but there probably is no such attribute. 
> > 
> > 
> > I wonder since i echo out the characters as i write them to keylistener, i try make a command driven app, where you also can change interface featurs like font etc.
> > 
> > But i do not know if there is a way to get the offset for the font in use?
> 
> For this use case you should be managing your Scene Graph in JavaScript yourself  instead of trying to derive what you did directly from the drawn output.
> 
> #1 - Why not just use SVG? seems more appropriate
> #2 - If you insist on going this route and not having your own Scene Graph, you could write the text to an invisible span element and then derive the total width from the offsetSize of that element.

I can see the use but i am not good with remember syntax, and this is yet another route to learn.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web