How to distort images (or FXG) in Flex?

I want to distort images (or FXG) in Flex.

In principle, you just need to change the edges of the image, as shown below. I know how to make simple distortions, but I cannot find a way to do this.

enter image description here

+4
source share
1 answer

The answers were correct ... you need DisplacementMapFilter !!

The displacement value should be gray in general β†’ means the absence of distortion and the addition of a white and gray radial gradient to each lower and upper edge:

Distortion map for this very effect

The image i used to be distortet

Final result after distortion

And with Map you will go like this:

 package { import flash.display.BitmapData; import flash.display.BitmapDataChannel; import flash.display.Loader; import flash.display.Sprite; import flash.events.Event; import flash.filters.DisplacementMapFilter; import flash.filters.DisplacementMapFilterMode; import flash.geom.Point; import flash.net.URLRequest; public class DistortImage extends Sprite { private var sourceImage:Loader; private var distortMap:Loader; public function DistortImage() { super(); // Loading the Image to be distorted sourceImage = new Loader(); var requ: URLRequest = new URLRequest("text.jpg"); sourceImage.contentLoaderInfo.addEventListener(Event.COMPLETE, loadMap); sourceImage.load(requ); } private function loadMap( E:Event = null ):void{ // loading distortion map ( grayscale ) distortMap = new Loader(); var requ: URLRequest = new URLRequest("distortMap.jpg"); distortMap.contentLoaderInfo.addEventListener(Event.COMPLETE, applyDistortion); distortMap.load(requ); } private function applyDistortion( E:Event = null ):void{ // get jpg as BitmapData var bmpData:BitmapData = new BitmapData( distortMap.content.width,distortMap.content.height); bmpData.draw(distortMap); // create the filter - notice gray(128,128,128) means no distortion white is negative black is positive distortion var offsetOfMap:Point = new Point(0,0); var redChannelCode:uint = BitmapDataChannel.RED; // is not important cause you just need oneway distortion var yDistortion:int = 20; // strength var distortFilter:DisplacementMapFilter = new DisplacementMapFilter(bmpData,offsetOfMap,0,redChannelCode,0,yDistortion,DisplacementMapFilterMode.COLOR,0xffffff,0); // filters need to be included in an array to add on display Object var filters:Array = new Array(); filters.push(distortFilter); // adding filter to image sourceImage.filters = filters; addChild(sourceImage); } } } 
+3
source

Source: https://habr.com/ru/post/1385094/


All Articles