MoonsideGames
/
AnimationTool
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

nicer colors. Crisp rendering

master
Beau Blyth 2019-09-26 15:36:27 -07:00
parent 6eba55c5c9
commit 70d0828125
3 changed files with 31 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/canvas_handler.ts
View File

@ -4,14 +4,13 @@ export class CanvasHandler {
constructor(currentImageDiv: HTMLElement) { constructor(currentImageDiv: HTMLElement) {
this.currentImageDiv = currentImageDiv; this.currentImageDiv = currentImageDiv;
}
public Load() {
this.currentImageDiv.addEventListener('onmousedown', this.clickOnImage); this.currentImageDiv.addEventListener('onmousedown', this.clickOnImage);
this.currentImageDiv.addEventListener('onmouseover', this.hoverOverImage); this.currentImageDiv.addEventListener('onmouseover', this.hoverOverImage);
} }
// public Load() {
// this.currentImageDiv.addEventListener('onmousedown', this.clickOnImage);
// }
private hoverOverImage() { private hoverOverImage() {
console.log('hovering over image'); console.log('hovering over image');
} }

36
dist/assets/stylesheets/main.css vendored
View File

@ -1,30 +1,32 @@
div { div {
display: block; display: block;
color: blue; color: #101e24;
font-family: "Arial", Helvetica, sans-serif; font-family: "Arial", Helvetica, sans-serif;
} }
#instructions { #instructions {
font-size: 12px;
margin: auto; margin: auto;
width: 50%; width: 50%;
border: 1px solid blue; border: 2px solid #6b7578;
padding: 16px; padding: 1px;
text-align: center;
} }
.instruction { .instruction {
display: block; display: block;
color: blue; color: #101e24;
font-family: "Arial", Helvetica, sans-serif; font-family: "Arial", Helvetica, sans-serif;
} }
.warning { .warning {
display: block; display: block;
color: red; color: #520012;
font-family: "Arial", Helvetica, sans-serif; font-family: "Arial", Helvetica, sans-serif;
} }
main { body {
width: 500px; background-color: #818485;
} }
#dropZone { #dropZone {
@ -33,11 +35,23 @@ main {
} }
#currentImage { #currentImage {
width: 400px; width: 50%;
height: 400px; height: 50%;
-ms-interpolation-mode: nearest-neighbor;
image-rendering: pixelated;
} }
#currentImage img { #currentImage img {
max-width: 100%; object-position: center top;
height: auto; width: 256;
height: 256;
min-width: 256;
min-height: 256;
-ms-interpolation-mode: nearest-neighbor;
image-rendering: pixelated;
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
} }

6
dist/index.html vendored
View File

@ -9,6 +9,9 @@
<body> <body>
<div id="dropZone"> <div id="dropZone">
<div id="instructions" class="instruction">
<p>Drag images onto the page to upload them. Advance frames with arrow keys</p>
</div>
<div id="output"></div> <div id="output"></div>
<div id="frameNumber" class="warning"> <div id="frameNumber" class="warning">
@ -19,9 +22,6 @@
<img alt=""> <img alt="">
</div> </div>
<div id="instructions" class="instruction">
<p>Drag images onto the page to upload them. Advance frames with arrow keys</p>
</div>
</div> </div>
<script src="bundle.js"></script> <script src="bundle.js"></script>