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