Question

Is there any (straightforward) way to solve the dynamic registration issue with multitouch scaling events in flex? I just can’t wrap my head around this.

What I’ve got is (amongst some lines and labels) a path in a group that itself is wrapped in a scroller;

<s:Scroller id="scroller">
    <s:Group id="scrollerContent">

    <s:Path id="path">
        <s:stroke>
            <s:SolidColorStroke color="#ffffff" weight="2"/>
        </s:stroke>
        </s:Path>
    </s:Group>
</s:Scroller>

What I’d like to do is to zoom in and out on the path (and the other stuff in the scrollerContent group), so in my creationComplete() method I added an eventListener to the scrollerContent group:

scrollerContent.addEventListener(TransformGestureEvent.GESTURE_ZOOM, zoomEvent);

Here is the code Christophe Coenraets provided for his chart example (which does in fact scale the path, based on x=0 though;

private function zoomEvent(e:TransformGestureEvent):void
{
    zoom(e.scaleX, e.scaleY);
}
protected function zoom(scaleX:Number):void
{
     var w:Number = path.width * scaleX;
     if (scaleX>1)
        path.width = w > width*5 ? width*5 : w;
     else
     {
          path.width = w < width ? width : w;
          if (path.x + path.width < width) path.x = width - path.width;
      }
}

I’m aware of the DynamicRegistration class, but can’t get it working properly, it still scales the path based on the x=0 point.

DynamicRegistration.scale(scrollerContent, new Point(e.localX, e.localY), scrollerContent.scaleX*= e.scaleX, scrollerContent.scaleY=1);

Any help regarding this would be much appreciated!

Answer 1

I used the DynamicRegistration class, and got it working like this, if you’re still interested:

protected function onZoom(e:TransformGestureEvent, img:Image):void
{
    DynamicRegistration.scale(img, new Point(e.localX, e.localY), img.scaleX*e.scaleX, img.scaleY*e.scaleY);
}

Or with the native flex method:

protected function onZoom(e:TransformGestureEvent, img:Image):void
    {
    img.transformAround(new Vector3D(e.localX, e.localY, 0), new Vector3D(img.scaleX*e.scaleX, img.scaleY*e.scaleY, 0));
    }