In last post, I implemented text(val). Today, I was working on text(val,x1,y1,width,height).
To wrap the text, the very first thing came into my mind was TextArea. TextArea allows the text wrap automatically. If I can use get the text of each line inside the TextArea, I can use the same technique as I used in my last post. Then, I went to search how to do that. And it wasted me almost 6 hours. What I got for that is it is impossible to let TextArea return only one line of text.
When I was going to stop, I wonder why I don't take a look at the canvas instruction again. I looked at HTML 5 canvas - the basics, and search how to draw the text in canvas, and I got this page - Drawing text using a canvas. There is a method called mozMeasureText() which can actually solve the problem of my last post (why didn't I see this earlier). Anyway, I implemented text(val,x1,y1,width,height) and upgrade the text(val). Now they both look very good.
The next thing I need to do is, do my best to make the code better, and reorganize the tests.
this is the preview (see this in Firefox):
Wednesday, February 10, 2010
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.
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.
Saturday, February 6, 2010
initialize git & detail of release 0.1
Since I have been watching the source code of text for couple days, today, I was working on setting up git on my computer. I installed msysgit on my windows, and cloned the source code from MinyXO. MinyXO's code have implemented the PMatrix3D which I think I am going to need it in the future. As I followed the tutorial (I lost the page but you will see it before you initialize), everything went smoothly until I try to upload my copy from my laptop. It needs to setup a SSH public key to before I upload, and I don't know what is that. Once again, I took a look at the tutorial, and there is a page talking about that.
After the Git has been setup, I reviewed my ticket once again. I couldn't do the 3D stuff before I clearly understand how it works on canvas. Therefore I am focusing on text(val) and text(val,xl,yl,x2,y2).
According to the ticket description and the original processing, there are some point I need to notice.
for text(val):
for text(val,xl,yl,x2,y2):
It seem to be very easy butt think it will take me a while to figure out how to implement :)
After the Git has been setup, I reviewed my ticket once again. I couldn't do the 3D stuff before I clearly understand how it works on canvas. Therefore I am focusing on text(val) and text(val,xl,yl,x2,y2).
According to the ticket description and the original processing, there are some point I need to notice.
for text(val):
- text must be placed to the immediate right of the last string placed using text()
- doesn't need to wrap
for text(val,xl,yl,x2,y2):
- wrap the text
- doesn't need to display the text out of the rectangle.
It seem to be very easy butt think it will take me a while to figure out how to implement :)
Thursday, February 4, 2010
build FireFox cont
On my last post, I was building FireFox. This post is about what happened on that day and the day after.
So, I was building FireFox that night, and then, I fell asleep:) then, on the next day, when I woke up, it was done already. It didn't bring me to any problem. I think that is because I followed the Build Documentation exactly.
after that, I tried to build it again and this time it brought me some problem. There are some problem on me .mozconf file. Obviously, I wrote something wrong this time. then I changed it back, and it worked prefect again.
at that time, I have two debug build. I asked myself why not build a release. Then, I did it as I said. And it was still work perfectly.
I want some problems. What if I build it without the mozilla-build? What if I build other software? I gotta try it someday.
So, I was building FireFox that night, and then, I fell asleep:) then, on the next day, when I woke up, it was done already. It didn't bring me to any problem. I think that is because I followed the Build Documentation exactly.
after that, I tried to build it again and this time it brought me some problem. There are some problem on me .mozconf file. Obviously, I wrote something wrong this time. then I changed it back, and it worked prefect again.
at that time, I have two debug build. I asked myself why not build a release. Then, I did it as I said. And it was still work perfectly.
I want some problems. What if I build it without the mozilla-build? What if I build other software? I gotta try it someday.
Tuesday, February 2, 2010
building firefox
On my today's open source class, Dave introduced us how to build the firefox. It is very exciting for me to build such a big program.
Now, I am building the firefox. My laptop is very slow when I write this post. Hope its T8300 2.4GHz cpu is strong enough to finish this before I go to bed. So far, it looks very good, and I have to say it is very easy to build the environment. Almost everything can be found on the web. and there is a very good tutorial on mozilla's website for that.
Oh, my cpu is getting hot, and now it is 83 degree. I have to stop here. Hope there will be another post later tonight.
Now, I am building the firefox. My laptop is very slow when I write this post. Hope its T8300 2.4GHz cpu is strong enough to finish this before I go to bed. So far, it looks very good, and I have to say it is very easy to build the environment. Almost everything can be found on the web. and there is a very good tutorial on mozilla's website for that.
Oh, my cpu is getting hot, and now it is 83 degree. I have to stop here. Hope there will be another post later tonight.
Subscribe to:
Posts (Atom)

