RE: [flexcoders] Re: Drawing in a Canvas subclass

Wed, 24 May 2006 14:06:09 -0700

I looked into what you're doing and I don't think the background is
causing the problem, because by default a Container doesn't have a
background DisplayObject.

You show a subclass of Canvas, but not how you're using it in an
Application. I tried the following:

MyApp.mxml:
----------

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="600"
height="600" xmlns="*">

      <TestCanvasDrawing/>

</mx:Application>

TextCanvasDrawing.as:
--------------------

package
{

import mx.containers.Canvas;

public class TestCanvasDrawing extends Canvas
{
      public function TestCanvasDrawing()
      {
            super();
      }

      protected override function
updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
      {
            super.updateDisplayList(unscaledWidth, unscaledHeight);

            this.graphics.lineStyle(5, 0xFF0000);
            this.graphics.moveTo(0, 0)
            this.graphics.lineTo(20, 20);
      }
}

}

and I saw a diagonal red line of the proper length.

However, I noticed that you're not really doing the right thing in
updateDisplayList(); you should be drawing only within the rectangle
specified by the unscaledWidth and unscaledHeight arguments passed in.
So I changed the last line to

    this.graphics.lineTo(unscaledWidth, unscaledHeight);

This causes only a very short stubby line to appear in the top-left
corner, like what you described.

The reason this is occuring is that your component doesn't know how big
it should be. If you don't specify width or parentWidth, and height or
parentHeight, on the <TextCanvasDrawing> tag, then you must implement a
measure() method so that your component has a measuredWidth and
measuredHeight that is nonzero.

When I do either of these two things, I see a line of the expected
length.

I also see an unexpected border in Beta 3, but not in our mainline
builds, so I'm not going to worry about that.

- Gordon


-----Original Message-----
From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of sergio_trejo_r
Sent: Wednesday, May 24, 2006 10:26 AM
To: flexcoders@yahoogroups.com
Subject: [flexcoders] Re: Drawing in a Canvas subclass

Thanks for the tip. The issue is that I also need the "container"
features from the Canvas.  I'm trying to build a control that has a
mixture of drawn elements with other components that are sited in the
control.

So if I subclass the UIComponent I think I will loose the ability to
add child controls (although I haven't try).

I was not aware of the fact that the Canvas will add a child
component for the background.  I guess it must be related to the
rawChildren property.  I'm going to try also to override the
createChildren method to avoid this.

As a side note.  I feel that this hidden hierarchy of controls (i.e.
background child) may be a misfeature in Flex.  They should probably
consider removing it from the public API.

thanks,
-Sergio



--- In flexcoders@yahoogroups.com, "Gordon Smith" <[EMAIL PROTECTED]> wrote:
>
> Try subclassing UIComponent instead of Canvas. That should avoid the
> problems of having a background child.
>
> - Gordon
>
>
> -----Original Message-----
> From: flexcoders@yahoogroups.com
[mailto:[EMAIL PROTECTED] On
> Behalf Of sergio_trejo_r
> Sent: Tuesday, May 23, 2006 4:37 PM
> To: flexcoders@yahoogroups.com
> Subject: [flexcoders] Drawing in a Canvas subclass
>
> Hi, I ran into a problem while trying to use the drawing API in a
> subclass of the Canvas container.  See the code include below.
>
> The class TestCanvasDrawing extends the Canvas container.  I attempt
> to draw a line in the updateDisplayList method.  However when I see
> the output only a small portion of the line is drawn in the top-left
> corner.  The rest of the line seems to be clip by the background.
>
> If I then set the alpha property to 0.5 and then I can see the full
> line drawn underneath the background.
>
> So it seems that I'm getting a wrong graphics instance or I'm
missing
> some background configuration of the canvas.  Has anybody seen this
> behavior or know what's the right usage?
>
> thanks!
> -Sergio
>
>
> public class TestCanvasDrawing extends Canvas
> {
>  private var _canvas : Canvas;
>
>  public function TestCanvasDrawing()
>  {
>   super();
>  }
>
> protected override function updateDisplayList(unscaledWidth:Number,
> unscaledHeight:Number):void {
>  super.updateDisplayList(unscaledWidth, unscaledHeight);
>  //this.alpha = 0.5;  //Uncomment to see the line below.
>  this.graphics.lineStyle(5, 0xFF0000);
>  this.graphics.moveTo(0, 0)
>  this.graphics.lineTo(20, 20);
> }
>
> }
>
>
>
>
>
>
>
> --
> Flexcoders Mailing List
> FAQ:
http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt
> Search Archives:
> http://www.mail-archive.com/flexcoders%40yahoogroups.com
> Yahoo! Groups Links
>








--
Flexcoders Mailing List
FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt
Search Archives:
http://www.mail-archive.com/flexcoders%40yahoogroups.com
Yahoo! Groups Links








--
Flexcoders Mailing List
FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt
Search Archives: http://www.mail-archive.com/flexcoders%40yahoogroups.com



SPONSORED LINKS
Web site design development Computer software development Software design and development
Macromedia flex Software development best practice

YAHOO! GROUPS LINKS



Reply via email to