some style changes
parent
29bc4cefa3
commit
31d1e277d2
|
|
@ -25,18 +25,25 @@ export class CanvasHandler {
|
|||
this.imageElement = imageElement;
|
||||
this.orginInfo = originInfo;
|
||||
|
||||
this.ResizeCanvas();
|
||||
this.ResizeCanvas(0, 0);
|
||||
this.UpdateCanvasDataSize();
|
||||
const canvasContext: CanvasRenderingContext2D = this.canvasImage.getContext('2d')!;
|
||||
canvasContext.fillRect(0, 0, this.targetImageSize, this.targetImageSize);
|
||||
canvasContext.imageSmoothingEnabled = false;
|
||||
}
|
||||
|
||||
public ResizeCanvas() {
|
||||
public ResizeCanvas(width: number, height: number) {
|
||||
// get image ratio, then scale default width by it
|
||||
const hwratio = this.imageElement.height / this.imageElement.width;
|
||||
const newWidth = this.targetImageSize / hwratio;
|
||||
const newHeight = this.targetImageSize;
|
||||
const hwratio = height / width;
|
||||
|
||||
let newWidth = this.targetImageSize / hwratio;
|
||||
let newHeight = this.targetImageSize;
|
||||
|
||||
if (newWidth > 600) {
|
||||
newWidth = 600;
|
||||
newHeight = 600 * hwratio;
|
||||
}
|
||||
|
||||
this.canvasImage.width = newWidth;
|
||||
this.canvasImage.height = newHeight;
|
||||
this.UpdateCanvasDataSize();
|
||||
|
|
|
|||
|
|
@ -293,7 +293,11 @@ export class Page {
|
|||
this.frameHandler.StopPlayingAnimation();
|
||||
this.frameHandler.TogglePlayingAnimation();
|
||||
|
||||
this.canvasHandler.ResizeCanvas();
|
||||
const imageElement = new Image();
|
||||
imageElement.src = filenames[0];
|
||||
imageElement.onload = () => {
|
||||
this.canvasHandler.ResizeCanvas(imageElement.width, imageElement.height);
|
||||
};
|
||||
|
||||
this.frameHandler.ConstructFrameUI();
|
||||
};
|
||||
|
|
|
|||
|
|
@ -32,8 +32,42 @@ div {
|
|||
}
|
||||
|
||||
.spriteCanvas {
|
||||
border: 1px solid $main-border-color;
|
||||
padding: 0;
|
||||
min-width: 200px;
|
||||
border: 1px solid;
|
||||
border-style: dashed;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#top {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
#settings {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
width: 20%;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.settingsItem {
|
||||
margin: 12px;
|
||||
padding: 4px;
|
||||
|
||||
text-align: center;
|
||||
|
||||
border: 1px solid;
|
||||
border-radius: 5px;
|
||||
|
||||
input {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.borderbox {
|
||||
|
|
@ -56,7 +90,10 @@ div {
|
|||
#frameViewer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.frame {
|
||||
flex: 1;
|
||||
width: 32px;
|
||||
|
|
|
|||
|
|
@ -6,38 +6,48 @@
|
|||
<link rel="icon" href="/favicon.ico">
|
||||
</head>
|
||||
<body>
|
||||
<div id="dropZone" class="center">
|
||||
<!-- canvas -->
|
||||
<div id="canvasStyle">
|
||||
<canvas id="canvasImage" class="spriteCanvas" alt=""></canvas>
|
||||
<div id="frameNumber"></div>
|
||||
</div>
|
||||
<div class="borderbox">
|
||||
<div id="frameViewer"></div>
|
||||
</div>
|
||||
<div id="settings" class="borderbox">
|
||||
Name: <input type = "text" id="filename"><br>
|
||||
Fps: <input type="number" id="framerate" class="numberinput"><br>
|
||||
<input type="checkbox" id="looping" > Looping <br>
|
||||
</div>
|
||||
<div class="borderbox">
|
||||
<button id="addpin">Create New Pin</button>
|
||||
<div id="pinContainer" class="pinContainer" >
|
||||
<div class="pinButtonContainer" id="originPin"><p>Origin</p><button id="selectOrigin">Select</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id = "info">
|
||||
<div class="instruction">
|
||||
<p>Drag images onto the page to upload them</p>
|
||||
<p><b>Arrow Keys</b> - Advance frames</p>
|
||||
<p><b>Spacebar</b> - Play/Pause Animation</p>
|
||||
<p><b>S</b> - Save</p>
|
||||
</div>
|
||||
<div id="outputMessage"></div>
|
||||
</div>
|
||||
<div id="dropZone" class="center">
|
||||
<div id="top">
|
||||
<div id="canvasStyle">
|
||||
<canvas id="canvasImage" class="spriteCanvas" alt=""></canvas>
|
||||
<div id="frameNumber"></div>
|
||||
</div>
|
||||
<div id="settings">
|
||||
<div class="settingsItem">
|
||||
<div class="label">Name</div>
|
||||
<input type="text" id="filename">
|
||||
</div>
|
||||
<div class="settingsItem">
|
||||
<div class="label">FPS</div>
|
||||
<input type="number" value="30" id="framerate">
|
||||
</div>
|
||||
<div class="settingsItem">
|
||||
<div class="label">Looping</div>
|
||||
<input type="checkbox" id="looping">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="borderbox">
|
||||
<div id="frameViewer"></div>
|
||||
</div>
|
||||
<div class="borderbox">
|
||||
<button id="addpin">Create New Pin</button>
|
||||
<div id="pinContainer" class="pinContainer" >
|
||||
<div class="pinButtonContainer" id="originPin"><p>Origin</p><button id="selectOrigin">Select</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id = "info">
|
||||
<div class="instruction">
|
||||
<p>Drag images onto the page to upload them</p>
|
||||
<p><b>Arrow Keys</b> - Advance frames</p>
|
||||
<p><b>Spacebar</b> - Play/Pause Animation</p>
|
||||
<p><b>S</b> - Save</p>
|
||||
</div>
|
||||
<div id="outputMessage"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="bundle.js"></script>
|
||||
<script src="bundle.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue