This Question is Answered

15 "helpful" answers available (3 pts)
5 Replies Last post: Jul 4, 2008 1:19 AM by carl

How to make a Canvas control's border looks like two border-styles ?

Jul 3, 2008 11:49 PM

Click to view Mirror's profile Level 1 Mirror 12 posts since
Jul 2, 2008

Hi.

How to make a Canvas control's border looks like the Canvas has double borders ?

Just one Canvas not two.

By the way, how to insert a image into the discuss editor area? Thanks a lot.

Click to view carl's profile Curl carl 53 posts since
Oct 17, 2007
1. Re: How to make a Canvas control's border looks like two border-styles ? Jul 4, 2008 12:19 AM
For a Graphic, the border-style option is probably easiest.

{Canvas border-style = "double", border-width = 3px}
Click to view Mirror's profile Level 1 Mirror 12 posts since
Jul 2, 2008
2. Re: How to make a Canvas control's border looks like two border-styles ? Jul 4, 2008 12:34 AM
in response to: carl

Maybe my question is not clear enough.

I mean two border-styles can set diffrent border-style for each border.

The outter border's style is "raised", and the inner border's style is "sunken", there is little space between the two borders.

Just looks like one Canvas on the other Canvas, but in fact only one Canvas.

How should I do?

Click to view carl's profile Curl carl 53 posts since
Oct 17, 2007
3. Re: How to make a Canvas control's border looks like two border-styles ? Jul 4, 2008 12:43 AM
in response to: Mirror
You could put the Canvas in a Frame, and set a different border on each:

{Frame
    border-width = 2px,
    border-style = "raised",
    margin = 2px,
    background = "gray",
    {Canvas
        border-width = 2px,
        border-style = "sunken",
        background = "white"
    }
}
Click to view Mirror's profile Level 1 Mirror 12 posts since
Jul 2, 2008
4. Re: How to make a Canvas control's border looks like two border-styles ? Jul 4, 2008 12:54 AM
in response to: carl

If there is no container out of the Canvas, can not the Canva itself set the border-styles like that?

Can the BorderSpec do that?

Click to view carl's profile Curl carl 53 posts since
Oct 17, 2007
5. Re: How to make a Canvas control's border looks like two border-styles ? Jul 4, 2008 1:19 AM
in response to: Mirror
Option borders are singular for a Graphic. BorderSpec just controls each side's border width and margin width separately.

You could certainly override the draw method to add any such decoration, or anything else for that matter, though you'll want to ensure that you leave space for that decoration -- shouldn't be difficult with a Canvas. As a simple, but somewhat garish, example:

{import * from CURL.GUI.CONTROL-HELPERS}
 
{define-class public open BorderedCanvas {inherits Canvas}
 
  {constructor public {default ...}
    {construct-super ...}
  }
 
  {method public open {draw renderer2d:Renderer2d}:void
    {super.draw renderer2d}
    {self.overdraw-border renderer2d}
  }
 
  {method public open {overdraw-border renderer2d:Renderer2d}:void
    def bounds = {self.get-bounds}
    def left = -bounds.lextent
    def right = bounds.rextent
    def top = -bounds.ascent
    def bottom = bounds.descent
    def psize = renderer2d.pixel-size
    def psize2 = psize * 2
    {draw-standard-bevel-edges
        left, top, right, bottom,
        "black", "black", "red", "red",
        renderer2d
    }
    {draw-standard-bevel-edges
        left + psize2, top + psize2, right - psize2, bottom - psize2,
        "green", "green", "blue", "blue",
        renderer2d
    }
  }
  
}
 
{BorderedCanvas background = "pink"}


I would certainly prefer using a Canvas inside a Frame (or even, if you are using styled controls, a SkinnableFrame, for more options).