Hey rding
Laszlo does not have any drawing APIs, but you can draw straight lines. Here's an example of how you might do that. Click once to set point A, then click around to draw the line.
<canvas width="800" height="700" debug="false">
<debug x="400" y="20" />
<script>
// Return the length of the hypotenuse using basic trigonometry.
function getHypotenuse( adj, opp ) {
return Math.round( Math.sqrt(adj * adj + opp * opp) );
}
// Return the angle (degrees) of a triangle using trig.
function getAngle( adj, opp ) {
var angle = Math.atan2( opp, adj );
angle = (360*angle/(2*Math.PI));
return Math.round( angle );
}
</script>
<view name="map" resource="lps_map.png" clickable="true">
<attribute name="isFirstPoint" value="true" />
<method event="onclick">
this.registerPoint();
</method>
<method name="registerPoint">
var xpos = Math.round( this.getMouse( 'x' ) );
var ypos = Math.round( this.getMouse( 'y' ) );
if ( this.isFirstPoint ) {
this.firstX = xpos;
this.firstY = ypos;
this.isFirstPoint = false;
} else {
var adjacent = this.firstY - ypos;
var opposite = xpos - this.firstX ;
var hyp = getHypotenuse( adjacent, opposite );
debug.write( 'hyp: ' + hyp );
this.out.container.line.setHeight( hyp );
var angle = getAngle( adjacent, opposite );
this.out.container.setRotation( angle );
this.out.setWidth( opposite );
this.out.setHeight( adjacent );
this.out.setX( this.firstX + this.out.width );
this.out.setY( this.firstY - this.out.height );
this.out.setVisible( true );
this.out.bringToFront();
}
</method>
<view name="out">
<view name="container">
<view name="line" width="2" bgcolor="0xff0000"/>
</view>
</view>
</view>
</canvas>
What's happening is that there is a view (line) which is 2 pixels wide, and gets set to the height of the distance from point A to point B. This distance is worked out using basic trigonometry.
Next the angle is worked out and the container view gets rotated so that the line view does not get resized in the rotation. Finally the Out view gets positioned to the correct location so that the line appears to start at point A.
It's a bit hacky; we're working on some cleaner rotation APIs, so that you don't have to nest the views so much.
This example still has one issue - that the line won't be centered along its middle. That could be resolved with an offset when you position the line.
Take care,
Antun