259 lines
8.1 KiB
JavaScript
259 lines
8.1 KiB
JavaScript
CBDL.include("excanvas.js");
|
|
/* **** CBDL_net - Optional layer which adds network support
|
|
*
|
|
*
|
|
* */
|
|
CBDL.Graphics = CBDL.Graphics || {
|
|
version: 0.1,
|
|
BACKEND: {DIV: 0x00, CANVAS_2D:0x01},
|
|
VM: {SCALE: 0x01}
|
|
};
|
|
/*
|
|
===============================================================================
|
|
|
|
CBDL.Graphics.BaseDisplay
|
|
|
|
Basic Display skeleton from which all Display backends should be derived
|
|
from. It is through the backend detection that the Display backend, being named
|
|
something similar to Html5Display, is assigned as Graphics.Display. This allows
|
|
for backends to be used/sent according to browser capability, rather than via
|
|
bulk.
|
|
|
|
===============================================================================
|
|
*/
|
|
CBDL.Graphics.BaseDisplay = function(video_mode, target_element) {
|
|
this.video_mode = video_mode;
|
|
this.target_element = target_element;
|
|
};
|
|
|
|
CBDL.Graphics.BaseDisplay.prototype.Init = function() {
|
|
|
|
};
|
|
CBDL.Graphics.BaseDisplay.prototype.Fill = function(red, green, blue) {
|
|
|
|
};
|
|
|
|
CBDL.Graphics.BaseDisplay.prototype.Drawable = function() {
|
|
console.log("BaseDrawable");
|
|
};
|
|
|
|
CBDL.Graphics.getBackend = function() {
|
|
var supports = [];
|
|
try { var element = document.createElement("div"); }
|
|
catch (err) { element = null; }
|
|
if (element != null) {
|
|
supports.push(CBDL.Graphics.BACKEND.DIV);
|
|
}
|
|
try { var element = document.createElement("canvas"); }
|
|
catch (err) { element = null; }
|
|
if (element != null) {
|
|
supports.push(CBDL.Graphics.BACKEND.CANVAS_2D);
|
|
}
|
|
return supports[supports.length-1];
|
|
};
|
|
|
|
/*
|
|
===============================================================================
|
|
|
|
CBDL.Graphics.Display
|
|
|
|
Base window onto which various Graphics elements can be placed within.
|
|
Effectively exists as a simple wrapper to a 'div' element. The first parameter
|
|
passed is an instance of a VideoMode(width, height). The second optional
|
|
parameter is a target HTML element. If ommitted, the Display adds its element
|
|
to document.body.
|
|
|
|
Usage:
|
|
|
|
|
|
===============================================================================
|
|
*/
|
|
|
|
CBDL.Graphics.Display = function(target_element, video_mode, backend) {
|
|
backend = (typeof backend !== 'undefined' ? backend : CBDL.Graphics.getBackend());
|
|
target_element = (typeof target_element !== 'undefined' ? target_element : document.body);
|
|
switch (backend) {
|
|
case CBDL.Graphics.BACKEND.CANVAS_2D:
|
|
return (new CBDL.Graphics.Canvas2dDisplay(target_element, video_mode));
|
|
break;
|
|
case CBDL.Graphics.BACKEND.DIV:
|
|
return (new CBDL.Graphics.DivDisplay(target_element, video_mode));
|
|
break;
|
|
}
|
|
};
|
|
|
|
CBDL.Graphics.Canvas2dDisplay = function(target_element, video_mode) {
|
|
this.video_mode = video_mode;
|
|
this.target_element = target_element;
|
|
this.type = 'Canvas2dDisplay';
|
|
}; CBDL.extend(CBDL.Graphics.BaseDisplay, CBDL.Graphics.Canvas2dDisplay);
|
|
|
|
CBDL.Graphics.Canvas2dDisplay.prototype.Init = function() {
|
|
this.element = document.createElement("canvas");
|
|
this.element.style.width = this.video_mode.width;
|
|
this.element.style.height = this.video_mode.height;
|
|
this.element_context = this.element.getContext("2d");
|
|
this.target_element.appendChild(this.element);
|
|
};
|
|
|
|
CBDL.Graphics.Canvas2dDisplay.prototype.Fill = function(red, green, blue) {
|
|
var hex_value = ((1 << 24) + (red << 16) + (green << 8) + blue);
|
|
var hex_string = hex_value.toString(16).substr(1);
|
|
this.element_context.fillStyle = "#"+hex_string;
|
|
this.element_context.fillRect(0, 0, this.video_mode.width, this.video_mode.height);
|
|
};
|
|
|
|
CBDL.Graphics.Canvas2dDisplay.prototype.Drawable = function(v_position, v_scale, v_rotation, color) {
|
|
return (new CBDL.Graphics.Canvas2dDisplay.prototype._Drawable_(this, v_position, v_scale, v_rotation, color));
|
|
};
|
|
|
|
CBDL.Graphics.Canvas2dDisplay.prototype._Drawable_ = function(display, v_position, v_scale, v_rotation, color) {
|
|
this.display = display;
|
|
this.position = v_position;
|
|
this.scale = v_scale;
|
|
this.rotation = v_rotation;
|
|
this.color = color;
|
|
|
|
console.log("created");
|
|
};
|
|
|
|
CBDL.Graphics.Canvas2dDisplay.prototype._Drawable_.prototype.setX = function(x) {
|
|
this.x = x;
|
|
};
|
|
|
|
CBDL.Graphics.Canvas2dDisplay.prototype._Drawable_.prototype.setY = function(y) {
|
|
this.y = y;
|
|
};
|
|
|
|
CBDL.Graphics.Canvas2dDisplay.prototype._Drawable_.prototype.testFunc = function() {
|
|
console.log("augh");
|
|
};
|
|
|
|
/*
|
|
===============================================================================
|
|
|
|
CBDL.Graphics.DivDisplay
|
|
|
|
The div element based backend. This is the least capable backend of all default
|
|
backends, supporting only the most basic drawing operations, not including
|
|
rotation, shearing, or other such operations.
|
|
|
|
===============================================================================
|
|
*/
|
|
|
|
CBDL.Graphics.DivDisplay = function(target_element, video_mode) {
|
|
this.target_element = target_element;
|
|
this.video_mode = video_mode;
|
|
this.type = 'DivDisplay';
|
|
}; CBDL.extend(CBDL.Graphics.BaseDisplay, CBDL.Graphics.DivDisplay);
|
|
|
|
CBDL.Graphics.DivDisplay.prototype.Init = function() {
|
|
this.element = document.createElement("div");
|
|
this.element.style.width = this.video_mode.width;
|
|
this.element.style.height = this.video_mode.height;
|
|
this.target_element.appendChild(this.element);
|
|
};
|
|
|
|
CBDL.Graphics.DivDisplay.prototype.Fill = function(red, green, blue) {
|
|
var hex_value = ((1 << 24) + (red << 16) + (green << 8) + blue);
|
|
var hex_string = hex_value.toString(16).substr(1);
|
|
this.element.style.backgroundColor = "#"+hex_string;
|
|
};
|
|
|
|
CBDL.Graphics.DivDisplay.prototype.Drawable = function() {
|
|
this.lol = "lol";
|
|
console.log("buh");
|
|
};
|
|
|
|
CBDL.Graphics.Dispray = function(video_mode, target_element) {
|
|
var _context = CBDL.Graphics;
|
|
this.context = null;
|
|
this.init = function() {
|
|
try { this.element = document.createElement("canvas"); }
|
|
catch (x) { this.element = null; }
|
|
if (this.element == null) { // fallback to nasty divs
|
|
this.element = document.createElement("div");
|
|
this.element.style.width = this.videomode.width;
|
|
this.element.style.height = this.videomode.height;
|
|
this.element.style.backgroundColor = 'black';
|
|
this.element.style.display = "block";
|
|
this.type = _context.DisplayType.DIV;
|
|
} else { // using HTML5 canvas
|
|
if (typeof G_vmlCanvasManager != "undefined") { // IE8, bleh
|
|
G_vmlCanvasManager.initElement(this.element);
|
|
}
|
|
this.type = _context.DisplayType.CANVAS_2D;
|
|
this.element.style.width = this.videomode.width;
|
|
this.element.style.height = this.videomode.height;
|
|
try { this.context = this.element.getContext("2d"); }
|
|
catch (x) { this.context = null; }
|
|
if (this.context == null) {
|
|
} else {
|
|
this.context.fillStyle = "#000000";
|
|
this.context.fillRect(0, 0, this.videomode.width, this.videomode.height);
|
|
}
|
|
}
|
|
(target_element ? target_element : document.body).appendChild(this.element);
|
|
};
|
|
|
|
this.Fill = function(red, green, blue) {
|
|
var hex_value = ((1 << 24) + (red << 16) + (green << 8) + blue);
|
|
var hex_string = hex_value.toString(16).substr(1);
|
|
if (this.type == _context.DisplayType.DIV) {
|
|
this.element.style.backgroundColor = '#'+hex_string;
|
|
} else if (this.type == _context.DisplayType.CANVAS_2D) {
|
|
//this.context.fillStyle = "#"+hex_string;
|
|
//this.context.fillRect(0, 0, this.videomode.width, this.videomode.height);
|
|
}
|
|
};
|
|
|
|
if (video_mode instanceof CBDL.Graphics.VideoMode) {
|
|
this.videomode = video_mode;
|
|
this.init();
|
|
}
|
|
}
|
|
|
|
/*
|
|
===============================================================================
|
|
|
|
CBDL.Graphics.VideoMode(width, height);
|
|
|
|
Object which should be passed as the first parameter to Graphics.Display,
|
|
defining the width and height of the Display.
|
|
|
|
===============================================================================
|
|
*/
|
|
CBDL.Graphics.VideoMode = function(width, height, flags) {
|
|
this.width = width;
|
|
this.height = height;
|
|
this.flags = flags;
|
|
};
|
|
|
|
/*
|
|
===============================================================================
|
|
|
|
CBDL.Graphics.Drawable(2dVector position, 2dVector scale, float rotation)
|
|
|
|
Base class for all objects that can be drawn to a Graphics.Display.
|
|
|
|
Usage:
|
|
|
|
===============================================================================
|
|
*/
|
|
|
|
CBDL.Graphics.Drawable = function(position, scale, rotation) {
|
|
|
|
this.setPosition = function(x, y) {
|
|
|
|
}
|
|
this.setScale = function(x, y) {
|
|
|
|
}
|
|
this.setCenter = function(x, y) {
|
|
|
|
}
|
|
this.setRotation = function(rotation) {
|
|
|
|
}
|
|
}
|