Scaling grouped graphics for iOS etc.

[gcbrackett]

The many screen sizes and resolutions of mobile devices make it important to be able to incorporate vector graphics that can easily be scaled if one wants to make a single stack that supports multiple devices and orientations. (Note: although it's possible to import vector graphics in some cases, the importing is done by interpreting the file information and using it to construct the graphic out of LiveCode graphic objects.)

Unfortunately, many typical iOS graphics have to be constructed as groups of individual LiveCode graphic objects, and scaling the group DOES NOT properly scale the resulting graphic. (Think of the little red symbol for deleting, a red circle with a white outline and a white bar across it: a group of two graphics is required.) The only way I can think of to scale such a group is by brute force (for an example see below). Is there a better way? Will there someday be support for SVG or EPS or other standard form of vector graphics?

Code: Select all

on scaleGraphic pGroup, pScale
      local tLoc
   repeat with x = 1 to the number of graphics in pGroup
      put the loc of pGroup into tLoc
      get the width of graphic x of pGroup
      set the width of graphic x of pGroup to it * pScale
      get the height of graphic x of pGroup
      set the height of graphic x of pGroup to it * pScale
      get the linesize of graphic x of pGroup
      set the linesize of graphic x of pGroup to it * pScale
      set the loc of graphic x of pGroup to tLoc
   end repeat
end scaleGraphic

George

[gizmoboyGAiiKM]

bump...

Anyone at LiveCode have an answer to this? SVG support would be primo... and not just for iOS, but any platform.

[Mark]

Hi,

There is no better way.

Mark

[frans]

Hi, I know that auto scaling has done a lot for LiveCode and I am using it extensively. However there are some scenarios where I want to scale a group of graphics independently of stack-scale-factor and during runtime. I have searched but not found a clearcut solution (yet) but if anyone knows a quicker or better way then I am all ears! I might have just missed out on some brilliant new feature in 7 or 8 that supersedes this... I have seen the SVG ICON widget for LC 8 which must use this kind of trick. Maybe that has better code. Anyway , just in case this is helpful.

I used the SVGL stack to import SVGL polygons ( that SVGL stack still works : kudos to Ian Macphail !! ). Make sure you use SVGL 1.0 Simple export in draw programs, took my graphics people a bit of experimenting with Illustrator. Then copy the group out of the SVGL OUTPUT stack and paste in your stack. Now please be aware of the fact that the SVGL stack uses NESTED groups on our Illustrator files ( it might be due to the way Illustrator writes SVGL) which is a hassle for any script dealing with scaling. So : Select : Ungroup, ungroup, ungroup, select the whole bunch of polygons and REGROUP them as one group ( no nested groups). Then use the following script adapted from above to scale to any size and location :

################ SCRIPT ################## BUTTON ##### ASSUMES A FLD "ScaleFactor" and ONE group of polygons ( again : NO NESTED GROUPS)
on mouseUp
put fld "ScaleFactor" into pScale ### You can set this by script of course
scaleGrcGroup "RANZEN",pScale ### I have a group called "RANZEN, which consists of about 20 polygons
end mouseUp

on scaleGrcGroup pGroup, pScale,targetLoc ## If you ADD targetloc in the call above the group will be placed there.
if TargetLoc is empty then
put the loc of group pGroup into targetLoc ### no targetloc given we assume original loc
end if
repeat with x = 1 to the number of graphics in group pGroup
put the topleft of graphic x of group pGroup into HoldTL
get the width of graphic x of group pGroup
set the width of graphic x of group pGroup to it * pScale
get the height of graphic x of group pGroup
set the height of graphic x of group pGroup to it * pScale
get the linesize of graphic x of group pGroup
set the linesize of graphic x of group pGroup to it * pScale
set the topleft of graphic x of group pGroup to pScale* item 1 of HoldTL,pScale * item 2 of HOLDTL ## IMPORTANT Scale the TopLefts!
end repeat
set the loc of group pGroup to TargetLoc
end scaleGrcGroup

##################### END SCRIPT ############################

This works well for me. Add a lockscreen if you use it in real life!
If applied a lot of times with incongruous percentages ( Like factor 8 then ten times 0.3 and 0.1 etc ) you will see slight rounding deviations in the graphic. I counter this by keeping a MasterCopy that I substitute after a lot of changes have happened.
You can set a property like "GrChanges" and if it hits 20 substitute the "working copy" for the Master copy. If you only use congruous percentages like UP 2 DOWN 0.5 then it should not be a problem.
Hope this helps someone.

Best From Berlin
Frans

[rinzwind]

thanks.. btw seems to work fine with nested graphic groups too.