This discussion is archived
3 Replies Latest reply: Jan 4, 2013 12:51 AM by user8929955 RSS

Transform shape

user8929955 Newbie
Currently Being Moderated
I'm trying to figure out how to create a transformation to deform a rectangle into a quadrangle, where one corner stays the same. The basic mathematical solution is clear as described in [this Wiki article|http://en.wikipedia.org/wiki/Affine_transformation] . There are two questions I would like to pose:
1. Has anyone done this already?
2. Basically this could also be achieved by concatenating simpler transformation (scale, rotation, projection). While scale and rotation is available in JavaFX I wonder how to define projection in a simple way? Projection in this context would mean that I have one edge and then scale the opposing edge in- or outward. This would make a trapeze out of the rectangle. How would such a transformation matrix look like?
  • 1. Re: Transform shape
    James_D Guru
    Currently Being Moderated
    user8929955 wrote:
    I'm trying to figure out how to create a transformation to deform a rectangle into a quadrangle, where one corner stays the same. The basic mathematical solution is clear as described in [this Wiki article|http://en.wikipedia.org/wiki/Affine_transformation] .
    You can't use Affine Transformations to map a rectangle into an arbitrary quadrilateral. Affine Transformations preserve parallelism: so you can only transform a rectangle into another parallelogram.
    There are two questions I would like to pose:
    1. Has anyone done this already?
    2. Basically this could also be achieved by concatenating simpler transformation (scale, rotation, projection). While scale and rotation is available in JavaFX I wonder how to define projection in a simple way? Projection in this context would mean that I have one edge and then scale the opposing edge in- or outward. This would make a trapeze out of the rectangle. How would such a transformation matrix look like?
    The API defines Affine Transformations, and then Translations, Scales, Rotations, and Shears. You can (if I remember my Linear Algebra correctly) construct any Affine Transformation by composing translations, scale transformations, rotations, and shears. There's no API for non-affine transformations that I am aware of.
  • 2. Re: Transform shape
    jsmith Guru
    Currently Being Moderated
    Assuming it's a perspective projection you want . . .

    Do a PerspectiveTransform on your shape.

    http://docs.oracle.com/javafx/2/api/javafx/scene/effect/PerspectiveTransform.html

    Or (simplest) enable the PerspectiveCamera on your Scene and set different z co-ordinates for the corners of your shape.

    http://docs.oracle.com/javafx/2/api/javafx/scene/PerspectiveCamera.html

    If you want the mathematics behind the perspective camera or want to do perspective calculations to setup your PerspectiveTransform then you can look at:

    http://en.wikipedia.org/wiki/Perspective_projection#Perspective_projection (unless you are really keen, just use the simple formula from the Diagram section of the article).
  • 3. Re: Transform shape
    user8929955 Newbie
    Currently Being Moderated
    Thanks for your replies, especially the link
    http://docs.oracle.com/javafx/2/api/javafx/scene/effect/PerspectiveTransform.html
    was helpful. That was exactly what I was looking for. I then took it one step further, as I needed the transformed shapes to be clickable. I documented this in the following three blog entries:
    http://sahits.ch/blog/?p=2286 (JavaFX: Deformation)
    http://sahits.ch/blog/?p=2307 (JavaFX: Deformation with offscreen image)
    http://sahits.ch/blog/?p=2314 (JavaFX: Perspective Transformation)

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points