Thanks for the code sample and information regarding these drawing techniques. I think I'm going to pursue the method of calculating the 'outside' points and re-drawing the shape since this will allow the original background to show through. Thanks again,
Brice
On 10/4/06, Cortlandt Winters <[EMAIL PROTECTED]> wrote:
Hi Brice
Here is what you want to do
<drawview id="three" x="0" y="300" width="300" height="300">
<handler name="oninit">
<![CDATA[
var start_x = 50;
var start_y = 50;
var start_x_2 = 20;
var start_y_2 = 20;
// draw the box around the outer edge
this.beginPath();
this.moveTo( 0, 0 );
this.lineTo( this.width, 0 );
this.lineTo( this.width, this.height );
this.lineTo( 0, this.height );
this.lineTo( 0, 0 );
this.closePath();
this.fillStyle = 0xff0000;
this.fill();
// draw the first box
this.beginPath ();
this.moveTo ( start_x, start_y );
this.lineTo( start_x + box_size, start_y );
this.lineTo( start_x + box_size, start_y + box_size );
this.lineTo( start_x, start_y + box_size );
this.lineTo( start_x, start_y );
this.closePath();
this.fillStyle = 0xcccccc;
this.fill();
// draw a second box, which does overlap the first box.
// The intent is to have all the 'background' color (0xcccccc) show through all the overlapped regions.
// However, red is filled in where the two drawings overlap. Why?? Is there a workaround for this?
this.beginPath();
this.moveTo( start_x_2, start_y_2 );
this.lineTo ( start_x_2 + box_size, start_y_2 );
this.lineTo( start_x_2 + box_size, start_y_2 + box_size );
this.lineTo( start_x_2, start_y_2 + box_size );
this.lineTo( start_x_2, start_y_2 );
this.closePath();
// fill in the space between the outer edge of the drawview and the outer edge of the draw box
this.fillStyle = 0xcccccc ;
this.fill();
]]>
</handler>
</drawview>
Or Alternatively, if you want a single enclosed shape you'll need to calculate the 9 points of the intersected shape yourself based on the points that define the squares and use that instead of overlapping the boxes
The way that it works is that, as you have demonstrated in the other examples, you can create a slightly complex shape with a single path and fill it, leaving the background to show through, but what is happening in version 3 will happen with all intersections in a single path, since the line and fill operations are primitive, the fill uses a simple formula to determine which areas to color. The result is that every bounded area will alternate whether it's filled or not. There is a name for it that escapes me, but in order to do more complicated things you need to either seperate each shape out into a path of it's own like I've done above, or you need to calculate the points of the new shape you want explicitly. The paths will be drawn with the first in the back second above it etc, which is why I've swapped the order of the operations above.
It would be possible with laszlo's drawview wrapper around the flash primitives to make it work as you espected in the above case, but then we'd be introducing unnecessary mathematical calculations into the drawing primitives, unnecessarily slowing them down for all cases in order to accomodate the case you have above. I think it's probably better to do like I have above and explicitly seperate them into different path operations, though I'm not familiar with all the trade offs in that decision so I could be wrong.
Hope that's helpfull.
-Cort
_______________________________________________ Laszlo-user mailing list [email protected] http://www.openlaszlo.org/mailman/listinfo/laszlo-user
