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) {
this.currentImageDiv = currentImageDiv;
}
public Load() {
this.currentImageDiv.addEventListener('onmousedown', this.clickOnImage);
this.currentImageDiv.addEventListener('onmouseover', this.hoverOverImage);
}
// public Load() {
// this.currentImageDiv.addEventListener('onmousedown', this.clickOnImage);
// }
private hoverOverImage() {
console.log('hovering over image');
}

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

@ -1,30 +1,32 @@
div {
display: block;
color: blue;
color: #101e24;
font-family: "Arial", Helvetica, sans-serif;
}
#instructions {
font-size: 12px;
margin: auto;
width: 50%;
border: 1px solid blue;
padding: 16px;
border: 2px solid #6b7578;
padding: 1px;
text-align: center;
}
.instruction {
display: block;
color: blue;
color: #101e24;
font-family: "Arial", Helvetica, sans-serif;
}
.warning {
display: block;
color: red;
color: #520012;
font-family: "Arial", Helvetica, sans-serif;
}
main {
width: 500px;
body {
background-color: #818485;
}
#dropZone {
@ -33,11 +35,23 @@ main {
}
#currentImage {
width: 400px;
height: 400px;
width: 50%;
height: 50%;
-ms-interpolation-mode: nearest-neighbor;
image-rendering: pixelated;
}
#currentImage img {
max-width: 100%;
height: auto;
object-position: center top;
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>
<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="frameNumber" class="warning">
@ -19,9 +22,6 @@
<img alt="">
</div>
<div id="instructions" class="instruction">
<p>Drag images onto the page to upload them. Advance frames with arrow keys</p>
</div>
</div>
<script src="bundle.js"></script>