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
