Monday, February 8, 2010

before release 0.1

I am working on text(val) of processing.js (ticket #213) this morning. The most challenge of that is it should be able to draw immediately right of the last string placed.

About how to do that, M. Lam mentions that it is possible if we draw the new text base on the length of the last string added. And I think it is good for a try.

Follow that clue, I look into the original source code of processing again.

How it work is, it calculate each char by char, and store the final offset plus the start position. When the text(val) is called, it calls text(val,x,y,z) with ending position of the last call instead.

I know how it work, but how to do it in JavaScript? Don't even need to think, I Google JavaScript font width. Then, a page call JavaScript/CSS Font Detector flash into my eyes.

How they do is, they create a span element, put the text into it and get the offsetWidth back.

Now, what I do is, I do the same thing as they do, but after I get the width back, I delete the element.

The result is good. However, there is an error. When the text is getting longer, the bigger offsetWidth than it should be is returned. Anyway, it is not perfect yet. I will come back to this after I finish the text(val,xl,yl,x2,y2).

the code is available on here.

No comments:

Post a Comment