How to make a child-Canvas on a ...

Up to Discussions in Ask-the-Expert

This Question is Assumed Answered

1 "correct" answer available (5 pts) 15 "helpful" answers available (3 pts)

8 Replies Last post: Jul 9, 2008 3:29 PM by rhh

How to make a child-Canvas on a father-Canvas have the same height and width as the father-Canvas ?

Jul 6, 2008 7:56 PM

Mirror 12 posts since
Jul 2, 2008

Hi.

There are two Canvas A and B.

A is on the B.

How to make A have the same height and width as the B?

The B's height and width's change are based on outer-container

e.g.

{value
let A:Canvas =
{Canvas background="lime", width=10cm, height=5cm}
let B:Canvas =
{Canvas background="pink", width=10cm, height=5cm}
{A.add
B,
x = 0,
y = 0
}
let cb:CommandButton = {CommandButton
{on Action do
set A.width = {add-stretch}
set A.height = {add-stretch}
set B.width = c.width
set B.height = c.height
}
}

{VBox
height =8cm,
width = 15cm,
A,
cb
}
}

URPradhan 167 posts since
Mar 6, 2008

1. Re: How to make a child-Canvas on a father-Canvas have the same height and width as the father-Canvas ? Jul 6, 2008 10:39 PM

If I ve understood properly, you want the same width/height of a child canvas on its parent. Then se the child's width/height after its parent and before adding to the parent. May be like this ....


 
{value
    let B:Canvas =
        {Canvas background="pink"}
    let A:Canvas =
        {Canvas background="lime", width=10cm, height=5cm}
    set B.width = A.width
    set B.height = A.height
    {A.add
        B,
        x = 0,
        y = 0
 
    }
    let cb:CommandButton = {CommandButton
                                   {on Action <b>do</b>
                                       set A.width = 20cm
                                       set A.height = 15cm
                                       set B.width = A.width
                                       set B.height = A.height
                                   }
                               }
 
    {VBox
        height =8cm,
        width = 15cm,
        A,
        cb
    }
}

Mirror 12 posts since
Jul 2, 2008

2. Re: How to make a child-Canvas on a father-Canvas have the same height and width as the father-Canvas ? Jul 6, 2008 11:01 PM

in response to: URPradhan

The B's height and width's change are based on outer-container. It is a changable value.

How to do it ?

friedger 108 posts since
Jan 13, 2008

3. Re: How to make a child-Canvas on a father-Canvas have the same height and width as the father-Canvas ? Jul 6, 2008 11:45 PM

in response to: Mirror

So the child B should determine the size of its parent A?

If that is the case you can overwrite set-size of the child

Friedger


 
 
{define-class public MyCanvas {inherits Canvas}
  {constructor public {default ...}
    {construct-super ...}
  }
  {method public {set-size lc:LayoutContext, bounds:GRect}:void
    {super.set-size lc, bounds}
    {dump lc, bounds}
    {if self.parent != null then
        set self.parent.width = bounds.width
        set self.parent.height = bounds.height
    }
 
  }
}
 
{value
    let c:Canvas = {new Canvas, width = 2cm, height = 2cm}
    let A:Canvas =
        {Canvas background="lime", width=10cm, height=5cm}
    let B:MyCanvas =
        {MyCanvas background="pink", width=10cm, height=5cm}
    {A.add
        B,
        x = 0,
        y = 0
    }
    let cb:CommandButton = {CommandButton
                               {on Action do
                                   set A.width = {add-stretch}
                                   set A.height = {add-stretch}
                                   set B.width = c.width
                                   set B.height = c.height                                                                     
                               }
                           }
 
    {VBox
        height =8cm,
        width = 15cm,
        A,
        cb
    }
}

code added

Mirror 12 posts since
Jul 2, 2008

4. Re: How to make a child-Canvas on a father-Canvas have the same height and width as the father-Canvas ? Jul 6, 2008 11:50 PM

in response to: friedger

Sorry, I made a mistake.

A is pearent. B is child.

I mean A changed its width and height with its outer-container {VBox} or {HBox}.

friedger 108 posts since
Jan 13, 2008

5. Re: How to make a child-Canvas on a father-Canvas have the same height and width as the father-Canvas ? Jul 7, 2008 12:25 AM

in response to: Mirror

So you want something like the following?


 
 
 
 
 
{define-class public MyCanvas {inherits Canvas}
  {constructor public {default ...}
    {construct-super ...}
  }
  {method public {set-size lc:LayoutContext, bounds:GRect}:void
    {super.set-size lc, bounds}
    {dump self, lc, bounds}
    def child = {self.graphical-children.read-one}
    set child.width = bounds.width
    set child.height = bounds.height           
  }
}
 
{value
    let v:VBox = {VBox
                     height =8cm,
                     width = 15cm}
    let A:Canvas =
        {MyCanvas background="lime", width=10cm, height=5cm}
    let B:Canvas =
        {Canvas background="pink"}
    {A.add
        B,
        x = 0,
        y = 0
    }
    let cb:CommandButton = {CommandButton
                               {on Action do                                   
                                   set A.width = v.width
                                   set A.height = v.height                                                                                                 
                               }
                           }
 
    {v.add
        A}
    {v.add        
        cb
    }
    v
}

Friedger

Mirror 12 posts since
Jul 2, 2008

6. Re: How to make a child-Canvas on a father-Canvas have the same height and width as the father-Canvas ? Jul 7, 2008 1:56 AM

in response to: friedger

The VBox outside we don't know,just use it in a test-case,we can also use HBox,or Frame.

How can I get the container's height and width out of the A-canvas?

So I use set A.width= {add-stretch}

but when I set B.width= A.width

B's height dosen't {add-stretch} asa the same width as A. Why? I just want B.width= A.width like that.

fukuta 118 posts since
Oct 17, 2007

7. Re: How to make a child-Canvas on a father-Canvas have the same height and width as the father-Canvas ? Jul 7, 2008 9:38 AM

in response to: Mirror

Unlike other containers (Frame, VBox, ...etc), Canvas doesn't restrict its children's size, so there is probably no usual way to do that. Why do you want to use a same size canvas in another canvas in the first place? I think the requirement is a little strange. If what you want to do is to stack two canvases neatly, you should use an OverlayBox.


{value
    def canvas-a = {Canvas
                       background = "lime",
                       width = {add-stretch},
                       height = {add-stretch}
                   }
    def canvas-b = {Canvas
||--                       background = "pink",
                       width = {add-stretch},
                       height = {add-stretch}
                   }
    {canvas-a.add "This is A.", x = 1cm, y = 1cm}
    {canvas-b.add "This is B.", x = 1cm, y = 2cm}
    {OverlayBox
        height = 8cm,
        width = 15cm,
        canvas-a,
        canvas-b
    }
}

rhh 29 posts since
Oct 12, 2007

8. Re: How to make a child-Canvas on a father-Canvas have the same height and width as the father-Canvas ? Jul 9, 2008 3:29 PM

in response to: fukuta

Sorry to be slow in commenting on this discussion. There are indeed some situations where it is useful to adjust the size or position of objects in a Canvas based on the size of the Canvas itself, and the Canvas API does include some features to help with this. Canvas has a method called size-changed which is called whenever the size of the Canvas changes, and it has fields called actual-width and actual-height that can be used to learn the current size of the Canvas.

So if you want to adjust the size or position of any objects in a Canvas based on the size of the Canvas, you should define a subclass that overrides the Canvas.size-changed method to do what you want. This method should use Canvas.actual-width and Canvas.actual-height to determine the current size of the Canvas. It is important not to use Canvas.width and Canvas.height to determine the current size of the Canvas because the width and height options do not tell you the actual size -- they only tell you the size request -- and in some cases the width and height option values are not even numbers; they may be Elastics, procedures, or other non-numerical values.

Putting this all together, here is a little example Curl applet that shows this technique in action:

{curl 6.0 applet}

{define-class MyCanvas {inherits Canvas}

  field private inner-object:Graphic

  {constructor {default inner-object:Graphic, ...}
    set self.inner-object = inner-object
    {construct-super ...}
    {self.add inner-object, x = 0m, y = 0m}
  }

  {method public {size-changed}:void
    set self.inner-object.width = self.actual-width
  }

}

{value
    let inner-object:Graphic =
        {Slider
            vorigin = "top", horigin = "left"
        }
    let v:View = {View {MyCanvas inner-object}}
    {v.show}
}

If you run this applet, a window containing the Slider will pop up. When you resize the window, the width of the Slider will always stay equal to the width of the window. The vorigin and horigin option specifications on the Slider are used so that the (0,0) point where the Slider is added to the Canvas is at the top left corner of the Slider, rather than somewhere else.

-Bert

This Question is Assumed Answered

How to make a child-Canvas on a father-Canvas have the same height and width as the father-Canvas ?

Jul 6, 2008 7:56 PM

Actions

More Like This