84 lines
3.2 KiB
HTML
84 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html> <head>
|
|
<script type="text/javascript" src="../CBDL.js"></script>
|
|
<script type="text/javascript" src="../CBDL_graphics.js"></script>
|
|
<script type="text/javascript">
|
|
lineTest = function() {
|
|
this.name = "lineTest";
|
|
//this.requires = ["../CBDL_graphics.js"];
|
|
|
|
this.Main = function() {
|
|
// set up our display
|
|
if (!(this.display = new CBDL.Graphics.Display(document.body, new CBDL.Graphics.VideoMode(320, 240, 0), CBDL.Graphics.BACKEND.CANVAS_2D))) {
|
|
console.log(" Error while creating display backend!");
|
|
return 1;
|
|
}
|
|
// initialize the display
|
|
this.display.Init();
|
|
// create our Line object
|
|
this.line = new this.display.Line({ax: 64, ay: 64, bx: 128, by:196}, {width:1, height: 0});
|
|
this.which = false; // bool for A/B line points
|
|
// create our information strings
|
|
var font = new this.display.Font("courier");
|
|
this.string = new this.display.String("<space> - toggle between A/B points, <up/down> - increase/decrease Y of point, <left/right> - increase/decrease X of point", font, 10);
|
|
this.info_a = new this.display.String("A("+this.line.coords.ax+","+this.line.coords.ay+")", font, 10);
|
|
this.info_a.setColor("#00F");
|
|
this.info_b = new this.display.String("B("+this.line.coords.bx+","+this.line.coords.by+")", font, 10);
|
|
// initial drawing operations
|
|
this.reDraw();
|
|
// set up our events
|
|
this.events = new CBDL.Event(["keydown", "keyup"], window);
|
|
// connect to Event handler
|
|
this.events.addCallback(this, onEvent);
|
|
};
|
|
function onEvent(event) {
|
|
switch (event.type) {
|
|
case "keydown":
|
|
switch(event.keyCode) {
|
|
case 32: // toggle A or B
|
|
if (this.which) {
|
|
this.info_a.setColor("#00F");
|
|
this.info_b.setColor("#000");
|
|
this.which = false;
|
|
} else {
|
|
this.info_b.setColor("#00F");
|
|
this.info_a.setColor("#000");
|
|
this.which = true;
|
|
}
|
|
break;
|
|
case 37: // decrease point x
|
|
(this.which ? this.line.coords.bx-- : this.line.coords.ax--);
|
|
break;
|
|
case 39: // increase point x
|
|
(this.which ? this.line.coords.bx++ : this.line.coords.ax++);
|
|
break;
|
|
case 38: // decrease point y
|
|
(this.which ? this.line.coords.by-- : this.line.coords.ay--);
|
|
break;
|
|
case 40: // increase point y
|
|
(this.which ? this.line.coords.by++ : this.line.coords.ay++);
|
|
break;
|
|
}
|
|
break;
|
|
}
|
|
this.reDraw();
|
|
}
|
|
this.reDraw = function() {
|
|
this.display.Fill(0xFF, 0xFF, 0xFF);
|
|
this.display.draw(this.line, null, null);
|
|
this.display.draw(this.string, null, null);
|
|
// update and draw coordinate strings
|
|
var ax = this.line.coords.ax;
|
|
var ay = this.line.coords.ay;
|
|
var bx = this.line.coords.bx;
|
|
var by = this.line.coords.by;
|
|
this.info_a.setText("A("+ax+","+ay+")");
|
|
this.info_b.setText("B("+bx+","+by+")");
|
|
this.display.draw(this.info_a, null, {x: ax, y: ay});
|
|
this.display.draw(this.info_b, null, {x: bx, y: by});
|
|
};
|
|
}; CBDL.extend(CBDL.App, lineTest);
|
|
CBDL.addEvent(window, 'load', function() { (new lineTest()).Go();});
|
|
</script>
|
|
</head> <body> </body> </html>
|