does LzDrawView.rect() work?

[furiousnerd]

If so, in what context? It states that a sub-path is drawn using the supplied params, but whether I call fill() on it, directly or otherwise, it remains invisible although apparently instantiated.

My desire to use it is based mainly on the fact that it has the rounded corner option. In general I am looking for the best way to implement a rectangle subclass that allows borders, rounded corners and can be styled using the built in style tag. To retain stylability it appears that I must extend a component.

[furiousnerd]

it seems one must create a new LzDrawView directly from script in order to call rect() on it. didn't want to work using "this.rect()" in a tag-instantiated drawview.

[jks_pdx]

I'm not sure exactly what you are talking about, some sample code would make it clearer, but here is an example of rect used to draw a rounded rect with a declaratively created drawview.


<canvas>
<drawview>
<handler name="oninit">
this.beginPath();
this.rect(10, 10, 200, 100, 20);
this.closePath();

this.fillStyle = 0xDDDD00;
this.fill();

this.strokeStyle = 0x0000FF;
this.lineWidth = 5;
this.stroke();
</handler>
</drawview>
</canvas>

[furiousnerd]

Initially I was attempting to draw with rect() having subclassed a component (basecomponent). I was doing that because I <i>was</i> under the impression that I needed to subclass components to retain use of the built in style tag. In the end I just subclassed drawview instead, added a style attribute to my class, and it worked fine. The reference to creating the instance in script was the by-product another odd combination I tried with subclassing.

Basically it's all just an attempt to get around the lack of a border attribute for view (and the rounded corner jammy), so I can build containers and whatnot on the fly - with borders and corner radiuses - and still style everything consistently.

Fairly new to this, so I'm still getting used to the scope concepts. And thanks for the reply, I appreciate it. BTW, anyone find a way to get around the "frayed corners" issue with 1 pixel linewidths on rounded rects?

[furiousnerd]

Initially I was attempting to draw with rect() having subclassed a component (basecomponent). I was doing that because I WAS under the impression that I needed to subclass components to retain use of the built in style tag. In the end I just subclassed drawview instead, added a style attribute to my class, and it worked fine. The reference to creating the instance in script was the by-product another odd combination I tried with subclassing.

Basically it's all just an attempt to get around the lack of a border attribute for view (and the rounded corner jammy), so I can build containers and whatnot on the fly - with borders and corner radiuses - and still style everything consistently.

Fairly new to this, so I'm still getting used to the scope differences. And thanks for the reply, I appreciate it. BTW, anyone find a way to get around the "frayed corners" issue with 1 pixel linewidths on rounded rects?

[jks_pdx]

The "frayed corners" problem seems to be a misalignment with the anti-aliansing of curves. The best fix I've found it to always position rounded rects on half pixels. For example:

<canvas>
<drawview>
<handler name="oninit">
this.beginPath();
this.rect(10.5, 10.5, 200, 100, 20);
this.closePath();

this.fillStyle = 0xDDDD00;
this.fill();

this.strokeStyle = 0x0000FF;
this.lineWidth = 1;
this.stroke();
</handler>
</drawview>
</canvas>


This way the vertical and horizontal lines get some anti-aliasing and match up a lot better with the curves.

[furiousnerd]

In all the tests I've done with the drawing API in Flash, I never noticed that the aliasing "kicked in" on half pixels for rounded rects. I just always increased the point size of the lineWidth marginally. I will test that out though. Thanks again!