# Doubts on LinearGradient#proportional=true

Tom Schindl tom.schindl at bestsolution.at
Fri Jun 8 10:35:23 PDT 2012

```If anyone on here has an idea how to apply the gradienttransform from
SVG [1] to JavaFX. I'd be very grateful.

The current code I have does the following but is not correct:

List<String> parts = ... /*matrix(....)*/

AffineTransform t = new AffineTransform(
Double.parseDouble(parts.get(0)),
Double.parseDouble(parts.get(1)),
Double.parseDouble(parts.get(2)),
Double.parseDouble(parts.get(3)),
Double.parseDouble(parts.get(4)),
Double.parseDouble(parts.get(5)));

double startX = t.transform( new Point2D.Double(x1,y1), null).x;
double startY = t.transform( new Point2D.Double(x1,y1), null).y;
double endX = t.transform( new Point2D.Double(x2,y2), null).x;
double endY = t.transform( new Point2D.Double(x2,y2), null).y;

You can find an example svg and my current restult at [2].

Tom

[2]http://www.efxclipse.org/svg/

Am 08.06.12 17:40, schrieb Tom Schindl:
> Have to correct myself :-( I think I'm the one responsible for the wrong
> behavior. Looks like I'm not handling gradientTransform appropriately :-(
>
> Am 08.06.12 17:17, schrieb Tom Schindl:
>> But how does it then work if one uses a proportional=false and 0,0,1,0?
>>
>> I'm trying to translate SVG linear gradients to FXML and it fails
>> because of this behavior. I'm having a hard time understanding how I'd
>> map their definition to FXML. For Rects calculating the offset would be
>> easy.
>>
>> Tom
>>
>> Am 08.06.12 17:06, schrieb Richard Bair:
>>> Perhaps you are being tripped up by the coordinate spaces. The rectangle is drawn at 40 in the x of it's coordinate system, and the gradient starts at 0. So the first 40px of gradient are to the left of the left edge of the rectangle. If the rect were at 0 you would see what you expect, I think. If you translate the rect vs move it you would see what you expected as well.
>>>
>>>
>>>
>>> On Jun 8, 2012, at 7:56 AM, Tom Schindl <tom.schindl at bestsolution.at> wrote:
>>>
>>>> here it is.
>>>>
>>>> The rect I get:
>>>> http://www.efxclipse.org/screen.png
>>>>
>>>> The rect I expected:
>>>> http://www.efxclipse.org/screen_expected.png
>>>>
>>>> Tom
>>>>
>>>> Am 08.06.12 16:48, schrieb Tom Schindl:
>>>>> It looks like the image gets stripped. Let me upload it somewhere and
>>>>> come back to you
>>>>>
>>>>> Tom
>>>>>
>>>>> Am 08.06.12 16:44, schrieb Pavel Safrata:
>>>>>> Hi Tom,
>>>>>> did you forget to attach the image or did the system strip it somewhere
>>>>>> along the way? I executed your code and saw exactly what you expected -
>>>>>> gradient in the left half of the rectangle, what do you see? By the way,
>>>>>> the code uses proportional=false, unlike suggested in the description,
>>>>>> so please try to clarify your question.
>>>>>> Thanks,
>>>>>> Pavel
>>>>>>
>>>>>> On 8.6.2012 16:33, Tom Schindl wrote:
>>>>>>> Hi,
>>>>>>>
>>>>>>> I'm not sure if i understood proportional true wrong or I'm found a
>>>>>>> serious bug.
>>>>>>>
>>>>>>>> import java.util.ArrayList;
>>>>>>>> import java.util.List;
>>>>>>>>
>>>>>>>> import javafx.application.Application;
>>>>>>>> import javafx.scene.Group;
>>>>>>>> import javafx.scene.Scene;
>>>>>>>> import javafx.scene.paint.Color;
>>>>>>>> import javafx.scene.paint.CycleMethod;
>>>>>>>> import javafx.scene.paint.Stop;
>>>>>>>> import javafx.scene.shape.Rectangle;
>>>>>>>> import javafx.stage.Stage;
>>>>>>>>
>>>>>>>> public class TestGradient extends Application {
>>>>>>>>
>>>>>>>>    /**
>>>>>>>>     * @param args
>>>>>>>>     */
>>>>>>>>    public static void main(String[] args) {
>>>>>>>>        launch(args);
>>>>>>>>    }
>>>>>>>>
>>>>>>>>    @Override
>>>>>>>>    public void start(Stage primaryStage) throws Exception {
>>>>>>>>        Group g = new Group();
>>>>>>>>        Rectangle r = new Rectangle(40,0,90,75);
>>>>>>>>        List<Stop>  stops = new ArrayList<Stop>();
>>>>>>>>        stops.add(new Stop(0, Color.RED));
>>>>>>>>        stops.add(new Stop(1, Color.BLUE));
>>>>>>>>        LinearGradient lg = new LinearGradient(0, 0, 90, 0, false,
>>>>>>>> CycleMethod.NO_CYCLE, stops);
>>>>>>>>        r.setFill(lg);
>>>>>>>>        Scene s = new Scene(g,200,200);
>>>>>>>>        primaryStage.setScene(s);
>>>>>>>>        primaryStage.show();
>>>>>>>>    }
>>>>>>>>
>>>>>>>> }
>>>>>>> Running this code gives me an UI like shown in the attached screenshot.
>>>>>>> Is this really the right behaviour? I'd expect red to start on the left
>>>>>>> of the rect and end at 1/2 of the width.
>>>>>>>
>>>>>>> Tom
>>>>>>>
>>>>>
>>>>>
>>>>
>>>>
>>>> --
>>>> B e s t S o l u t i o n . a t                        EDV Systemhaus GmbH
>>>> ------------------------------------------------------------------------
>>>> tom schindl                 geschäftsführer/CEO
>>>> ------------------------------------------------------------------------
>>>> eduard-bodem-gasse 5-7/1   A-6020 innsbruck     fax      ++43 512 935833
>>>> http://www.BestSolution.at                      phone    ++43 512 935834
>>
>>
>
>

--
B e s t S o l u t i o n . a t                        EDV Systemhaus GmbH
------------------------------------------------------------------------
tom schindl                 geschäftsführer/CEO
------------------------------------------------------------------------
eduard-bodem-gasse 5-7/1   A-6020 innsbruck     fax      ++43 512 935833
http://www.BestSolution.at                      phone    ++43 512 935834
```