Canvas.scrollByPercent() not working ?

[jerry426]

Be sure your post includes:

1. SmartClient Version: v9.0p_2014-02-09/PowerEdition Deployment (built 2014-02-09)

2. doesn't seem to matter which browsers I use.

I need to manipulate the scroll position of an image in a Img (Canvas) using the scrollByPercent() method.

Whenever I use a static file on my web server as the Img source, all my calls to scrollByPercent() work fine.

Whenever I use the getFileURL() method to have the IDACall servlet provide the image file data, it loads into the Img control just fine but then the scrollByPercent() method call does not work.

What am I doing wrong!!!!

[Isomorphic]

We don't know the image's size until it's been loaded, so if you set src to some URL and then immediately call scrollByPercent() we don't know what the percent would mean.

One way to ensure an image is loaded is to use FileLoader APIs.

[jerry426]

Not sure what you mean by "immediately call", but I'm loading the image first by setting the source with the value returned from getFileURL - and then trying to scroll around - but it doesn't scroll.

When I use a static file URL from my webserver's image directory, it loads and scrolls just fine.

In both cases, I'm testing the scrolling in the SmartClient console - well after the image has loaded.

[Isomorphic]

The difference with the file loaded by your web server is that the image has been cached by your browser so it's size is immediately available when the component is drawn.

If you use FileLoader or another approach to load the image, but the Img has already been drawn, call adjustForContent() on the Img to tell it that the underlying DOM has changed size (see docs for this API for details).

[jerry426]

The difference with the file loaded by your web server is that the image has been cached by your browser so it's size is immediately available when the component is drawn.

If you use FileLoader or another approach to load the image, but the Img has already been drawn, call adjustForContent() on the Img to tell it that the underlying DOM has changed size (see docs for this API for details).

Isomorphic,

Thanks for the hints you provided. I am now doing the following:

myZoomedImage.setSrc(url);
FileLoader.cacheFiles([url], 
   function() {
      myZoomedImage.adjustForContent(true);
   });

and then the scrollByPercent() method works as desired.... so I can now implement the desired code to have mouse movement in my thumbnail image cause the larger zoomed image to scroll around in its viewing area.

Is my approach sane? Or should I do it some other way?

Thanks again!
Jerry

[Isomorphic]

Yup, that's a reasonable way to do it.