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
On 10/3/06, Brice Mason <[EMAIL PROTECTED]> wrote:
Hello,
I am exploring the drawing tools with OpenLaszlo 3.3.1. I have a question regarding the fill() method's behavior. This is probably demonstrated best through some test code I have written:
<?xml version=" 1.0"?>
<canvas debug="true">
<script>
<![CDATA[
box_size = 100;
]]>
</script>
<drawview id="one" x="0" y="0" width="300" height="300" bgcolor="0xeeeeee">
<handler name="oninit">
<![CDATA[
var start_x = 10;
var start_y = 10;
// draw box, which is not to be filled in black
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.stroke();
// draw the box around the outer edge
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.stroke();
// fill in the space between the outer edge of the drawview and the outer edge of the draw box
this.fillStyle = 0x000000;
this.fill();
]]>
</handler>
</drawview>
<drawview id="two" x="300" y="0" width="300" height="300" bgcolor="0xdddddd">
<handler name="oninit">
<![CDATA[
var start_x = 10;
var start_y = 10;
var start_x_2 = 150;
var start_y_2 = 150;
// draw the first box
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.stroke();
// draw a second box, which does not overlap the first.
// both boxes are not filled in blue.
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.stroke();
// draw the box around the outer edge
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.stroke();
// fill in the space between the outer edge of the drawview and the outer edge of the draw box
this.fillStyle = 0x0000ff;
this.fill();
]]>
</handler>
</drawview>
<drawview id="three" x="0" y="300" width="300" height="300" bgcolor="0xcccccc">
<handler name="oninit">
<![CDATA[
var start_x = 50;
var start_y = 50;
var start_x_2 = 20;
var start_y_2 = 20;
// draw the first box
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.stroke();
// 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.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.stroke();
// draw the box around the outer edge
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.stroke();
// fill in the space between the outer edge of the drawview and the outer edge of the draw box
this.fillStyle = 0xff0000;
this.fill();
]]>
</handler>
</drawview>
</canvas>
So obviously my main question revolves around the third drawview. Any insight you can offer around the workings of this as well as any ideas on how to accomplish what I describe in the comments of the third view is greatly appreciated. I am new to this technology but I am really enjoying it, it's very powerful.
Thanks,
Brice Mason
_______________________________________________
Laszlo-user mailing list
[email protected]
http://www.openlaszlo.org/mailman/listinfo/laszlo-user
_______________________________________________ Laszlo-user mailing list [email protected] http://www.openlaszlo.org/mailman/listinfo/laszlo-user
