How to use AbstractImageField doRotate(), etc. methods ? [message #1815378] |
Tue, 01 October 2019 21:24 |
Michel R Messages: 46 Registered: April 2015 |
Member |
|
|
Hello,
I am trying to use an AbstractImageField to display an image and let the user do some usual display actions, such as a rotation or scaling.
There are apparently useful methods such as doRotate() or doZoom(), setRotateDelta(), etc., however none of them seems to do anything, excepted setAutoFit() which works perfectly.
But when I execute doRotate() or doZoom(), using a menu action, nothing happens.
I use Scout 9.0.
What do I miss ?
Thank you!
|
|
|
Re: How to use AbstractImageField doRotate(), etc. methods ? [message #1815401 is a reply to message #1815378] |
Wed, 02 October 2019 10:20 |
|
Hi Michael
Unfortunately those methods really do nothing at the moment. They update some model properties, but these changes are not sent to the UI. The only existing implementation in the long-gone Swing UI has not been re-implemented in the new HtmlUi yet (and will probably not be implemented in the near future).
You have two options:
1. Implement it yourself, i.e. write a custom JsonImageField adapter that transfers the properties to the UI and implement custom ImageFieldAdapter.js and ImageField.js.
2. For simple transformations, you could use the CSS "transform" property. E.g. you could define your own CSS class ".rotate-image-90 img { transform: rotate(90deg); }" and add this class to the image field via addCssClass().
Regards,
Beat
|
|
|
|
|
Re: How to use AbstractImageField doRotate(), etc. methods ? [message #1815525 is a reply to message #1815490] |
Fri, 04 October 2019 08:04 |
|
Hi Michel
Scout does not draw the canvas itself, instead it uses an <img> tag. Unfortunately, autofit for both landscape and portrait images cannot be accomplished easily in HTML. The .autofit CSS class we use is somewhat of a "hack", but does work for simple use cases. It may not work with transformed images, though. But you could always try to redefine the .autofit class with better rules. For the scrollbars to work correctly, you probably have to set your transform-origin to "top left".
Depending on your use case, you could apply the image transformations in Java and send a new image to the browser after each change. Here is the code from the old Swing implementation, maybe it is useful to you.
Another option would be to search the internet for a more sophisticated "image drawing and manipulation" widget in JS and then include that external library in Scout (using a custom form field).
Regards,
Beat
|
|
|
Powered by
FUDForum. Page generated in 0.02878 seconds