174 lines
11 KiB
HTML
174 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>SpriteGen</title>
|
||
<link rel="stylesheet" type="text/css" href="SpriteGen.css">
|
||
</head>
|
||
<body>
|
||
|
||
<div id="codeContainer" ondblclick="this.style.zIndex='-1';this.style.opacity='0'">
|
||
<h2>CODE</h2>
|
||
<h4>Poids : </h4>
|
||
<p></p>
|
||
</div>
|
||
|
||
<input type="file" id="fileChooser" onchange="Test(this.files[0].name);restart();">
|
||
<img src="Rat.png" id="bordel" style="border: 5px solid blue;">
|
||
<div class="container" >
|
||
<canvas id="backGround"></canvas>
|
||
<canvas id="foreGround"></canvas>
|
||
<canvas id="activeLayer"></canvas>
|
||
</div>
|
||
|
||
<button onclick="sketch.push(new coord(999,0));draw();">Séparer</button>
|
||
<button onclick="restart()">Recommencer</button>
|
||
<button onclick="ereaser()">Effacer le dernier point</button>
|
||
<button onclick="codeGenerator()">Générer le code</button>
|
||
<input type="range" id="zoom" min="2" max="30" value="10" onchange="zoom(this.value)" name="zoom">
|
||
<pre>SpriteGen, conçu par Drak, 2018.</pre>
|
||
|
||
<script type="text/javascript" src="Bresenham.js"></script>
|
||
<script type="text/javascript">
|
||
var consoleOutput = document.getElementsByTagName('pre')[0];
|
||
|
||
var bg = document.getElementById('backGround');
|
||
var bgCtx = bg.getContext('2d');
|
||
|
||
var fg = document.getElementById('foreGround');
|
||
var fgCtx = fg.getContext('2d');
|
||
|
||
var al = document.getElementById('activeLayer');
|
||
var alCtx = al.getContext('2d');
|
||
|
||
var colorList = ['BlueViolet','Blue','Brown','CadetBlue','Crimson', 'DarkBlue', 'DarkRed', 'DarkGreen', 'DarkOrchid', 'DarkSlateBlue', 'DimGray', 'HotPink', 'MediumPurple', 'Olive', 'Yellow'];
|
||
var index = 0;
|
||
|
||
var cnvsCont = document.getElementsByClassName('container')[0];
|
||
|
||
var lol = document.getElementById('bordel');
|
||
|
||
function coord(x, y) {
|
||
this.x = x;
|
||
this.y = y;
|
||
}
|
||
|
||
var sketch = [new coord(999, 0)];
|
||
|
||
function Test(value) {
|
||
lol.src = value;
|
||
lol.onload = function(){
|
||
bg.width = lol.width;
|
||
bg.height = lol.height;
|
||
fg.width = lol.width;
|
||
fg.height = lol.height;
|
||
al.width = lol.width;
|
||
al.height = lol.height;
|
||
cnvsCont.style.height = (10*lol.height) + "px";
|
||
cnvsCont.style.width = (10*lol.width) + "px";
|
||
document.getElementById('zoom').value = 10;
|
||
bgCtx.drawImage(lol,0,0);
|
||
}
|
||
}
|
||
|
||
al.onmousemove = function(event) {
|
||
var cPos = al.getBoundingClientRect();
|
||
var factor = document.getElementById('zoom').value;
|
||
var x = Math.ceil((event.clientX - cPos.left)/factor );
|
||
var y = Math.ceil((event.clientY - cPos.top)/factor );
|
||
consoleOutput.innerHTML = x + ", " + y;
|
||
alCtx.clearRect(0,0,lol.width, lol.height);
|
||
alCtx.fillStyle="red";
|
||
var index = sketch.length-1;
|
||
if (sketch[index].x === 999) {
|
||
plot(x-1, y-1, alCtx);
|
||
} else {
|
||
plotLine(sketch[index].x-1, sketch[index].y-1, x-1, y-1, alCtx);
|
||
}
|
||
}
|
||
|
||
al.onclick = function(event) {
|
||
var cPos = al.getBoundingClientRect();
|
||
var factor = document.getElementById('zoom').value;
|
||
var x = Math.ceil((event.clientX - cPos.left)/factor );
|
||
var y = Math.ceil((event.clientY - cPos.top)/factor );
|
||
var newPoint = new coord(x , y);
|
||
sketch.push(newPoint);
|
||
draw();
|
||
consoleOutput.innerHTML = "Nombre de points : " + (sketch.length-1);
|
||
}
|
||
|
||
function zoom(factor) {
|
||
cnvsCont.style.height = (factor*lol.height) + "px";
|
||
cnvsCont.style.width = (factor*lol.width) + "px";
|
||
}
|
||
|
||
function draw() {
|
||
fgCtx.clearRect(0,0,lol.width,lol.height);
|
||
fgCtx.fillStyle=colorList[index];
|
||
var a;
|
||
index = 0;
|
||
fgCtx.fillStyle=colorList[index]
|
||
for ( a = 1; a < sketch.length; a++ ) {
|
||
if (sketch[a].x === 999) {
|
||
index = (index + 1)%colorList.length;
|
||
fgCtx.fillStyle=colorList[index];
|
||
} else {
|
||
if (sketch[a-1].x === 999) {
|
||
plot(sketch[a].x-1, sketch[a].y-1, fgCtx);
|
||
} else {
|
||
plotLine(sketch[a-1].x-1, sketch[a-1].y-1, sketch[a].x-1, sketch[a].y-1, fgCtx);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
function ereaser() {
|
||
if (sketch.length > 1) {
|
||
sketch.pop();
|
||
draw();
|
||
} else {consoleOutput.innerHTML = "Il n'y a plus de point à effacer !";}
|
||
}
|
||
|
||
function codeGenerator() {
|
||
alCtx.clearRect(0,0,lol.width, lol.height);
|
||
var winCode = document.getElementById('codeContainer');
|
||
winCode.style.zIndex = "2";winCode.style.opacity = "1";
|
||
winCode = winCode.lastElementChild;
|
||
console.log(winCode); var tempY;
|
||
winCode.innerHTML = "{";
|
||
for (var a = 1 ; a<=sketch.length ; a++) {
|
||
console.log(a);
|
||
if (sketch[a] != undefined) {
|
||
if (sketch[a].x === 999) {
|
||
winCode.innerHTML += "9, ";
|
||
} else {
|
||
winCode.innerHTML += sketch[a].x + ".";
|
||
tempY = lol.height-sketch[a].y;
|
||
if (tempY<10) { winCode.innerHTML += "0";}
|
||
winCode.innerHTML += tempY + ", ";
|
||
}
|
||
}
|
||
}
|
||
winCode.innerHTML = winCode.innerHTML.slice(0,winCode.innerHTML.length-2);
|
||
winCode.innerHTML = winCode.innerHTML.replace(/.00,/g, ",");
|
||
winCode.innerHTML = winCode.innerHTML.replace(/0,/g, ",");
|
||
winCode.parentElement.getElementsByTagName('h4')[0].innerHTML = "Size : " + (winCode.innerHTML.length - sketch.length) + " octets";
|
||
winCode.innerHTML += " -> List 7";
|
||
}
|
||
|
||
function restart() {
|
||
if (sketch.length > 1) {
|
||
if (confirm('Effacer tous les points ?') === true) {
|
||
sketch = [new coord(999, 0)];
|
||
draw();
|
||
}
|
||
}
|
||
}
|
||
|
||
Test("Rat.png");
|
||
|
||
|
||
</script>
|
||
|
||
</body>
|
||
</html> |