Jump to content

TUniImage - how best to deal with large image?


wprins

Recommended Posts

Hi,

 

I'm writing a frame for handling/displaying some images in the context of an application.   Currently I'm using a TUniImage and doing a UniImage.Picture.LoadFromFile() to load the image.  I also use UniImage.Stretched set to True (with Proportional being set to True also) to allow the image to always fit and be resized depending on the area available.  

 

I'm also allowing the image to be displayed at 100% resolution, that can in basic terms be achieved by simply setting UniImage.Stretched to False. However the image then obviously falls off the sides and bottom of the browser page and there's no way by default to either pan or scroll over the image and no scrollbars to allow this.  (There's a "Draggable" property on TUniImage but this doesn't really do what is required.)

 

What would be the best way to achieve this?  I've briefly looked at TUniScrollbox and expected it to sprout scrollbars when housing an oversized image, but this didn't work.  Not sure if I did something wrong or not in that attempt, but anyway does anyone have any advice regarding this? 

 

In short: What is the best way to basically load an image into a TUniImage with Streteched set to False, and then allow the user to pan/scroll around the image, in the context of another panel/form inside a UniGUI application?

 

Thanks in advance,

 

Walter

Link to comment
Share on other sites

Hi,

 

OK, We can use scroll mode too, but let's try to pan mode for now.

 

We have the following components on the form:

MainForm -> UniScrollBox1 -> UniImage1...

UniScrollBox1:

 

1. ClientEvents -> UniEvents -> function beforeInit:

function beforeInit(sender, config)
{
    config.id = "scroll";
}

2. ClientEvents -> ExtEvents -> function afterrender:

function afterrender(sender, eOpts)
{
    sender.getEl().dom.style["overflow"]="hidden";
}

UniImage1:

 

1. Align -> alClient, Stretch -> False ...

 

2. Cursor -> crSizeAll

 

3. ClientEvents -> UniEvents -> function beforeInit:

function beforeInit(sender, config) {
    config.id = "scrollimg";
    config.rerect = function() {
        var me = sender;
        var img = me.el.down('img');
        if (img) {
            var width, height;
            width = img.el.dom.width;
            height = img.el.dom.height;
            me.el.dom.style.clip = "rect(0px, " + width + "px, " + height + "px, 0px)";
            //me.el.dom.style.width = width;
            //me.el.dom.style.height = height;            
        };

        $(document).ready(function() {
            var $container = $("#scroll");
            var $img = $("#scrollimg");
            var cHeight = $container.height();
            var cWidth = $container.width();
            var iHeight = $img.height();
            var iWidth = $img.width();
        });

        var clicking = false;
        var previousX;
        var previousY;

        $("#scroll").mousedown(function(e) {
            e.preventDefault();
            previousX = e.clientX;
            previousY = e.clientY;
            clicking = true;
        });

        $(document).mouseup(function() {
            clicking = false;
        });

        $("#scroll").mousemove(function(e) {
            if (clicking) {
                e.preventDefault();
                var directionX = (previousX - e.clientX) > 0 ? 1 : -1;
                var directionY = (previousY - e.clientY) > 0 ? 1 : -1;
                $("#scroll").scrollLeft($("#scroll").scrollLeft() + (previousX - e.clientX));
                $("#scroll").scrollTop($("#scroll").scrollTop() + (previousY - e.clientY));
                previousX = e.clientX;
                previousY = e.clientY;
            }
        });     

        $("#scroll").mouseleave(function(e) {
            clicking = false;
        });
    }
}

4. ClientEvents -> ExtEvents -> function boxready:

function boxready(sender, width, height, eOpts)
{
    sender.rerect();
}

Something like this can be used at runtime:

procedure TMainForm.UniButton1Click(Sender: TObject);
begin
  UniFileUpload1.Execute;
end;

procedure TMainForm.UniFileUpload1Completed(Sender: TObject;
  AStream: TFileStream);
begin
  UniImage1.Picture.LoadFromFile(AStream.FileName);
  UniImage1.JSInterface.JSCall('rerect', []);
end;

http://jsfiddle.net/WDpPt/

 

Tested in FF, Chrome.

 

Try,,,

Best regards.

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...