Skip to main content

Zooming on mouse wheel

3 replies [Last post]
cdouglass
Offline
Joined: 2005-08-24

I'd like an image to zoom in/out on mouse wheel rotation (why it was called mouseWheelMoved is beyond me -- what about those wheels that also tilt? huh? they "move" without rotating...).

Anyway, back to my point.

I can bind scaleX and scaleY of the Node to the variable targetScale and then in the mouseWheelMoved() function:

<br />
      targetScale -= (event.getWheelRotation() * 0.1);<br />

(and I won't even mention that I'm getting the "mouseWheelRotation" inside the "mouseWheelMoved" function. Well, ok, I did mention it, but parenthetically).

This works fine, except that it always scales around 0,0. I want it to scale around the mouse pointer.

In Java I would just translate the image, scale it, and then translate it back. How do I do that in JavaFX?

I've tried binding a couple of values to an x,y in a Transform.translate(). No difference. I tried binding a couple of values to translateX and translateY of the Node, still scales around 0,0.

Any ideas?

Chas Douglass

Reply viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
alexsch
Offline
Joined: 2007-07-12

> In Java I would just translate the image, scale it,
> and then translate it back. How do I do that in
> JavaFX?

The same is for JavaFX Script:

[code]
Circle {
transform: [Translate{ x: 50 y: 50 }, Scale{ x: 2 y: 2 }, Translate{ x: -50 y: -50 }]
centerX: 50, centerY: 50
radius: 50
fill: Color.BLUE
}

[/code]

cdouglass
Offline
Joined: 2005-08-24

Your syntax doesn't work in the version of the compiler I'm using.

I also find that:
[code]
var translateX = 0;
var translateY = 0;
content: ImageView {
transform: bind [
Transform.translate(translateX, translateY)
];
image: Image {
url: "{__DIR__}/resources/18444_1.png"
}
onMouseWheelMoved: function(event: MouseEvent) {
var targetScale = (event.getWheelRotation() * 0.1);
translateX = event.getCanvasX() as Integer;
translateY = event.getCanvasY() as Integer;
}
[/code]

Doesn't do any translation when the mouse wheel is moved. If I put a "Transform.scale()" in the transform attribute it does scale, but always around 0,0. So it seems I can't bind a Transform.translate().

Chas Douglass

cdouglass
Offline
Joined: 2005-08-24

My error.

I was resetting my values in the onMouseWheelMoved method and I couldn't see that it was working.

Thanks.

Chas Douglass