Hi Josh,
I apologize that I haven’t been able to spend any more time on
this the last week. I’m wondering now if we need to open a JIRA and actually
implement some new code for this. My best solution only does part of the work,
so I’m starting to think that Pivot can’t (yet) do what you want. But, that
doesn’t mean it can’t ever do it…. Do you have any thoughts on what the code
might look like to accomplish what you want (from a purely Graphics2D / layout
perspective). Maybe you can open a JIRA issue for an enhancement and we could
start on getting it implemented…..
Let us know..
~Roger
From: Josh Highley [mailto:[email protected]]
Sent: Wednesday, December 02, 2015 8:05 AM
To: [email protected]
Subject: Re: Re:
The 2 BoxPanes seems like it should work (tried previously and just tried
again), but they aren't working either. The BoxPanes aren't expanding to fill
the ScrollPane, despite fill:true on both of them.
I added different background colors to the ScrollPane and both BoxPanes. When
ImageView is zoomed out and smaller than the ScrollPane such that centering
comes into play, I would expect to see the background colors of the BoxPanes
surrounding the ImageView. However, I just see the ScrollPane background to
the right and bottom of the ImageView. The ImageView is still aligned
top-left. The BoxPanes don't appear to be visible anywhere.
Zoom still works, but the image still isn't centered in the scrollpane.
<ScrollPane styles="{backgroundColor: 'yellow'}">
<BoxPane orientation='horizontal' styles="{fill:'true',
verticalAlignment:'center', backgroundColor: 'green'}" >
<BoxPane orientation='vertical' styles="{fill:'true',
horizontalAlignment:'center', backgroundColor: 'red'}" >
<ImageView image="/test.tif" styles="{fill:'true'}" />
</BoxPane>
</BoxPane>
</ScrollPane>
On Tue, Dec 1, 2015 at 7:50 PM, Roger Whitcomb
<[email protected]<mailto:[email protected]>> wrote:
Well, this definitely solves the alignment problem. I’m still struggling with
getting the image to do the right thing as far as sizing. I’m wondering if you
will have to actually zoom the Image itself in order to do that (I mean
resample and recreate the Image at the new resolution/size)?
~Roger
From: Roger and Beth Whitcomb
[mailto:[email protected]<mailto:[email protected]>]
Sent: Tuesday, December 01, 2015 3:13 PM
To: [email protected]<mailto:[email protected]>
Subject: Re:
I don't think the Border would have any effect with regard to centering, one
way or the other.
Could you use nested BoxPanes with alternate orientations, fill=true, and
center alignment (inside the ScrollPane)? Something like this:
<ScrollPane>
<BoxPane orientation='horizontal' styles="{fill:'true',
verticalAlignment:'center'}" >
<BoxPane orientation='vertical' styles="{fill:'true',
horizontalAlignment:'center'}" >
<ImageView ... />
</BoxPane>
</BoxPane>
</ScrollPane>
I haven't tried it, but kinda makes sense to me that it would work, but ...
Let us know,
~Roger
On 12/1/15 1:06 PM, Josh Highley wrote:
Yes, I can remove the Border and still do the zoom directly with ImageView.
<ScrollPane>
<ImageView styles="{fill:true}"/>
</ScrollPane>
but zoom worked fine with Border too. It's centering the ImageView inside the
ScrollPane when the ImageView dimensions are smaller that I'm having trouble
with. I don't need the border, I just had it for the zoom method I found --
does removing the Border component gain me something with regards to centering?
On Tue, Dec 1, 2015 at 12:32 PM, Roger Whitcomb
<[email protected]<mailto:[email protected]>> wrote:
I also noticed the image artifacts, so that is a bug we need to fix.
So, could you try this hierarchy and see if it works:
<Border>
<ScrollPane>
<ImageView …/>
</ScrollPane>
</Border>
And then just adjust the size of the ImageView itself to do the zoom?
HTH,
~Roger
From: Josh Highley [mailto:[email protected]<mailto:[email protected]>]
Sent: Tuesday, December 01, 2015 9:51 AM
To: [email protected]<mailto:[email protected]>
Subject: Re: RE:
I ran the demo you committed (big thanks BTW) and tried it in my app. There's
a couple of issues: the zoomed in/out image still displays inside the confines
of the original ImageView dimension. This is especially an issue when zooming
in: parts of the image outside the original ImageView bounds are clipped, which
is what I'm trying to avoid by using the ScrollPane. I want to see the entire
image, just bigger, like what happens when I resize the Border container and
set ImageView fill:true. The other issue is that the ScaleDecorator centers
the zoomed image inside the ImageView as specified, but I need to center the
ImageView/Border inside the larger ScrollPane.
On a side note, when zooming in the image overwrites the Border on the right
and bottom. Then after zooming out to < 100%, there's artifacts of the image
remaining on the right side and bottom side. If you set your demo's Border
element to have a thicker border, it becomes more apparent.
Thanks,
Josh
On Mon, Nov 30, 2015 at 7:59 PM, Roger Whitcomb
<[email protected]<mailto:[email protected]>> wrote:
Take a look at the “ScaleDecoratorDemo.java” that I just committed to the
source (if you can download the source through “svn”). Or I can send it
separately…
~Roger
From: Josh Highley [mailto:[email protected]<mailto:[email protected]>]
Sent: Monday, November 30, 2015 5:51 PM
To: [email protected]<mailto:[email protected]>
Subject: RE:
No, I wasn't aware that existed. I found the Border method suggested by a past
mailing list question so I went with it. I I'll look at ScaleDecorator instead.
Thanks
Josh
On Nov 30, 2015 5:21 PM, "Roger Whitcomb"
<[email protected]<mailto:[email protected]>> wrote:
Hi Josh,
Welcome to Pivot! Have you looked at using a ScaleDecorator on
your ImageView? This may work better than adjusting the Border size. And it
has settings for the alignment (left/center/right) of the scaled image as well.
I might be able, in a couple of days, to try to implement a small example.
Sorry there isn’t one already in the examples part of the code….
Let us know,
~Roger Whitcomb
From: Josh Highley [mailto:[email protected]<mailto:[email protected]>]
Sent: Monday, November 30, 2015 2:08 PM
To: [email protected]<mailto:[email protected]>
Subject:
I need help getting an image to display centered inside a larger ScrollPane.
My application displays an image that can be zoomed in and out. A snippet of
my current bxml is below. I adjust the zoom by changing the dimensions of the
Border container. When the border is zoomed out such that it is smaller than
the ScrollPane size, it's aligning to the top-left. I'd like to center it
vertically and horizontally. I've tried various combinations of TablePane,
FillPane and BoxPane as parents of the Border. BoxPane with fill:true (maybe
nested BoxPanes with opposite orientations) isn't expanding to fill the
ScrollPane as I'd expect; It shrinks to the size of the Border/Image
<ScrollPane>
<Border>
<ImageView styles="{fill: true}"/>
</Border>
</ScrollPane>
Thanks,
Josh
