wassname/svg2cube
1
0
Fork 0
mirror of https://github.com/wassname/svg2cube.git synced 2026-06-27 17:17:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

example

Browse Source
This commit is contained in:
Is Isilon
2016-01-19 08:22:53 +08:00
parent 077f90df8a
commit 7fe9a3cb64
5 changed files with 42 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
images/result.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 59 KiB

index.html
+26 -6
View File
@@ -3,9 +3,23 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>svg2cube</title> <title>svg2cube</title>
<style>
.thumbnail {
height: 15em;
}
.center-block
{
text-align:center;
display:block;
}
#svg2cube {
display: inline-block;
width: 512px;
}
</style>
</head> </head>
<body> <body class="center-block">
<h1>svg2cube - demo</h1> <h1>svg2cube - demo</h1>
@@ -15,16 +29,22 @@
<p>The buttons allow you to try different parameters. </p> <p>The buttons allow you to try different parameters. </p>
</div> </div>
<img src="inputs/panels.svg" style="height: 15em;"></img>
<h2>Input</h2>
<img src="inputs/panels.svg" class="thumbnail"></img>
<h2>Rendered output</h2>
<img src="images/result.png" class="thumbnail" ></img>
<p id="loading">Loading...</p> <h2>Real time output</h2>
<div id="loading"><h2>Loading...<h2></div>
<div id="svg2cube"></div>
</body> </body>
<script type="text/javascript" src="/cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.min.js"></script>
<script type="text/javascript" src="/cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="svg2cube-frontend.js"></script> <script src="svg2cube-frontend.js"></script>
@@ -47,7 +67,7 @@
"stroke": 'black', // stroke color for outline "stroke": 'black', // stroke color for outline
"stroke-width": 0, // outline width "stroke-width": 0, // outline width
}, },
size: 256, size: 128,
}); });
var gui = new dat.GUI(); var gui = new dat.GUI();
readme.md
+9 -3
View File
@@ -1,9 +1,15 @@
svg2cube svg2cube
Generate isometric game sprites. Inputs an svg panel and it's folded into a cube and rendered from any angle. Generate isometric game sprites. Inputs an svg panel and it's folded into a cube and rendered from any angle. [Example hosted here](https://wassname.github.io/svg2cube/).
# Quickstart # Quickstart
TODO
```bash
git clone git@github.com:wassname/svg2cube.git
cd svg2cube
npm i
node svg2cube-cli.js inputs/panels.svg
```
# Screenshots # Screenshots
## Input: ## Input:
@@ -22,7 +28,7 @@ TODO
First try it using the supplied panel. From the command line: First try it using the supplied panel. From the command line:
```sh ```sh
npm svg2cube-cli.js inputs/panels.svg node svg2cube-cli.js inputs/panels.svg
``` ```
Or in node: Or in node:
svg2cube-frontend.js
+6 -4
View File
@@ -156,7 +156,10 @@
'</b>'); '</b>');
cube.append(imageBottom); cube.append(imageBottom);
$('body').append(cube); var target=$('#svg2cube');
if (!target){target=$('body');}
target.append(cube);
} }
// Now we generate some css to put everything in good positions // Now we generate some css to put everything in good positions
@@ -165,14 +168,14 @@
'<style id="projection"> ' + '<style id="projection"> ' +
' .cube { ' + ' .cube { ' +
' height: ' + this.ch + 'px; ' + ' height: ' + this.ch + 'px; ' +
' width: ' + this.cw + 'px; ' + ' width: ' + this.cw*2 + 'px; ' +
' } ' + ' } ' +
' .face { ' + ' .face { ' +
' height: ' + o.size + 'px; ' + ' height: ' + o.size + 'px; ' +
' width: ' + o.size + 'px; ' + ' width: ' + o.size + 'px; ' +
' } ' + ' } ' +
' .cube { ' + ' .cube { ' +
' position: absolute; ' + ' position: relative; ' +
' -webkit-transform: translate(' + this.cw / 2 + 'px,' + 0 * this.ch / 2 + 'px) perspective(-' + o.perspective + 'px) rotateX(-' + o.rotateX + 'deg) rotateY(' + o.rotateY + 'deg) rotateZ(' + o.rotateZ + 'deg) scaleX(' + o.scaleX + ') scaleY(' + o.scaleY + ') scaleZ(' + o.scaleZ + '); ' + ' -webkit-transform: translate(' + this.cw / 2 + 'px,' + 0 * this.ch / 2 + 'px) perspective(-' + o.perspective + 'px) rotateX(-' + o.rotateX + 'deg) rotateY(' + o.rotateY + 'deg) rotateZ(' + o.rotateZ + 'deg) scaleX(' + o.scaleX + ') scaleY(' + o.scaleY + ') scaleZ(' + o.scaleZ + '); ' +
' -webkit-transform-style: preserve-3d; ' + ' -webkit-transform-style: preserve-3d; ' +
' -webkit-transition: ' + transitions + 's; ' + ' -webkit-transition: ' + transitions + 's; ' +
@@ -297,6 +300,5 @@
exports.SvgCube.prototype.update = function () { exports.SvgCube.prototype.update = function () {
this.init(); this.init();
console.log(this.getBounds());
}; };
})(typeof exports === 'undefined' ? this['SvgCube'] = {} : exports); })(typeof exports === 'undefined' ? this['SvgCube'] = {} : exports);
svg2cube.js
+1 -1
View File
@@ -10,7 +10,7 @@ var gm = require('gm');
var chromedriver = require('chromedriver'); var chromedriver = require('chromedriver');
var childProcess = require('child_process'); var childProcess = require('child_process');
var SvgCube = require('./svgcube.js'); var SvgCube = require('./svg2cube.js');
var debug = process.env.DEBUG || false; var debug = process.env.DEBUG || false;