<pre><code>import javafx.scene.canvas.GraphicsContext;
import javafx.scene.transform.Affine;
import javafx.scene.transform.NonInvertibleTransformException;
double xrange = maxx - minx;
double yrange = maxy - miny;
// width and height are in units of pixels
// gc is the GraphicsContext object from javafx
Affine t = new Affine();
double xratio = xrange / width;
double yratio = yrange / height;
t.appendTranslation( minx, miny );
t.appendScale( xratio, yratio );
try
{
  t.invert();
}
catch( NonInvertibleTransformException e )
{
  throw new RuntimeException( e.getMessage(), e );
}
gc.setTransform( t );
</code></pre>

CC BY-SA 3.0
2016-11-29T21:16:41.657Z
2016-11-29T21:16:41.657Z
crow
<p>You can map [x, y] pixel coordinates in an image of size [width, height] to your given range as follows:</p>

<pre><code>x'=minx+(maxx-minx)*(x+0.5)/width;
y'=miny+(maxy-miny)*(y+0.5)/height;
</code></pre>

CC BY-SA 3.0
2016-11-15T05:13:56.523Z
I'm looking for the inverse of that. but cant do it that way.. need to do it as an affine transform. I'm setting up the coordinate system apriori with translate() and scale commands applied to the http://docs.oracle.com/javafx/2/api/javafx/scene/canvas/GraphicsContext.html associated with the Canvas object which takes up the whole window and whose coordinate (0,0) is the upper-left hand of the window... currently im using something like this

>     gc.restore();
>     gc.translate( 0, height / 2 );
>     gc.scale( width / xrange, height / yrange )
>     gc.translate( -minx, 0 );
crow
CC BY-SA 3.0
2016-11-15T13:30:43.350Z
Usually you don't want the inverse to map each pixel on the screen exactly once to your function. Here's similar question to yours: http://computergraphics.stackexchange.com/questions/4193/what-is-the-correct-order-of-transformations-scale-rotate-and-translate-and-why/4194#4194
Would have voted for close, but this is a more generic answer.
JarkkoL
CC BY-SA 3.0
2016-11-15T22:04:06.230Z
Thank you. I'm actually doing the opposite of that, I'm looping thru each pixel x,y and mapping that to precisely one point in the complex plane to evaluate something like the Mandelbrot set. Also, the mouse click handler returns point clicked in pixels, and I need to map that onto the complex plane as well. I realize each "pixel" is actually a rectangle on the complex plane but the resolution is small enough that just sampling the center of this rectangle is fine for display purposes.
crow
CC BY-SA 3.0
2016-11-13T20:13:16.387Z
2016-11-13T20:13:16.387Z
JarkkoL
<p>I am trying to figure out how to apply the proper sequence of translate and scale commands (or a single .transform command) so that the default pixel grid (0,0,1920,1080) for instance is setup so that the coordinate system  (minx,miny,maxx,maxy) can be used where for instance 
minx=100 maxx=200 miny=-5 maxy=5</p>

<p>I am trying to render mathematical functions and map the results to pixels and use the mouse to select certain regions to zoom in on.. my current code is at </p>

<p><a href="https://bitbucket.org/stephenc214/fastmath/src/default/src/fastmath/fx/HardyZMap.java" rel="nofollow noreferrer">https://bitbucket.org/stephenc214/fastmath/src/default/src/fastmath/fx/HardyZMap.java</a></p>

<p>I would really appreciate any help... I know this is simple but I just can't seem to get it to work properly</p>

<transformations><affine-transformations>
how to map rectangular coordinate system onto JavaFX GraphicsContext canvas
crow
# how to map rectangular coordinate system onto JavaFX GraphicsContext canvas

(Asked by: username_0 on 2016-11-13)

I am trying to figure out how to apply the proper sequence of translate and scale commands (or a single .transform command) so that the default pixel grid (0,0,1920,1080) for instance is setup so that the coordinate system (minx,miny,maxx,maxy) can be used where for instance
minx=100 maxx=200 miny=-5 maxy=5

I am trying to render mathematical functions and map the results to pixels and use the mouse to select certain regions to zoom in on.. my current code is at

<https://bitbucket.org/stephenc214/fastmath/src/default/src/fastmath/fx/HardyZMap.java>

I would really appreciate any help... I know this is simple but I just can't seem to get it to work properly

**Tags:** transformations, affine-transformations


---

## 2 answers

### Answer by username_0 on 2016-11-29. Score: 0 | Accepted answer

```
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.transform.Affine;
import javafx.scene.transform.NonInvertibleTransformException;
double xrange = maxx - minx;
double yrange = maxy - miny;
// width and height are in units of pixels
// gc is the GraphicsContext object from javafx
Affine t = new Affine();
double xratio = xrange / width;
double yratio = yrange / height;
t.appendTranslation( minx, miny );
t.appendScale( xratio, yratio );
try
{
  t.invert();
}
catch( NonInvertibleTransformException e )
{
  throw new RuntimeException( e.getMessage(), e );
}
gc.setTransform( t );

```


---

### Answer by username_1 on 2016-11-13. Score: 0

You can map [x, y] pixel coordinates in an image of size [width, height] to your given range as follows:

```
x'=minx+(maxx-minx)*(x+0.5)/width;
y'=miny+(maxy-miny)*(y+0.5)/height;

```

> **Comments:**
> **username_0**: I'm looking for the inverse of that. but cant do it that way.. need to do it as an affine transform. I'm setting up the coordinate system apriori with translate() and scale commands applied to the http://docs.oracle.com/javafx/2/api/javafx/scene/canvas/GraphicsContext.html associated with the Canvas object which takes up the whole window and whose coordinate (0,0) is the upper-left hand of the window... currently im using something like this  >     gc.restore(); >     gc.translate( 0, height / 2 ); >     gc.scale( width / xrange, height / yrange ) >     gc.translate( -minx, 0 );  
> **username_1**: Usually you don't want the inverse to map each pixel on the screen exactly once to your function. Here's similar question to yours: http://computergraphics.stackexchange.com/questions/4193/what-is-the-correct-order-of-transformations-scale-rotate-and-translate-and-why/4194#4194 Would have voted for close, but this is a more generic answer.  
> **username_0**: Thank you. I'm actually doing the opposite of that, I'm looping thru each pixel x,y and mapping that to precisely one point in the complex plane to evaluate something like the Mandelbrot set. Also, the mouse click handler returns point clicked in pixels, and I need to map that onto the complex plane as well. I realize each "pixel" is actually a rectangle on the complex plane but the resolution is small enough that just sampling the center of this rectangle is fine for display purposes.  

---

