wassname/svg2cube
1
0
Fork 0
mirror of https://github.com/wassname/svg2cube.git synced 2026-08-07 11:29:39 +08:00
Code Issues Packages Projects Releases Wiki Activity

example

Browse Source
This commit is contained in:
gitea
2016-01-19 08:47:52 +08:00
parent 7fe9a3cb64
commit ebe72ec9aa
2 changed files with 64 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+63 -25
View File
@@ -3,50 +3,82 @@
<head>
<meta charset="utf-8">
<title>svg2cube</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"></link>
<style>
.thumbnail {
height: 15em;
}
.center-block
{
text-align:center;
display:block;
}
#svg2cube {
display: inline-block;
width: 512px;
}
.thumbnail {
height: 10em;
}
.center-block {
text-align: center;
display: block;
}
#svg2cube {
}
</style>
</head>
<body class="center-block">
<h1>svg2cube - demo</h1>
<body class="container"><div class="row"><div class="col-sm-6"><div class="">
<h1 class=" center-block">svg2cube</h1>
<div>
<p>Fold a svg panel into a cube and take images at isometric angles. </p>
<p>The buttons allow you to try different parameters. </p>
<p>The panel on the right allows you to try different parameters. </p>
</div>
<div class="row"><div class="col-sm-6 center-block">
<h2>Input</h2>
<img src="inputs/panels.svg" class="thumbnail"></img>
<h2>Rendered output</h2>
<img src="images/result.png" class="thumbnail" ></img>
<img src="inputs/panels.svg" class="thumbnail center-block"></img>
<br>
</div><div class="col-sm-6 center-block">
<h2>Output</h2>
<img src="images/result.png" class="thumbnail center-block"></img>
<br></div></div>
<h2>Real time output</h2>
<div id="loading"><h2>Loading...<h2></div>
<div id="loading">
<h2>Loading...<h2></div>
<div id="svg2cube"></div>
</div></div></div>
</body>
<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="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="svg2cube-frontend.js"></script>
<script>
function has3d() {
if (!window.getComputedStyle) {
return false;
}
var el = document.createElement('p'),
has3d,
transforms = {
'webkitTransform':'-webkit-transform',
'OTransform':'-o-transform',
'msTransform':'-ms-transform',
'MozTransform':'-moz-transform',
'transform':'transform'
};
// Add it to the body to get the computed style.
document.body.insertBefore(el, null);
for (var t in transforms) {
if (el.style[t] !== undefined) {
el.style[t] = "translate3d(1px,1px,1px)";
has3d = window.getComputedStyle(el).getPropertyValue(transforms[t]);
}
}
document.body.removeChild(el);
return (has3d !== undefined && has3d.length > 0 && has3d !== "none");
}
</script>
<script>
var cube1
@@ -60,6 +92,12 @@
window.onload = function() {
if (!has3d()){
var warning = $('<h2>Sorry <a href="http://caniuse.com/#feat=transforms3d">your browser does not support css-3d</a></h2>')
$('#svg2cube').append(warning);
}
cube1 = new SvgCube.SvgCube('inputs/panels.svg', {
rotateX: 45,
clipCircle: false,
@@ -67,7 +105,7 @@
"stroke": 'black', // stroke color for outline
"stroke-width": 0, // outline width
},
size: 128,
size: 256,
});
var gui = new dat.GUI();
svg2cube-frontend.js
+1 -1
View File
@@ -93,7 +93,7 @@
var o = this.options;
/** Write sides if they have not already been written **/
if ($('body>.cube').length === 0) {
if ($('body .cube').length === 0) {
var cube = $('<div class="cube cube2"></div>');
var imageFront = $('' +