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

4
index.html
View File

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

24
src/bittmappeditor.ts
View File

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

24
static/css/styles.css
View File

@ -1,3 +1,25 @@
html, body {
height: 100%;
}
body {
background-color: #666666;
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%;
}