Flex Spark TextArea pinch&zoom?

Question

My 1st question here...

Spark component TextArea does have a gestureZoom event property, but it seems that it has no functionality?

I would like to implement a simple zoom feature in my TextArea, which simply increases or decreases fontSize property, making text appear larger or smaller.

After implementing all the necessary code (and it works if instead of TextArea I use Image), pinch&zoom does not trigger the gestureZoom event on TextArea object.

Any suggestions? (I don't insist on using pinch&zoom, it just seems appropriate...)

Here 's the code:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    applicationComplete="application1_applicationCompleteHandler(event)">

<fx:Script>
<![CDATA[
    import mx.binding.utils.BindingUtils;
    import mx.events.FlexEvent;

    [Bindable]
    public var currFontSize:int = 24;

protected function application1_applicationCompleteHandler(event:FlexEvent):void {

    Multitouch.inputMode = MultitouchInputMode.GESTURE;
    if(Multitouch.supportsGestureEvents){
        txtbox.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onGestureZoom);
    } else {
        status.text="gestures not supported";
    }
}

// THIS NEVER GETS CALLED?
private function onGestureZoom( event : TransformGestureEvent ) : void {
    info.text = "event = " + event.type + "\n" +
    "scaleX = " + event.scaleX + "\n" +
    "scaleY = " + event.scaleY;

    // Zomm in/out simply by increasing/decreasing font size
    if (event.scaleX <1 || event.scaleY <1){
        if (currFontSize > 12) currFontSize -=2;
    }
    else{
        if (currFontSize < 64) currFontSize +=2;
    }
}

protected function button1_clickHandler(event:MouseEvent):void {
    info.text = "";
    currFontSize = 24;
}
]]>
</fx:Script>

<s:Label id="status" top="10" width="100%" text="Transform Gestures on TextArea"
     textAlign="center"/>
<s:HGroup left="12" right="12" top="40">
    <s:TextArea id="info" width="100%" height="117" editable="false"/>
    <s:Button label="Reset" click="button1_clickHandler(event)"/>
</s:HGroup>

<s:TextArea id="txtbox" left="12" right="12" bottom="12" height="400" 
    fontSize="{currFontSize}"
    gestureZoom="onGestureZoom(event)"
    text="Here is some sample text I want enlarged or shrunk."/>
</s:Application>

Ok, I just found something out: if I add a Listener function to *stage* instead of adding it to TextArea object - it works, but *only* when making a gesture outside of TextArea, which doesn't make much sense, since my app needs to be friendly to visually impaired, so I'm making the TextArea as big as I can, i.e. it covers almost entire screen. Can TextArea be overridden somehow to allow the gesture listener to come through? (In my case, TextArea doesn't even have to be editable). — bocko, Aug 13 '13 at 15:46

score 1 · Accepted Answer · answered Aug 06 '14 at 05:41

1

If the TextArea doesn't need to be editable.. see if you can use a Label. that should work with the pinch and zoom.

answered Aug 06 '14 at 05:41

Vivek Nanda

71
3

Thanks. But if I remember correctly, Label can not be set to auto-scroll and/or to word wrap like TextArea, and that's important for me. I finished that project without gesture support, if I ever revisit that, I will try Label. – bocko Aug 07 '14 at 06:42
bocko, try to add the attribute width="100%" to a spark label. i tried doing the same and re-sizing the parent container will automatically fire a wordwrap for the label – Vivek Nanda Aug 07 '14 at 07:34

Flex Spark TextArea pinch&zoom?

1 Answers1