add layers
This commit is contained in:
parent
1800e4af5c
commit
9286270eb9
|
@ -1,3 +1,30 @@
|
||||||
|
export class uLayer {
|
||||||
|
#name;
|
||||||
|
#objects;
|
||||||
|
|
||||||
|
constructor(name, objects) {
|
||||||
|
// TODO: check types
|
||||||
|
this.#name = name;
|
||||||
|
this.#objects = Array();
|
||||||
|
|
||||||
|
objects.forEach((object) => {
|
||||||
|
this.#objects.push(object);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
add(object) {
|
||||||
|
this.#objects.push(object);
|
||||||
|
}
|
||||||
|
|
||||||
|
getName() {
|
||||||
|
return this.#name;
|
||||||
|
}
|
||||||
|
|
||||||
|
objects() {
|
||||||
|
return this.#objects;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
class uObject {
|
class uObject {
|
||||||
constructor(x, y, w, h) {
|
constructor(x, y, w, h) {
|
||||||
this.x = x;
|
this.x = x;
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import { Pointer } from './pointer.js';
|
import { Pointer } from './pointer.js';
|
||||||
import { uRect, uStrokeRect } from './objects.js';
|
import { uLayer, uRect, uStrokeRect } from './objects.js';
|
||||||
|
|
||||||
export class Scene {
|
export class Scene {
|
||||||
#canvas;
|
#canvas;
|
||||||
|
@ -11,8 +11,12 @@ export class Scene {
|
||||||
this.#context = context;
|
this.#context = context;
|
||||||
this.#layers = Array();
|
this.#layers = Array();
|
||||||
|
|
||||||
this.addObject(new uRect(50, 50, 100, 100, 'red'));
|
let layer = new uLayer('Entry', [
|
||||||
this.addObject(new uStrokeRect(150, 150, 40, 40, 'green', 'blue', 5));
|
new uRect(50, 50, 100, 100, 'red'),
|
||||||
|
new uStrokeRect(150, 150, 40, 40, 'green', 'blue', 5),
|
||||||
|
]);
|
||||||
|
|
||||||
|
this.addLayer(layer);
|
||||||
|
|
||||||
this.init(width, height);
|
this.init(width, height);
|
||||||
}
|
}
|
||||||
|
@ -41,19 +45,23 @@ export class Scene {
|
||||||
this.#context.lineWidth = 1;
|
this.#context.lineWidth = 1;
|
||||||
this.#context.strokeRect(5, 5, this.#canvas.width - 10, this.#canvas.height - 10);
|
this.#context.strokeRect(5, 5, this.#canvas.width - 10, this.#canvas.height - 10);
|
||||||
|
|
||||||
// draw item
|
// read layers & draw items
|
||||||
this.#layers.forEach((item) => {
|
this.#layers.forEach((layer) => {
|
||||||
switch (item.constructor.name) {
|
layer.objects().forEach((item) => {
|
||||||
case 'uRect':
|
switch (item.constructor.name) {
|
||||||
this.#drawRect(item.x, item.y, item.width, item.height, item.fillColor);
|
case 'uRect':
|
||||||
break;
|
this.#drawRect(item.x, item.y, item.width, item.height, item.fillColor);
|
||||||
case 'uStrokeRect':
|
break;
|
||||||
this.#drawStrokeRect(item.x, item.y, item.width, item.height,
|
|
||||||
item.fillColor, item.strokeColor, item.strokeWidth);
|
case 'uStrokeRect':
|
||||||
break;
|
this.#drawStrokeRect(item.x, item.y, item.width, item.height,
|
||||||
default:
|
item.fillColor, item.strokeColor, item.strokeWidth);
|
||||||
console.log(`=> ${item.constructor.name}`);
|
break;
|
||||||
}
|
|
||||||
|
default:
|
||||||
|
console.log(`⛔ Error display '${item.constructor.name}' object.`);
|
||||||
|
}
|
||||||
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -63,15 +71,19 @@ export class Scene {
|
||||||
}
|
}
|
||||||
|
|
||||||
#drawStrokeRect(x, y, w, h, fillColor, strokeWidth, strokeColor) {
|
#drawStrokeRect(x, y, w, h, fillColor, strokeWidth, strokeColor) {
|
||||||
this.#drawRect(x, y, w, h, fillColor);
|
this.#drawRect(x, y, w, h, fillColor);
|
||||||
|
|
||||||
this.#context.strokeWidth = strokeWidth;
|
this.#context.strokeWidth = strokeWidth;
|
||||||
this.#context.strokeStyle = strokeColor;
|
this.#context.strokeStyle = strokeColor;
|
||||||
this.#context.strokeRect(x, y, w, h);
|
this.#context.strokeRect(x, y, w, h);
|
||||||
}
|
}
|
||||||
|
|
||||||
addObject(object) {
|
addLayer(layer) {
|
||||||
this.#layers.push(object);
|
this.#layers.push(layer);
|
||||||
|
}
|
||||||
|
|
||||||
|
removeLayers() {
|
||||||
|
this.#layers = Array();
|
||||||
}
|
}
|
||||||
|
|
||||||
setScreenSize(w, h) {
|
setScreenSize(w, h) {
|
||||||
|
|
Loading…
Reference in New Issue