Continued from page 1
if(table=='shadows') { var content="=$stable?>"; var y=810; }
document.getElementById('tabler').style.pixelLeft=mouseX; document.getElementById('tabler').style.pixelTop=y; document.getElementById('tabler').style.visibility='visible'; document.getElementById('tabler').innerHTML=content; } Of course, once
user select
desired color we had to hide
pallette: function setColor(elid,color,fromid,shc) { document.getElementById(elid).value=color; document.getElementById('tabler').style.visibility='hidden'; }
Thus we created nice palettes which appear and disappear on a single click and don't take much space on
screen.
- Drop Shawdows The decals offered has
ability to have a drop shadow added so we had to add this option to
online builder. PHP however didn't offered a nice function for that. We created a procedure which draws
texts twice - once
original 100% saturated text and once
shadow with a percentage of
color and appropriate displacement. Of course
shadow was drawn on
image before
main text. @imagettftext($img, 20, $gr[$i], $x+$dx, $ys[$i]+$dy, $scolors[$shadowcolor], "fonts/".$_POST['fonts'],$word[$i]);
- Arcs The main problem came when we had to 'rotate'
texts thru arcs. First we created perfect Bezie funtion which to draw
curves and adjust
letter above them. But what a surprise -
curves looked perfect alone, but when we adjusted
letters above them they seemed rough. After studying this problem we realised that
rough screen resolution and
disability to antialise
images wouldn't allow us to create nice arcs. We were standing against insoluble problem. We decided to create few arcs with a graphical software (CorelDraw) and to see what could be wrong. We noticed that Corel's curves were looking great after they are manually adjusted. However you can't just leave
program to create perfect curves automaticly. A human eye was needed to judge when a curve looks right and when not. We got a totally different direction. There wasn't an universal function to help us. The solution we found was to 'manually' adjust each letter. We created a procedure with cases which were adjusting each letter on
appropriate place and with appropriate rotation depending on how long was
text. It worked! We created 2 arrays for each arc type - one array with
positions and one array with
rotations. The rest was simple: if($arctype) { $start=(35-$l)/2; if($start%2) $start+=1; $gr=array_slice($gr,$start,$l); $ys=array_slice($ys,$start,$l); } if(!$arctype) { $ys=array(); $gr=array(); //making
arrays for($i=0;$i<$l;$i++) { array_push($ys,50); array_push($gr,0); } }
You can go on
atec's site and try
arcs we achieved (http://atecsigns.com/decal/step_1.php). Results Now A-tec Sings's web builder creates perfect decals with graphs, calculates
price and allows you to add
decals to your shopping cart and chgeckout (the shopping cart software is also created by PIM Team Bulgaria). The builder allows
visitor to create
desired decals with any color, dropped shadow, background and shape, to preview it and to calculate
cost for different sizes and quantities. The website and builder were promoted with massive radio advertising company. At that time it was
only decal builder which allowed creating texts arround arcs. Conclusions - Use GD to create text effects - Do not forget that you can create you own functions for what GD does not offer - Do not always search for math perfect formulas. The graphical effects are intended to
human eye - Load fonts in
server - Use javascript and hidden layers to achieve great flexibility

Bobby Handzhiev is senior developer in PIM Team Bulgaria