1 Reply Latest reply on May 26, 2011 7:53 AM by broconne

    Line "Jitter"

    broconne

      I have a visualization created in which I have a single point and several lines radiate outward from that point to several other objects.  Based on advice from this forum, I finally got this to work and handle items being added to the VBox as it changed states by doing my line drawing in the updateComplete handler.

       

      At this point I am now taking other graphic objects and moving them from that center point to the objects attached to the lines.  In other words, I am doing an animation that makes it seem like those objects flow over the lines. 

       

      I am having an interrmittant problem where the lines will occasionaly redraw (I imagine because of the images moving over them) and they seem to "jitter" or shake. Is there anyway known way to prevent this?

       

       

       

      Thanks.

        • 1. Re: Line "Jitter"
          broconne Level 1

          If it helps to clarify, here are the relevant snippets of code:

           

          <mx:VBox id="LoadBalancer" paddingTop="20" verticalGap="200" horizontalAlign="center" width="100%" height="100%" includeIn="LoadBalancer,LoadBalancerAdd" updateComplete="{drawLines()}">

           

          That is the vBox and you can see on updateComplete I call drawLines()

           

          Here is drawLines:

          private function drawLines(): void {

           

           

          //trace("Draw Line 1")

          drawLine(foundry,x1,line1);

           

          //trace("Draw Line 2")

          drawLine(foundry,x2,line2);

           

          //trace("Draw Line 3")

          drawLine(foundry,x3,line3);

           

          if(xSeriesArray == null ){

          xSeriesArray = [x1,x2,x3];

          animateCubes();

          }

           

          if(currentState=="LoadBalancerAdd"){

          drawLine(foundry,x4,line4);

          }

          else{

          doAfter(1000,function(): void {

          currentState="LoadBalancerAdd";

          });

          }

           

          }

           

          Here is where I draw my lines, depending on state I draw three or 4.  Also, at some point I animate some cubes.

           

          drawLine looks like this: 

           

          private function drawLine(from:UIComponent, to:UIComponent, line:Line):void{

           

           

          var globalFrom:Point = from.parent.localToGlobal(new Point(from.x,from.y));

           

           

          globalFrom = pointAdd(globalFrom,findBottomCenterDifferential(from));

          //trace("From Point: " + globalFrom);

           

           

          var globalTo:Point = to.parent.localToGlobal(new Point(to.x,to.y));

           

           

          globalTo = pointAdd(globalTo,new Point(centerX(to),0));

          //trace("To Point: " + globalTo);

           

          //trace("Line Parent: " + line.parent.name);

           

          var fromPoint:Point = line.parent.globalToLocal(globalFrom);

          var toPoint:Point = line.parent.globalToLocal(globalTo);

           

           

          line.xFrom=fromPoint.x;

          line.yFrom=fromPoint.y;

          line.xTo=toPoint.x;

          line.yTo=toPoint.y;

          line.visible=true;

          }

           

          The problem I am having is that during the cube animation it appears that the lines "jitter" or move from side to side when they redraw.  Any opinions on how to fix that are very welcome.