Another question on my card rendering application....

# tornadofx

[Mark Fisher]

Another question on my card rendering application. I have the image updating as per previous thread, but I'm now looking how to scale an imageview based on an observable value.
I currently have:

imageview(model.cardUrl) {
                        x = 0.0
                        y = 0.0
                    }.also {
                        // ensure we scale from 0,0
                        val scaleBy = model.scale.value
                        val scale = Scale(scaleBy, scaleBy, 0.0, 0.0)
                        it.transforms.setAll(scale)
                    }

but this is only changing on model.cardUrl, and doesn't update when I change the scale value.
How can I use the model's scale value so it affects the scale of the drawn image?
When I update it, the image doesn't change size.
Note: I found I had to use an also to scale, as the scaleX/Y values in the imageview closure scale from the middle of the image and I couldn't work out how to do it from 0,0

[Bogdan]

also - excess

[Bogdan]

but this is only changing on model.cardUrl, and doesn't update when I change the scale value. - you immediately change the scale, it will not change after the application starts (show view)

[Bogdan]

also you scale the view, not the picture itself

[Mark Fisher]

thanks Bogdan. I don't know how to apply a Scale to the imageview without using also. I tried

imageview() {
    scaleX = 1.2
}

doesn't work, because I can't set the pivot point. Instead it scales the image around the centre, so shifts from its position

[Bogdan]

also is just a kotlin function

[Bogdan]

similar entry

imageview() {
    transforms.setAll(scale)
}

[Mark Fisher]

let me try that. Will it react to the model values changing?

[Bogdan]

when do you need to scale? Need to scale ImageView or the image itself?

[Mark Fisher]

my model scale property

Untitled

[Mark Fisher]

just the image

[Mark Fisher]

I have 2 images overlaid, one of them needs to scale when user clicks "+" or "-"

[Bogdan]

there will be no reaction to changes in the model, you set the initial state. You need to subscribe to property changes

[Mark Fisher]

that's exactly what I'm trying to achieve, but I don't know how to subscribe to the change so that it changes the scale of an image in the view

[Bogdan]

https://stackoverflow.com/questions/27894945/how-do-i-resize-an-imageview-image-in-javafx

[Bogdan]

can the model creation code and how do you change the value

[Mark Fisher]

I have a shortcut on the view that calls a function in the controller:

fun decreaseCardScale() {
        model.scale.value -= 0.1
        model.commit()
        println("model: ${model.scale}")
    }

[Mark Fisher]

I'm seeing the scale value changing, but the image not updating.

[Mark Fisher]

The link you gave only updates the image view once, on load. i'm trying to resize it after some user interaction.

[Bogdan]

for example

class Foo : View() {
    val cardDataModel: CardDataModel by inject()
    val urlProperty = stringProperty()
    
    override val root = stackpane {
        imageview(urlProperty) {
            cardDataModel.scale.addListener { ob, old, new ->
                println(new)
            }
        }
    }
}

[Bogdan]

oh no, if after commit you need to bind to itemProperty

[Bogdan]

fun decreaseCardScale() {
        cardDataModel.scale.value -= 0.1
        cardDataModel.commit {
            imageview.transforms.add(scale)
        }
        println("model: ${cardDataModel.scale}")
    }

[Mark Fisher]

how do i get the imageview inside decreaseCardScale? do I need to save it during the creation of the view?

[Bogdan]

pay attention to imageview.transforms.add (scale), adds scaling (transformation), maybe you need imageview.scale ()

[Bogdan]

do I need to save it during the creation of the view? - yes

[Mark Fisher]

ok, that's changing the scale now. Thanks! I just need to work out how to remove the old scale as they are combining.

[Mark Fisher]

using setAll() instead of add() works