akifox-transform 2.2.1

Affine matrix transformations with pivot point

Released 2015-05-21.

To install, run:

haxelib install akifox-transform 2.2.1

See using Haxelib in Haxelib documentation for more information.

Maintaineryupswing
Websitehttps://github.com/yupswing/akifox-transform
Current version2.2.1
StatisticsInstalled 54 times
LicenseMIT
Tags cpp, cross, flash, matrix, openfl, transform

README.md

[![akifox-transform](https://img.shields.io/badge/library-akifox%20transform%202.2.1-brightgreen.svg)]() MIT License Haxe 3 ![OpenFL 2](https://img.shields.io/badge/require-OpenFL 2-red.svg) Cross platform

Library Haxelib

akifox-transform (com.akifox.transform.Transformation)

HAXE/OpenFL Affine transformation class

The akifox-transform class aims to provide an easy tool to manage affine transformations using a reliable pivot point. What are the affine transformation you might ask... - read this wikipedia page - read this great flash tutorial

NOTE

The class works quite fine with OpenFL 3, there are just few incompatibilities that might present problems. If you see a possible bug please test your app with the option -Dlegacy before filing an issue.

Example demo

Screenshot

Flash build: transformation-example.swf

You should get a window with a OpenFL logo square. - Z to toggle debug drawings - SPACE to reset the transformations - Drag to move - Click to change the Pivot Point - Drag+SHIFT to rotate around the pivot point - Drag+ALT to scale related to the pivot point - Drag+CMD/CTRL to skew related to the pivot point (the cross center represents a 0,0 skew) - 1 to 9 to set the pivot point on the relative anchor point (TOPLEFT, MIDDLELEFT,BOTTOMLEFT,TOPCENTER... BOTTOMRIGHT) - UP, DOWN, RIGHT, LEFT Move 15px - Q, A to Skew X ±15deg - W, S to Skew Y ±15deg - E, D to Scale */1.5 - R, F to Rotate ±15deg

Install

You can easily install the library thru haxelib

haxelib install akifox-transform

In your project add the library reference in your `project.xml`

<haxelib name="akifox-transform" />

and finally you can import it in your project class with this import

import com.akifox.transform.Transformation;

Documentation

You can read the full Library documentation here

Using the library

The Transformation class works on Matrix objects. Anyway usually once you've got a DisplayObject (Sprites, Bitmap...) you want to link this to a Transformation.

haxe package ; import openfl.display.Sprite; import openfl.Lib; import openfl.geom.Matrix; import com.akifox.transform.Transformation;

class Main extends Sprite {

public function new() {
  super();
  Lib.current.stage.addChild(this);

  //[...]

  var trf = new Transformation();
  trf.bind(yourDisplayObject);
  trf.setAnchoredPivot(Transformation.ANCHOR_TOP_LEFT);

  // these are the Pivot Point coordinates (they will not change unless
  // you change the pivot point position)
  var pivotCoordinates:Point = trf.getPivot();

  trf.rotate(20); //rotate by 20deg clockwise
  trf.skewX(30); //skew X axis by 30deg
  Actuate.tween(trf,1,{'scalingX':2,'scalingY'"2}); //scale 2X in 1s using Actuate
}

}

But you can use the library to manipulate a Matrix without bind it to a DisplayObject

haxe package ; import openfl.display.Sprite; import openfl.Lib; import openfl.geom.Matrix; import com.akifox.transform.Transformation;

class Main extends Sprite {

var trf:Transformation;

public function new() {
  super();
  Lib.current.stage.addChild(this);
  trf = new Transformation(new Matrix(),100,50);

addChild(trf.spriteDebug); //debug

  trf.addEventListener(Transformation.TRANSFORM, onTransform); //debug
  trf.rotate(20); //rotate by 20deg clockwise
  trf.skewX(30); //skew X axis by 30deg

  var transformedMatrix = trf.matrix; //get the matrix for your own use!
}

public function onTransform(event:Event) {
  trf.debugDraw();
}

}

Best practice

The idea behind the library wants the developer to use the transformation to change the object affine transformation properties.

So you can work on the large amount of transformation properties and methods as:

These assignments modify the target/matrix property according to the pivot point (all of the degree ones are provided in Rad as well) trf.x = valuePixels; trf.y = valuePixels; trf.rotation = valueDegrees; trf.skewingX = valueDegrees; trf.skewingY = valueDegrees; trf.scaling = valueFactor; //set X and Y scale to this factor trf.scalingX = valueFactor; trf.scalingY = valueFactor;

The methods provide instead a algebric sum change according to the pivot point (all of the degree ones are provided in Rad as well) trf.translate(addPixelsX,addPixelsY); trf.translateX(addPixels); trf.translateY(addPixels); trf.rotate(addDegrees); trf.skewX(addDegree); trf.skewY(addDegree); trf.scale(multiplyFactor); trf.scaleX(multiplyFactor); trf.scaleY(multiplyFactor);


There are some interesting examples in different classes on the PLIK library that shows how to encapsulate the transformation class with an object. See the Gfx Class, or Text, or SpriteContainer for an example.

Transformation class

  • [ ] Unit test
  • [x] Cleaning and documenting code
  • [x] Pivot point managing
  • [x] Support for motion.Actuate (properties linked to functions get and set)
  • [x] Events (Transform and Pivot change)
  • [x] Translate
  • [x] Get
  • [x] Set
  • [x] Add
  • [x] Skew
  • [x] Get
  • [x] Set
  • [x] Add
  • [x] Scale
  • [x] Get
  • [x] Set
  • [x] Add
  • [ ] Flip
  • [ ] Get (it looks like impossible!)
  • [x] Set
  • [x] Rotate
  • [x] Get
  • [x] Set
  • [x] Add