795 lines
29 KiB
JavaScript
795 lines
29 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, WEBGL:0x02},
|
|
// FILL sets the initial Display to the width and height of the browser window. Resizing when the window's dimensions change is left to the developer.
|
|
VM: {SCALE: 0x01, ABSOLUTE: 0x02, FILL: 0x03},
|
|
RADIAN: (Math.PI/180),
|
|
getViewport: function() {
|
|
var h = window.innerHeight || document.documentElement.clientHeight || document.getElementsByTagName('body')[0].clientHeight;
|
|
var w = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
|
|
return { width : w , height : h }
|
|
}
|
|
};
|
|
/*
|
|
===============================================================================
|
|
|
|
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.setWidth = function() {};
|
|
CBDL.Graphics.BaseDisplay.prototype.setHeight = function() {};
|
|
CBDL.Graphics.BaseDisplay.prototype.Fill = function(red, green, blue) {};
|
|
CBDL.Graphics.BaseDisplay.prototype.clear = function() {};
|
|
CBDL.Graphics.BaseDisplay.prototype.draw = function() {};
|
|
|
|
CBDL.Graphics.BaseDisplay.prototype._Drawable_ = function(display, size, scale, rotation) {
|
|
this.display = display;
|
|
this.size = size;
|
|
this.scale = scale;
|
|
this.rotation = rotation;
|
|
};
|
|
|
|
CBDL.Graphics.BaseDisplay.prototype._Drawable_.prototype.setRotation = function(rotation) {
|
|
this.rotation = rotation;
|
|
};
|
|
|
|
CBDL.Graphics.BaseDisplay.prototype._Drawable_.prototype.setScale = function(scale) {
|
|
this.scale = scale;
|
|
};
|
|
|
|
CBDL.Graphics.BaseDisplay.prototype._Drawable_.prototype.setSize = function(size) {
|
|
this.size = size;
|
|
};
|
|
|
|
CBDL.Graphics.BaseDisplay.prototype._Drawable_.prototype.setOpacity = function(opacity) {
|
|
this.opacity = opacity;
|
|
};
|
|
CBDL.Graphics.BaseDisplay.prototype._Drawable_.prototype.destroy = function() {};
|
|
|
|
CBDL.Graphics.BaseDisplay.prototype._Image_ = function(display, image, scale, rotation) {
|
|
this.display = display;
|
|
this.data = new Image();
|
|
this.size = { width: 1, height: 1 };
|
|
this.data.onload = (function(scope) {
|
|
return function() {
|
|
scope.size.width = this.width;
|
|
scope.size.height = this.height;
|
|
}
|
|
})(this);
|
|
this.data.src = image;
|
|
this.scale = scale;
|
|
this.rotation = rotation;
|
|
};CBDL.extend(CBDL.Graphics.BaseDisplay.prototype._Drawable_, CBDL.Graphics.BaseDisplay.prototype._Image_);
|
|
CBDL.Graphics.BaseDisplay.prototype._Image_.prototype.destroy = function() {
|
|
this.data = null;
|
|
};
|
|
|
|
|
|
CBDL.Graphics.BaseDisplay.prototype._Box_ = function(display, size, scale, rotation) {
|
|
this.display = display;
|
|
this.size = size;
|
|
this.scale = scale;
|
|
this.rotation = rotation;
|
|
}; CBDL.extend(CBDL.Graphics.BaseDisplay.prototype._Drawable_, CBDL.Graphics.BaseDisplay.prototype._Box_);
|
|
|
|
CBDL.Graphics.BaseDisplay.prototype._Box_.prototype.setColor = function(color) {
|
|
this.color = color;
|
|
};
|
|
|
|
CBDL.Graphics.BaseDisplay.prototype._Line_ = function(display, coords, size, scale, rotation) {
|
|
this.display = display;
|
|
this.coords = coords;
|
|
this.size = size;
|
|
this.scale = scale;
|
|
this.rotation = rotation;
|
|
}; CBDL.extend(CBDL.Graphics.BaseDisplay.prototype._Drawable_, CBDL.Graphics.BaseDisplay.prototype._Line_);
|
|
|
|
CBDL.Graphics.BaseDisplay.prototype._Line_.prototype.setColor = function(color) {
|
|
this.color = color;
|
|
};
|
|
|
|
CBDL.Graphics.BaseDisplay.prototype._Font_ = function(family) {
|
|
this.family = family;
|
|
};
|
|
CBDL.Graphics.BaseDisplay.prototype._Font_.prototype.destroy = function() {};
|
|
CBDL.Graphics.BaseDisplay.prototype._Font_.prototype.getWidth = function(size) {
|
|
var test = document.createElement('div');
|
|
test.innerHTML = 'a';
|
|
//test.style.left = "-1000px";
|
|
//test.style.top = "-1000px";
|
|
test.style.visibility = "hidden";
|
|
test.style.position = "absolute";
|
|
test.style.fontFamily = this.family;
|
|
test.style.fontSize = size+"px";
|
|
document.body.appendChild(test);
|
|
var width = test.clientWidth+1;
|
|
document.body.removeChild(test);
|
|
return width;
|
|
};
|
|
CBDL.Graphics.BaseDisplay.prototype._Font_.prototype.getTextWidth = function(size, string) {
|
|
var test = document.createElement('div');
|
|
test.innerHTML = string;
|
|
test.style.left = "-1000px";
|
|
test.style.top = "-1000px";
|
|
//test.style.visibility = "hidden";
|
|
test.style.position = "absolute";
|
|
test.style.fontFamily = this.family;
|
|
test.style.fontSize = size+"px";
|
|
document.body.appendChild(test);
|
|
var width = test.clientWidth;
|
|
document.body.removeChild(test);
|
|
return width;
|
|
};
|
|
|
|
CBDL.Graphics.BaseDisplay.prototype._String_ = function(text, font, size) {
|
|
this.text = text;
|
|
this.font = font;
|
|
this.size = size;
|
|
this.color = "#000000";
|
|
};
|
|
CBDL.Graphics.BaseDisplay.prototype._String_.prototype.setText = function(text) {
|
|
this.text = text;
|
|
};
|
|
CBDL.Graphics.BaseDisplay.prototype._String_.prototype.setFont = function(font) {
|
|
this.font = font;
|
|
};
|
|
CBDL.Graphics.BaseDisplay.prototype._String_.prototype.setSize = function(size) {
|
|
this.size = size;
|
|
};
|
|
CBDL.Graphics.BaseDisplay.prototype._String_.prototype.setColor = function(color) {
|
|
this.color = color;
|
|
};
|
|
CBDL.Graphics.BaseDisplay.prototype._String_.prototype.destroy = function() {};
|
|
|
|
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);
|
|
if (element.getContext('webgl')) {
|
|
supports.push(CBDL.Graphics.BACKEND.WEBGL);
|
|
}
|
|
}
|
|
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.WEBGL:
|
|
return (new CBDL.Graphics.WebGlDisplay(target_element, video_mode));
|
|
break;
|
|
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;
|
|
}
|
|
return false;
|
|
};
|
|
|
|
CBDL.Graphics.WebGlDisplay = function(target_element, video_mode) {
|
|
this.video_mode = video_mode;
|
|
this.target_element = target_element;
|
|
this.type = 'WebGlDisplay';
|
|
}; CBDL.extend(CBDL.Graphics.BaseDisplay, CBDL.Graphics.WebGlDisplay);
|
|
|
|
CBDL.Graphics.WebGlDisplay.prototype.Init = function() {
|
|
this.element = document.createElement("canvas");
|
|
this.element.width = this.video_mode.width;
|
|
this.element.height = this.video_mode.height;
|
|
this.element_context = this.element.getContext("webgl") || this.element.getContext("experimental-webgl");
|
|
this.element_context.viewport(0, 0, this.video_mode.width, this.video_mode.height);
|
|
this.target_element.appendChild(this.element);
|
|
};
|
|
|
|
CBDL.Graphics.WebGlDisplay.prototype.Image = function(image, scale, rotation) {
|
|
return (new CBDL.Graphics.BaseDisplay.prototype._Image_(this, image, scale, rotation));
|
|
};
|
|
|
|
CBDL.Graphics.WebGlDisplay.prototype._Image_ = function(display, image, scale, rotation) {
|
|
this.display = display;
|
|
this.data = new Image();
|
|
this.data.texture = display.element_context.createTexture();
|
|
this.data.onload = (function(image) {
|
|
return function() {
|
|
image.loaded = true;
|
|
};
|
|
}(this));
|
|
this.data.src = image;
|
|
this.scale = scale;
|
|
this.rotation = rotation;
|
|
};CBDL.extend(CBDL.Graphics.BaseDisplay.prototype._Drawable_, CBDL.Graphics.WebGlDisplay.prototype._Image_);
|
|
|
|
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");
|
|
if (this.video_mode.flags & CBDL.Graphics.VM.ABSOLUTE) {
|
|
this.element.style.position = "absolute";
|
|
this.element.style.left = "0px";
|
|
this.element.style.top = "0px";
|
|
} else {
|
|
this.element.style.position = "relative";
|
|
}
|
|
if (this.video_mode.flags & CBDL.Graphics.VM.FILL) {
|
|
this.viewport = CBDL.Graphics.getViewport();
|
|
this.video_mode.width = this.viewport.width;
|
|
this.video_mode.height = this.viewport.height;
|
|
this.element.width = this.viewport.width;
|
|
this.element.height = this.viewport.height;
|
|
} else {
|
|
this.viewport = {};
|
|
this.viewport.width = this.video_mode.width;
|
|
this.viewport.height = this.video_mode.height;
|
|
this.element.width = this.video_mode.width;
|
|
this.element.height = this.video_mode.height;
|
|
}
|
|
|
|
this.element_context = this.element.getContext("2d");
|
|
this.target_element.appendChild(this.element);
|
|
|
|
// offscreen canvas, used for any transformations that must be done via putImageData
|
|
// or getImageData. (e.g., opacity)
|
|
this.offscreen = document.createElement("canvas");
|
|
this.offscreen_context = this.offscreen.getContext("2d");
|
|
};
|
|
|
|
CBDL.Graphics.Canvas2dDisplay.prototype.updateViewport = function() {
|
|
if (this.video_mode.flags & CBDL.Graphics.VM.FILL) {
|
|
this.viewport = CBDL.Graphics.getViewport();
|
|
this.video_mode.width = this.viewport.width;
|
|
this.video_mode.height = this.viewport.height;
|
|
this.element.width = this.viewport.width;
|
|
this.element.height = this.viewport.height;
|
|
}
|
|
};
|
|
|
|
CBDL.Graphics.Canvas2dDisplay.prototype.setWidth = function(width) {
|
|
this.video_mode.width = width;
|
|
this.element.width = width;
|
|
};
|
|
|
|
CBDL.Graphics.Canvas2dDisplay.prototype.setHeight = function(height) {
|
|
this.video_mode.height = height;
|
|
this.element.height = height;
|
|
};
|
|
|
|
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.clear = function() {
|
|
// this.element_context.fillStyle = "#000000";
|
|
// this.element_context.fillRect(0, 0, this.video_mode.width, this.video_mode.height);
|
|
// this.offscreen_context.fillStyle = "#000000";
|
|
// this.offscreen_context.fillRect(0, 0, this.video_mode.width, this.video_mode.height);
|
|
this.element_context.clearRect(0, 0, this.element.width, this.element.height);
|
|
this.offscreen_context.clearRect(0, 0, this.offscreen.width, this.offscreen.height);
|
|
};
|
|
|
|
CBDL.Graphics.Canvas2dDisplay.prototype.draw = function(source, s_position, t_position) {
|
|
var width = source.size.width || 1;
|
|
var height = source.size.height || 1;
|
|
var s_position = s_position || {x: 0, y: 0};
|
|
var t_position = t_position || {x: 0, y: 0};
|
|
// How this works: element_context, being the overall canvas, handles sprite rotation
|
|
// and scaling. offscreen_context handles setting opacity, and is written to
|
|
// element_context as an Image when complete.
|
|
|
|
this.element_context.save();
|
|
this.element_context.translate(t_position.x, t_position.y);
|
|
|
|
if (source.data instanceof Image) {
|
|
// set offscreen
|
|
this.offscreen.width = width;
|
|
this.offscreen.height = height;
|
|
|
|
this.element_context.translate(width/2, height/2);
|
|
if (typeof source.rotation !== 'undefined') {
|
|
this.element_context.rotate(source.rotation * CBDL.Graphics.RADIAN);
|
|
}
|
|
if (typeof source.scale !== 'undefined') {
|
|
this.element_context.scale(source.scale.x, source.scale.y);
|
|
}
|
|
|
|
// Set transparency offscreen due to putImageData overwriting all pixel values in
|
|
// the canvas.
|
|
this.offscreen_context.drawImage(source.data, 0, 0);
|
|
if (typeof source.opacity !== 'undefined') {
|
|
// NOTE: getImageData & putImageData are painfully slow! :(
|
|
var image = this.offscreen_context.getImageData(0, 0, width, height);
|
|
var image_data = image.data;
|
|
var length = image_data.length;
|
|
for (var i=3;i < length;i +=4) {
|
|
if (image_data[i] > 0) { // if not transparent
|
|
image_data[i] = image_data[i]*source.opacity;
|
|
}
|
|
}
|
|
image.data = image_data;
|
|
this.offscreen_context.putImageData(image, 0, 0);
|
|
}
|
|
// Copy manipulated image back over to main canvas.
|
|
this.element_context.drawImage(this.offscreen, -(width/2), -(height/2));
|
|
} else if (source instanceof CBDL.Graphics.BaseDisplay.prototype._Box_) {
|
|
this.offscreen.width = width;
|
|
this.offscreen.height = height;
|
|
this.element_context.translate(width/2, height/2);
|
|
if (typeof source.scale !== 'undefined') {
|
|
this.element_context.scale(source.scale.x, source.scale.y);
|
|
}
|
|
if (typeof source.rotation !== 'undefined') {
|
|
this.element_context.rotate(source.rotation * CBDL.Graphics.RADIAN);
|
|
}
|
|
this.offscreen_context.fillStyle = source.color;
|
|
this.offscreen_context.fillRect(0, 0, this.video_mode.width, this.video_mode.height);
|
|
if (typeof source.opacity !== 'undefined') {
|
|
// NOTE: getImageData & putImageData are painfully slow! :(
|
|
var image = this.offscreen_context.getImageData(0, 0, width, height);
|
|
var image_data = image.data;
|
|
var length = image_data.length;
|
|
for (var i=3;i < length;i +=4) {
|
|
if (image_data[i] > 0) { // if not transparent
|
|
image_data[i] = image_data[i]*source.opacity;
|
|
}
|
|
}
|
|
image.data = image_data;
|
|
this.offscreen_context.putImageData(image, 0, 0);
|
|
}
|
|
// Copy manipulated image back over to main canvas.
|
|
this.element_context.drawImage(this.offscreen, -(width/2), -(height/2));
|
|
} else if (source instanceof CBDL.Graphics.BaseDisplay.prototype._Line_) {
|
|
this.offscreen.width = width;
|
|
this.offscreen.height = height;
|
|
this.element_context.translate(width/2, height/2);
|
|
if (typeof source.scale !== 'undefined') {
|
|
this.element_context.scale(source.scale.x, source.scale.y);
|
|
}
|
|
if (typeof source.rotation !== 'undefined') {
|
|
this.element_context.rotate(source.rotation * CBDL.Graphics.RADIAN);
|
|
}
|
|
this.element_context.fillStyle = source.color;
|
|
this.element_context.beginPath();
|
|
this.element_context.moveTo(source.coords.ax, source.coords.ay);
|
|
this.element_context.lineTo(source.coords.bx, source.coords.by);
|
|
this.element_context.lineWidth = width;
|
|
this.element_context.stroke();
|
|
if (typeof source.opacity !== 'undefined') {
|
|
// NOTE: getImageData & putImageData are painfully slow! :(
|
|
var image = this.offscreen_context.getImageData(0, 0, width, height);
|
|
var image_data = image.data;
|
|
var length = image_data.length;
|
|
for (var i=3;i < length;i +=4) {
|
|
if (image_data[i] > 0) { // if not transparent
|
|
image_data[i] = image_data[i]*source.opacity;
|
|
}
|
|
}
|
|
image.data = image_data;
|
|
this.offscreen_context.putImageData(image, 0, 0);
|
|
}
|
|
// Copy manipulated image back over to main canvas.
|
|
this.element_context.drawImage(this.offscreen, -(width/2), -(height/2));
|
|
|
|
} else if (source instanceof CBDL.Graphics.BaseDisplay.prototype._String_) {
|
|
this.element_context.font = source.size+"px "+source.font.family;
|
|
this.element_context.fillStyle = source.color;
|
|
this.element_context.fillText(source.text, 0, source.size);
|
|
} else {
|
|
/*this.element_context.translate(source.size.width/2, source.size.height/2);
|
|
if (typeof source.rotation !== 'undefined') {
|
|
this.element_context.rotate(source.rotation * CBDL.Graphics.RADIAN);
|
|
}
|
|
this.element_context.fillStyle = "#FFFFFF";
|
|
this.element_context.fillRect(-(source.size.width/2), -(source.size.height/2), source.size.width, source.size.height); */
|
|
}
|
|
this.element_context.restore();
|
|
};
|
|
|
|
CBDL.Graphics.Canvas2dDisplay.prototype.Drawable = function(size, scale, rotation) {
|
|
return (new CBDL.Graphics.BaseDisplay.prototype._Drawable_(this, size, scale, rotation));
|
|
};
|
|
|
|
CBDL.Graphics.Canvas2dDisplay.prototype.Image = function(image, scale, rotation) {
|
|
return (new CBDL.Graphics.BaseDisplay.prototype._Image_(this, image, scale, rotation));
|
|
};
|
|
|
|
CBDL.Graphics.Canvas2dDisplay.prototype.Box = function(size, scale, rotation) {
|
|
return (new CBDL.Graphics.BaseDisplay.prototype._Box_(this, size, scale, rotation));
|
|
};
|
|
|
|
CBDL.Graphics.Canvas2dDisplay.prototype.Line = function(coords, size, scale, rotation) {
|
|
return (new CBDL.Graphics.BaseDisplay.prototype._Line_(this, coords, size, scale, rotation));
|
|
};
|
|
|
|
CBDL.Graphics.Canvas2dDisplay.prototype.Font = function(family) {
|
|
return (new CBDL.Graphics.BaseDisplay.prototype._Font_(family));
|
|
};
|
|
|
|
CBDL.Graphics.Canvas2dDisplay.prototype.String = function(string, font, size) {
|
|
return (new CBDL.Graphics.BaseDisplay.prototype._String_(string, font, size));
|
|
};
|
|
|
|
/*
|
|
===============================================================================
|
|
|
|
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");
|
|
if (this.video_mode.flags & CBDL.Graphics.VM.ABSOLUTE) {
|
|
this.element.style.position = "absolute";
|
|
this.element.style.left = "0px";
|
|
this.element.style.top = "0px";
|
|
} else {
|
|
this.element.style.position = "relative";
|
|
}
|
|
if (this.video_mode.flags & CBDL.Graphics.VM.FILL) {
|
|
this.viewport = CBDL.Graphics.getViewport();
|
|
this.element.style.width = this.viewport.width+"px";
|
|
this.element.style.height = this.viewport.height+"px";
|
|
} else {
|
|
this.viewport = {};
|
|
this.viewport.width = this.video_mode.width;
|
|
this.viewport.height = this.video_mode.height;
|
|
this.element.style.width = this.video_mode.width+"px";
|
|
this.element.style.height = this.video_mode.height+"px";
|
|
}
|
|
this.element.style.display = "block";
|
|
this.element.style.overflow = "hidden";
|
|
this.target_element.appendChild(this.element);
|
|
this.current_z = 0;
|
|
};
|
|
|
|
CBDL.Graphics.DivDisplay.prototype.updateViewport = function() {
|
|
if (this.video_mode.flags & CBDL.Graphics.VM.FILL) {
|
|
this.viewport = CBDL.Graphics.getViewport();
|
|
this.element.style.width = this.viewport.width+"px";
|
|
this.element.style.height = this.viewport.height+"px";
|
|
}
|
|
};
|
|
|
|
CBDL.Graphics.DivDisplay.prototype.setWidth = function(width) {
|
|
this.element.style.width = width+"px";
|
|
};
|
|
|
|
CBDL.Graphics.DivDisplay.prototype.setHeight = function(height) {
|
|
this.element.style.height = height+"px";
|
|
};
|
|
|
|
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.draw = function(source, s_position, t_position) {
|
|
var s_position = s_position || {x: 0, y: 0};
|
|
var t_position = t_position || {x: 0, y: 0};
|
|
this.current_z++;
|
|
source.data.style.visibility = 'hidden';
|
|
if (!source.isDrawn) {
|
|
source.data.style.position = "absolute";
|
|
source.data.style.display = "block";
|
|
this.element.appendChild(source.data);
|
|
source.isDrawn = true;
|
|
}
|
|
|
|
var transform = '';
|
|
|
|
if (source instanceof CBDL.Graphics.BaseDisplay.prototype._Line_) {
|
|
delta_x = source.coords.bx - source.coords.ax;
|
|
delta_y = source.coords.by - source.coords.ay;
|
|
source.data.style.height = (Math.abs(delta_x) + Math.abs(delta_y))+"px";
|
|
rads = Math.atan2(delta_y, delta_x);
|
|
angle = (rads * 180 / Math.PI) + 90;
|
|
var rot_x = (source.coords.ax < source.coords.bx ? source.coords.ax : source.coords.bx);
|
|
var rot_y = (source.coords.ay < source.coords.by ? source.coords.ay : source.coords.by);
|
|
/*t_position.x += rot_x * Math.cos(rads) + rot_y * Math.sin(rads);
|
|
t_position.y += -rot_x * Math.sin(rads) + rot_y * Math.cos(rads);
|
|
//t_position.x += rot_x - (rot_x/2);
|
|
//t_position.y += rot_y - (rot_y/2);*/
|
|
t_position.x += rot_x;
|
|
t_position.y += rot_y;
|
|
transform += "rotate("+angle+"deg)";
|
|
} else {
|
|
source.data.style.height = source.size.height;
|
|
}
|
|
|
|
if (typeof source.rotation !== 'undefined') {
|
|
transform += "rotate("+source.rotation+"deg)"
|
|
}
|
|
if (typeof source.scale !== 'undefined') {
|
|
transform += "scale("+source.scale.x+", "+source.scale.y+")"
|
|
}
|
|
if (typeof source.opacity !== 'undefined') {
|
|
source.data.style.opacity = source.opacity;
|
|
}
|
|
source.data.style.width = source.size.width+"px";
|
|
source.data.style.left = t_position.x+"px";
|
|
source.data.style.top = t_position.y+"px";
|
|
source.data.style.zIndex = this.current_z;
|
|
CBDL.setElementTransform(source.data, transform);
|
|
source.data.style.visibility = 'visible';
|
|
};
|
|
|
|
CBDL.Graphics.DivDisplay.prototype.clear = function() {
|
|
this.element.style.backgroundColor = "#000000";
|
|
this.current_z = 0;
|
|
};
|
|
|
|
CBDL.Graphics.DivDisplay.prototype.Drawable = function() {
|
|
this.lol = "lol";
|
|
console.log("buh");
|
|
};
|
|
|
|
CBDL.Graphics.DivDisplay.prototype.Image = function(image, scale, rotation) {
|
|
return (new CBDL.Graphics.DivDisplay.prototype._Image_(this, image, scale, rotation));
|
|
};
|
|
|
|
CBDL.Graphics.DivDisplay.prototype._Image_ = function(display, image, scale, rotation) {
|
|
this.isDrawn = false;
|
|
this.display = display;
|
|
this.data = document.createElement("img");
|
|
this.data.src = image;
|
|
this.scale = scale;
|
|
this.rotation = rotation;
|
|
this.data.style.visibility = 'hidden';
|
|
};CBDL.extend(CBDL.Graphics.BaseDisplay.prototype._Drawable_, CBDL.Graphics.DivDisplay.prototype._Image_);
|
|
CBDL.Graphics.DivDisplay.prototype._Image_.prototype.destroy = function() {
|
|
this.data.parentNode.removeChild(this.data);
|
|
};
|
|
|
|
CBDL.Graphics.DivDisplay.prototype.Box = function(size, scale, rotation) {
|
|
return (new CBDL.Graphics.DivDisplay.prototype._Box_(this, size, scale, rotation));
|
|
};
|
|
|
|
CBDL.Graphics.DivDisplay.prototype._Box_ = function(display, size, scale, rotation) {
|
|
this.isDrawn = false;
|
|
this.display = display;
|
|
this.color = "black";
|
|
this.data = document.createElement("div");
|
|
this.data.style.width = size.width+"px";
|
|
this.data.style.height = size.height+"px";
|
|
this.data.style.display = "block";
|
|
this.data.style.backgroundColor = this.color;
|
|
this.size = size;
|
|
this.scale = scale;
|
|
this.rotation = rotation;
|
|
}; CBDL.extend(CBDL.Graphics.BaseDisplay.prototype._Box_, CBDL.Graphics.DivDisplay.prototype._Box_);
|
|
CBDL.Graphics.DivDisplay.prototype._Box_.prototype.destroy = function() {
|
|
if (this.data.parentNode) {
|
|
this.data.parentNode.removeChild(this.data);
|
|
}
|
|
};
|
|
CBDL.Graphics.DivDisplay.prototype._Box_.prototype.setColor = function(color) {
|
|
this.color = color;
|
|
this.data.style.backgroundColor = this.color;
|
|
};
|
|
|
|
CBDL.Graphics.DivDisplay.prototype.Line = function(coords, size, scale, rotation) {
|
|
return (new CBDL.Graphics.DivDisplay.prototype._Line_(this, coords, size, scale, rotation));
|
|
};
|
|
|
|
CBDL.Graphics.DivDisplay.prototype._Line_ = function(display, coords, size, scale, rotation) {
|
|
this.isDrawn = false;
|
|
this.display = display;
|
|
this.color = "black";
|
|
this.data = document.createElement("div");
|
|
this.data.style.width = Math.abs(coords.ax - coords.bx) + Math.abs(coords.ay - coords.by);
|
|
this.data.style.height = size.height;
|
|
this.data.style.display = "block";
|
|
this.data.style.backgroundColor = this.color;
|
|
this.coords = coords;
|
|
this.size = size;
|
|
this.scale = scale;
|
|
this.rotation = rotation;
|
|
}; CBDL.extend(CBDL.Graphics.BaseDisplay.prototype._Line_, CBDL.Graphics.DivDisplay.prototype._Line_);
|
|
CBDL.Graphics.DivDisplay.prototype._Line_.prototype.destroy = function() {
|
|
if (this.data.parentNode) {
|
|
this.data.parentNode.removeChild(this.data);
|
|
}
|
|
};
|
|
CBDL.Graphics.DivDisplay.prototype._Line_.prototype.setColor = function(color) {
|
|
this.color = color;
|
|
this.data.style.backgroundColor = this.color;
|
|
};
|
|
|
|
CBDL.Graphics.DivDisplay.prototype.Font = function(family) {
|
|
return (new CBDL.Graphics.BaseDisplay.prototype._Font_(family));
|
|
};
|
|
|
|
CBDL.Graphics.DivDisplay.prototype.String = function(text, font, size) {
|
|
return (new CBDL.Graphics.DivDisplay.prototype._String_(this, text, font, size));
|
|
};
|
|
|
|
CBDL.Graphics.DivDisplay.prototype._String_ = function(display, text, font, size) {
|
|
this.isDrawn = false;
|
|
this.display = display;
|
|
this.text = text;
|
|
this.font = font;
|
|
this.size = size;
|
|
this.color = "black";
|
|
this.data = document.createElement("xmp"); // xmp is universally supported and displays contained content raw, so we use it
|
|
this.data.style.padding = this.data.style.margin = 0;
|
|
this.data.style.display = "block";
|
|
this.data.style.fontSize = size+"px";
|
|
this.data.style.fontFamily = font.family;
|
|
this.data.style.color = "#000000";
|
|
this.data.innerHTML = text;
|
|
}; CBDL.extend(CBDL.Graphics.BaseDisplay.prototype._String_, CBDL.Graphics.DivDisplay.prototype._String_);
|
|
|
|
CBDL.Graphics.DivDisplay.prototype._String_.prototype.destroy = function() {
|
|
if (this.data.parentNode) {
|
|
this.data.parentNode.removeChild(this.data);
|
|
}
|
|
};
|
|
CBDL.Graphics.DivDisplay.prototype._String_.prototype.setText = function(text) {
|
|
this.text = text;
|
|
this.data.innerHTML = text;
|
|
};
|
|
|
|
CBDL.Graphics.DivDisplay.prototype._String_.prototype.setSize = function(size) {
|
|
this.size = size;
|
|
this.data.style.fontSize = size+"px";
|
|
};
|
|
CBDL.Graphics.DivDisplay.prototype._String_.prototype.setColor = function(color) {
|
|
this.color = color;
|
|
this.data.style.color = color;
|
|
};
|
|
|
|
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;
|
|
return this;
|
|
};
|
|
|
|
/*
|
|
===============================================================================
|
|
|
|
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) {
|
|
|
|
}
|
|
}
|