nkellenicki/bittmapp
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Centered canvas

Browse Source
This commit is contained in:
Nathan Kunicki 2017-11-18 13:47:37 +00:00
parent 68233dde85
commit c522a644f1
3 changed files with 38 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -7,6 +7,8 @@
<link rel="stylesheet" href="./static/css/styles.css" /> <link rel="stylesheet" href="./static/css/styles.css" />
</head> </head>
<body> <body>
<section id="main">
<canvas id="editor"></canvas> <canvas id="editor"></canvas>
</section>
</body> </body>
</html> </html>

24
src/bittmappeditor.ts
View File

@ -18,8 +18,8 @@ class BittMappEditor {
public canvasWidth: number; public canvasWidth: number;
public canvasHeight: number; public canvasHeight: number;
public canvas: HTMLCanvasElement;
private _canvas: HTMLCanvasElement;
private _context: CanvasRenderingContext2D; private _context: CanvasRenderingContext2D;
private _width: number; private _width: number;
@ -41,7 +41,7 @@ class BittMappEditor {
options = options || {}; options = options || {};
if (options.canvas) { if (options.canvas) {
this._canvas = options.canvas; this.canvas = options.canvas;
} else { } else {
throw new Error("BittMappEditor must be initialized with a canvas."); throw new Error("BittMappEditor must be initialized with a canvas.");
} }
@ -70,7 +70,7 @@ class BittMappEditor {
throw new Error("BittMappEditor must be constructed with a height."); throw new Error("BittMappEditor must be constructed with a height.");
} }
this._context = this._canvas.getContext("2d") as CanvasRenderingContext2D; this._context = this.canvas.getContext("2d") as CanvasRenderingContext2D;
const deviceRatio: number = window.devicePixelRatio; const deviceRatio: number = window.devicePixelRatio;
const backingStoreRatio: number = (this._context as any).backingStorePixelRatio as number || 1; const backingStoreRatio: number = (this._context as any).backingStorePixelRatio as number || 1;
@ -78,32 +78,32 @@ class BittMappEditor {
this._scale = deviceRatio / backingStoreRatio; this._scale = deviceRatio / backingStoreRatio;
this._deviceRatio = deviceRatio; this._deviceRatio = deviceRatio;
this._canvas.width = this.canvasWidth * this._scale; this.canvas.width = this.canvasWidth * this._scale;
this._canvas.height = this.canvasHeight * this._scale; this.canvas.height = this.canvasHeight * this._scale;
this._canvas.style.width = `${this.canvasWidth}px`; this.canvas.style.width = `${this.canvasWidth}px`;
this._canvas.style.height = `${this.canvasHeight}px`; this.canvas.style.height = `${this.canvasHeight}px`;
this._context.setTransform(this._scale, 0, 0, this._scale, 0, 0); this._context.scale(this._scale, this._scale);
this.resize(); this.resize();
this._canvas.addEventListener("contextmenu", (event) => { this.canvas.addEventListener("contextmenu", (event) => {
event.preventDefault(); event.preventDefault();
}); });
this._canvas.addEventListener("mousedown", (event) => { this.canvas.addEventListener("mousedown", (event) => {
this._mouseDown = true; this._mouseDown = true;
this._mouseButton = event.button as MouseButton; this._mouseButton = event.button as MouseButton;
this._handleMouseEvent(event, this._mouseButton); this._handleMouseEvent(event, this._mouseButton);
}); });
this._canvas.addEventListener("mousemove", (event) => { this.canvas.addEventListener("mousemove", (event) => {
if (this._mouseDown) { if (this._mouseDown) {
this._handleMouseEvent(event, this._mouseButton); this._handleMouseEvent(event, this._mouseButton);
} }
}); });
this._canvas.addEventListener("mouseup", (event) => { this.canvas.addEventListener("mouseup", (event) => {
this._mouseDown = false; this._mouseDown = false;
}); });

26
static/css/styles.css
View File

@ -1,3 +1,25 @@
body { html, body {
background-color: #666666; height: 100%;
}
body {
background-color: #1E1E1E;
}
section#main {
position: relative;
width: 100%;
height: 100%;
line-height: 100%;
border: 1px solid #FF0000;
text-align: center;
}
canvas#editor {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
max-width: 100%;
max-height: 100%;
} }