Skip to main content

Transform.scale problem

9 replies [Last post]
shadev
Offline
Joined: 2008-07-10
Points: 0

Hi, i have a problem with using Transform.scale. When binding transform of let's say Rect like this :

transform:bind[Transform.scale(scaleX2,scaleY2)]

to vars in the same Rect :

var scaleX2=1.0;
var scaleY2=1.0;

and changing them in keyFrames:

scaleX2 => 3.0 tween Interpolator.LINEAR,

the Rect itself doesn't stretch but the Canvas on which it is placed does - Rect moves to the right and becomes stretched. Oddly enough this change doesn't affect other objects on the same Canvas!

Any ideas ? Thanks for reply :)

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
Points: 0

I have created two issues:
JFXC-1661 Add center point for the Scale transformation
http://openjfx.java.sun.com/jira/browse/JFXC-1661
JFXC-1662 Add CustomTransform
http://openjfx.java.sun.com/jira/browse/JFXC-1662

shadev
Offline
Joined: 2008-07-10
Points: 0

Thank you very much :) I thought I was going nuts because everyone I asked didn't seem to notice it :) Again many thanks.

alexsch
Offline
Joined: 2007-07-12
Points: 0

Can you post a whole example? It works fine for me:

[code]
import javafx.animation.*;
import javafx.application.*;

import javafx.scene.paint.*;
import javafx.scene.geometry.*;
import javafx.scene.transform.*;

var scaleX2=0.5;
var scaleY2=0.5;

Timeline {
repeatCount: Timeline.INDEFINITE
keyFrames : [
KeyFrame {
time : 1s
values : [
scaleX2 => 3.0 tween Interpolator.LINEAR,
scaleY2 => 3.0 tween Interpolator.LINEAR
]
}
]
}.start();

Frame {
title: "MyApplication"
width: 200
height: 200
closeAction: function() { java.lang.System.exit( 0 ); }

stage: Stage {
content: [
Circle {
centerX: 10, centerY: 10
radius: 40
fill: Color.GREEN
},
Rectangle {
transform:bind[Transform.scale(scaleX2,scaleY2)]
x: 10, y: 10
width: 140, height: 90
fill: Color.ORANGE
},
Circle {
centerX: 100, centerY: 100
radius: 40
fill: Color.BLUE
},
]
}
visible: true

}
[/code]

shadev
Offline
Joined: 2008-07-10
Points: 0

I can't figure out why this code behaves so weird. Maybe it's something with my compiler because your code has the same problem - the rectangle moves as it resizes. I am using javafx plugin for netbeans 6.1 and you ?

[code]
package javafxapplication1;
import javafx.application.Frame;
import javafx.application.Stage;
import javafx.scene.geometry.Rectangle;
import javafx.scene.paint.Color;
import javafx.scene.transform.Transform;
import javafx.animation.Timeline;
import javafx.animation.Interpolator;
import javafx.animation.KeyFrame;

public class TimelineSupport{
public attribute T:Timeline;
public function startTimeline(){
this.T.start();
}
}
public class SuperRect extends Rectangle,TimelineSupport{};

var z =Frame {
title: "Animation Demo";
width: 1000
height: 800
visible: true
stage: Stage {
content: SuperRect {
var size1 = 1.0;
var size2 =1.0;
fill : Color.GREEN;
x: 500;
y: 400;
height: 50;
width: 50;
transform: bind [Transform.scale(size1,size2)];
T:Timeline {
keyFrames:[
KeyFrame{
time:1s;
values:[
size1 => 3.0 tween Interpolator.LINEAR
]

}
]
};
}
}
}
var t=z.stage.content[0] as TimelineSupport;
t.startTimeline();
[/code]

Message was edited by: shadev

Message was edited by: shadev

alexsch
Offline
Joined: 2007-07-12
Points: 0

Unfortunately I do not have the old JavaFX Script SDK so I can't run your program.
Is it possible to rewrite it using new JavaFX SDK?

shadev
Offline
Joined: 2008-07-10
Points: 0

I figured that when I use objects like Rectangle,Ellipse,Circle and do not set their position explicitly [ x,y,centerX,centerY...] but rather translate them in KeyFrame at 0s it works fine but same trick doesn't work with Polygon and Polyline. I think problem lies in bounding rectangles of these shapes. From what I see they are set to the whole Canvas and so it resizes. Can you please verify how those objects react to scaling or tell me how to explicitly set the bounding rectangle of an object?
Thank you very much for your help.

alexsch
Offline
Joined: 2007-07-12
Points: 0

There were a lot of fixes in the graphics components last time.
Could you rewrite your sample using the latest JavaFX Script plugin to check the problem?

shadev
Offline
Joined: 2008-07-10
Points: 0

I used newest JavaFx Script plugin and your example still behaves weird - Rectangle while resizing moves - it's top left corner moves down and right as i watch the animation .

alexsch
Offline
Joined: 2007-07-12
Points: 0

I see now. Try to use the MyScale class below that allows to use any point as a center for the scaling transformation:

[code]
import javafx.scene.transform.*;

public class CustomTransform extends Transform{

public attribute transforms: Transform[] on replace{ u(); };

private function u():Void {
if (impl_node != null) {
impl_node.impl_updateFXNodeTransform();
}
}

public function impl_getAffineTransform():java.awt.geom.AffineTransform{

var result = new java.awt.geom.AffineTransform();
for(transform in transforms){
result.concatenate(transform.impl_getAffineTransform());
}
return result;
}

}

public class MyScale extends CustomTransform{

public attribute scaleX:Number;
public attribute scaleY:Number;

public attribute centerX:Number;
public attribute centerY:Number;

override attribute transforms = bind [
Translate{ x: centerX y: centerY},
Scale{ x: scaleX y: scaleY},
Translate{ x: -centerX y: -centerY},
]
}
[/code]

Then you code will look look like:

[code]
import javafx.application.Frame;
import javafx.application.Stage;
import javafx.scene.geometry.Rectangle;
import javafx.scene.paint.Color;
import javafx.scene.transform.*;
import javafx.animation.Timeline;
import javafx.animation.Interpolator;
import javafx.animation.KeyFrame;

import javafx.scene.transform.*;

public class TimelineSupport{
public attribute T:Timeline;
public function startTimeline(){
this.T.start();
}
}
public class SuperRect extends Rectangle,TimelineSupport{};

var z =Frame {
title: "Animation Demo";
width: 1000
height: 800
visible: true
stage: Stage {
content: SuperRect {
var size1 = 1.0;
var size2 =1.0;
fill : Color.GREEN;
x: 500;
y: 400;
height: 50;
width: 50;
transform: MyScale{
scaleX: bind size1
scaleY: bind size2

centerX: 525
centerY: 425

}

T:Timeline {
keyFrames:[
KeyFrame{
time:1s;
values:[
size1 => 3.0 tween Interpolator.LINEAR
]

}
]
};
}
}
}
var t=z.stage.content[0] as TimelineSupport;
t.startTimeline();
[/code]