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

tidy

Browse Source
This commit is contained in:
Is Isilon
2015-11-15 18:38:14 +08:00
parent b47dc8f2e1
commit 8c568e0478
4 changed files with 237 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
convertMe.html
+62
View File
@@ -0,0 +1,62 @@
<html>
<head>
<meta charset="utf-8">
<title>Snap.js isometric SVG</title>
</head>
<body>
</body>
<script type="text/javascript" src="../../node_modules/snapsvg/dist/snap.svg.js" ></script>
<script type="text/javascript" src="http://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/jquery/2.1.4/jquery.min.js" ></script>
<!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script> -->
<script src="projectSVG.js"></script>
<script>
var cube1
// redraw cube oninput
var update = function () {
if (cube1) {
cube1.update()
}
}
window.onload = function () {
cube1 = new SvgCube({
rotateX: 45,
topUrl: 'top.svg',
leftUrl: 'left.svg',
frontUrl: 'front.svg',
rightUrl: 'right.svg',
backUrl: 'back.svg',
bottomUrl: 'bottom.svg',
clipCircle: false,
stroke: {
"stroke": 'black', // stroke color for outline
"stroke-width": 0, // outline width
},
size: 256,
});
cube1.drawCube()
}
var module
if (module){
module.exports=SvgCube
}
</script>
</html>
css3_svgCube.html
+24 -12
View File
@@ -47,8 +47,7 @@ var update = function () {
window.onload = function () {
cube1 = new SvgCube({
angle: 45,
flatten: 0.05,
rotateX: 45,
topUrl: 'top.svg',
leftUrl: 'left.svg',
frontUrl: 'front.svg',
@@ -58,7 +57,7 @@ window.onload = function () {
clipCircle: false,
stroke: {
"stroke": 'black', // stroke color for outline
"stroke-width": 2, // outline width
"stroke-width": 0, // outline width
},
size: 256,
});
@@ -68,21 +67,34 @@ window.onload = function () {
gui.remember(cube1.options);
gui.add(cube1.options,'size').min(1).max(512).step(10).onChange(update);
gui.add(cube1.options,'angle').min(0).max(360).step(1).onChange(update);
gui.add(cube1.options,'rotateX').min(0).max(360).step(1).onChange(update);
gui.add(cube1.options,'rotateY').min(0).max(360).step(1).onChange(update);
gui.add(cube1.options,'rotateZ').min(0).max(360).step(1).onChange(update);
gui.add(cube1.options,'perspective').min(0).max(50).step(1).onChange(update);
gui.add(cube1.options,'flatten').min(-1.00).max(2.01).step(0.1).onChange(update);
//gui.add(cube1.options,'perspective').min(0).max(50).step(1).onChange(update);
gui.add(cube1.options,'scaleX').min(0.0).max(2.01).step(0.1).onChange(update);
gui.add(cube1.options,'scaleY').min(-1.00).max(2.01).step(0.1).onChange(update);
gui.add(cube1.options,'scaleZ').min(0.0).max(2.01).step(0.1).onChange(update);
gui.add(cube1.options,'topUrl').onChange(update);
gui.add(cube1.options,'leftUrl').onChange(update);
gui.add(cube1.options,'rightUrl').onChange(update);
var imgUrls = gui.addFolder('Images urls');
imgUrls.add(cube1.options,'topUrl').onChange(update);
imgUrls.add(cube1.options,'leftUrl').onChange(update);
imgUrls.add(cube1.options,'rightUrl').onChange(update);
imgUrls.add(cube1.options,'bottomUrl').onChange(update);
imgUrls.add(cube1.options,'frontUrl').onChange(update);
imgUrls.add(cube1.options,'backUrl').onChange(update);
gui.add(cube1.options.stroke,'stroke-width').min(0.0).max(20).step(1).onChange(update);
gui.add(cube1.options.stroke,'stroke').onChange(update);
gui.add(cube1.options,'topRot').min(0.0).max(90).step(1).onChange(update);
var outline = gui.addFolder('outline');
outline.add(cube1.options.stroke,'stroke-width').min(0.0).max(20).step(1).onChange(update);
outline.add(cube1.options.stroke,'stroke').onChange(update);
outline.add(cube1.options,'borderRadius').min(0).max(128).step(1).onChange(update);
var imageRot = gui.addFolder('Image rotation');
imageRot.add(cube1.options,'topRot').min(0.0).max(360).step(90).onChange(update);
imageRot.add(cube1.options,'bottomRot').min(0.0).max(360).step(90).onChange(update);
imageRot.add(cube1.options,'leftRot').min(0.0).max(360).step(90).onChange(update);
imageRot.add(cube1.options,'rightRot').min(0.0).max(360).step(90).onChange(update);
imageRot.add(cube1.options,'backRot').min(0.0).max(360).step(90).onChange(update);
imageRot.add(cube1.options,'frontRot').min(0.0).max(360).step(90).onChange(update);
projectSVG.js
+138 -80
View File
@@ -1,91 +1,96 @@
'use strict';
// http://cssdeck.com/labs/pure-css-animated-isometric-boxes
try{
try {
var Snap = require('snapsvg');
} catch(e) {};
} catch (e) {};
var SvgCube = function (options) {
// Inputs and options
var defaultOptions = {
angle: 30,
size: 64,
rotateX: 30, // isometric angle
rotateY: 45,
rotateZ: 0,
perspective: 0, // doesn't do anything usefull
scaleX: 1.00,
scaleY: 1.00, // flatten
scaleZ: 1.00, // push face
size: 256,
verbose: false,
// outline
drawOutline: true,
drawShading: true,
clipCircle: false,
drawOutline: false,
drawShading: false,
borderRadius: 0,
stroke: {
"arrow-end": 'none',
"stroke": 'black', // stroke color for outline
"stroke-width": Math.sqrt(options.size)/2, // outline width
"stroke-linecap": "round",
"stroke-linejoin": "round",
"fill": "none",
"stroke-width": 0, // outline width
},
// cube
flatten: 0, // fraction to vertically flatten the cube // scale Y
topUrl: '', // url for image in top of cuve
topRot: 0, // rotation of top image in degrees
topShad: 0, // shading for top
leftUrl: '',
leftRot: 0,
leftShad: 0.1,
leftShad: 0.0,
rightUrl: '',
rightRot: 0,
rightShad: 0.3,
rightShad: 0.0,
backUrl: '',
backRot: 0,
backShad: 0.3,
backShad: 0.0,
bottomUrl: '',
bottomRot: 0,
bottomShad: 0.3,
svgNS: "http://www.w3.org/2000/svg",
padding: 0,
rotateX: 45,
rotateY: 45,
rotateZ: 0,
perspective: 0,
scaleX: 1.00,
scaleZ: 1.00,
bottomShad: 0.0,
frontUrl: '',
frontRot: 0,
frontShad: 0.0,
}
// add defaults, 2 levels deep
options = options || {};
for (var opt in defaultOptions){
if (defaultOptions.hasOwnProperty(opt) && !options.hasOwnProperty(opt)){
for (var opt in defaultOptions) {
if (defaultOptions.hasOwnProperty(opt) && !options.hasOwnProperty(opt)) {
options[opt] = defaultOptions[opt];
}
for (var opt2 in defaultOptions[opt]){
if (defaultOptions[opt].hasOwnProperty(opt2) && !options[opt].hasOwnProperty(opt2)){
options[opt][opt2] = defaultOptions[opt][opt2];
for (var opt2 in defaultOptions[opt]) {
if (defaultOptions[opt].hasOwnProperty(opt2) && !options[opt].hasOwnProperty(opt2)) {
options[opt][opt2] = defaultOptions[opt][opt2];
}
}
}
this.options = options
if (!options.drawOutline){
options.stroke['stroke-width']=0;
// legacy compat
if (options.flatten!==undefined){
options.scaleY=1-options.flatten;
}
if (options.angle!==undefined){
options.rotateX=options.angle;
}
if (!options.drawOutline) {
options.stroke['stroke-width'] = 0;
}
this.init();
}
SvgCube.prototype.init = function(){
SvgCube.prototype.init = function () {
this.angle = this.options.angle
this.rotateX = this.options.rotateX
this.w = this.options.size; // input image width
this.h = this.options.size;
this.f = this.options.flatten
this.f = 1-this.options.scaleY
this.rot = this.angle * Math.PI / 180
this.padding = this.options.padding; // pading fraction
this.rot = this.rotateX * Math.PI / 180
this.padding = this.options.padding||0; // pading fraction
this.cw = this.w; // we will keep same width but change height
this.ch = (1 + this.padding) * (this.h / 2 + this.h * Math.tan(this.rot)) -this.h/2*(1-this.f); //canvas height full
this.ch = this.h*5//(this.h + Math.sqrt(2)*this.h * Math.tan(this.rot)) - this.h / 2 * (this.f); //canvas height full
// create SVG element
var o = this.options;
@@ -93,13 +98,17 @@ SvgCube.prototype.init = function(){
//var style = document.createElement('style');
//this.paper.defs.appendChild(style)
var styleStr = ` <style id="projection">
.cube, .cube .face, .cube .face * {
.cube {
height: ${this.ch}px;
width: ${this.cw}px;
}
.face {
height: ${o.size}px;
width: ${o.size}px;
}
.cube {
position: absolute;
-webkit-transform: translate(${this.cw/2}px,${0*this.ch/2}px) perspective(-${o.perspective}px) rotateX(-${o.angle}deg) rotateY(${o.rotateY}deg) rotateZ(${o.rotateZ}deg) scaleX(${o.scaleX}) scaleY(${1-o.flatten}) 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-transition: 0.25s;
}
@@ -119,6 +128,7 @@ SvgCube.prototype.init = function(){
transform: rotateX(-90deg) translateY(-${o.size/2}px);
transform-origin: top center;
}
.bottom {
transform: rotateX(90deg) translateY(${o.size/2}px);
transform-origin: bottom center;
@@ -126,6 +136,29 @@ SvgCube.prototype.init = function(){
.front {
transform: translateZ(${o.size/2}px);
}
/* custom orientation/rotation settings for each image */
.back>embed{
transform: rotate(${o.backRot}deg);
}
.front>embed{
transform: rotate(${o.frontRot}deg);
}
.right>embed{
transform: rotate(${o.rightRot}deg);
}
.left>embed{
transform: rotate(${o.leftRot}deg);
}
.top>embed{
transform: rotate(${180+o.topRot}deg);
}
.bottom>embed{
transform: rotate(${o.bottomRot}deg);
}
b{
position:absolute;
transition: all 1s linear;
@@ -137,15 +170,15 @@ SvgCube.prototype.init = function(){
border: ${o.stroke['stroke-width']}px solid ${o.stroke.stroke};
}
/* shade in sides. But it seems to either mess up projection or not show */
/* shade in sides */
.wrap {
overflow: hidden;
width: 840px;
width: ${o.size}px;
margin: 0 auto;
}
.tint {
position: absolute; /* works with relative but busts proj */
position: absolute;
}
.tint:before {
@@ -156,21 +189,29 @@ SvgCube.prototype.init = function(){
bottom: 0;
left: 0;
right: 0;
transition: all .3s linear;
}
.tint:hover:before { background: none; }
.tint>.top:before { background: rgba(0,0,0, ${o.topShad}); z-index:-1;}
.tint>.left:before { background: rgba(0,0,0, ${o.leftShad}); z-index:2;}
.tint>.right:before { background: rgba(0,0,0, ${o.rightShad}); z-index:-1;}
.tint>.back:before { background: rgba(0,0,0, ${o.backShad}); }
.tint>.front:before { background: rgba(0,0,0, ${o.frontShad}); }
.tint>.bottom:before { background: rgba(0,0,0, ${o.bottomShad}); }
</style>`
//style.innerHTML= styleStr
.tint.top:before { background: rgba(0,0,0, ${o.topShad});}
.tint.left:before { background: rgba(0,0,0, ${o.leftShad});}
.tint.right:before { background: rgba(0,0,0, ${o.rightShad});}
.tint.back:before { background: rgba(0,0,0, ${o.backShad}); }
.tint.front:before { background: rgba(0,0,0, ${o.frontShad}); }
.tint.bottom:before { background: rgba(0,0,0, ${o.bottomShad}); }
if ($('body>.cube').length===0){
/* curved cube. Need something block seeing through, and also extra faces, 1 px in, so inside looks uniform color. Only work for one main color */
/*.face {
border-radius: ${o.borderRadius}px;
}
.mid {
background-color: #e3e2db; /* make stroke color TODO */
border-radius: 0px;
}*/
</style>`
if ($('body>.cube').length === 0) {
var cube = $('<div class="cube cube2"></div>')
var imageFront = $(`<b width="256" height="256" class="front tint"><embed type="image/svg+xml" src="${o.frontUrl}" class="face"></embed></b>`)
@@ -193,6 +234,21 @@ SvgCube.prototype.init = function(){
$('body').append(cube);
/* TODO these will fill in some color inside in order to allow curved edges without seeing through cube, sues o.stroke.stroke for color */
// var xMid = $(`<div width="256" height="256" class="face mid xMid"></div>`)
// cube.append(xMid);
//
// var yMid = $(`<div width="256" height="256" class="face mid yMid"></b>`)
// cube.append(yMid);
//
// var zMid = $(`<div width="256" height="256" class="face mid zMid"></div>`)
// cube.append(zMid);
$('body').append(cube);
}
$('head>#projection').remove()
@@ -200,8 +256,8 @@ SvgCube.prototype.init = function(){
}
/* draw cube from urls in options and outline according to options */
SvgCube.prototype.drawCube = function (){
/* draw cube from urls in options and outline according to options */
SvgCube.prototype.drawCube = function () {
// var imgS = this.options.size / Math.sqrt(2);
// this.cube = this.paper.g();
@@ -224,34 +280,36 @@ SvgCube.prototype.drawCube = function (){
}
// svg2png
SvgCube.prototype.toPNG = function(){
try{
var dataUrl = svg2png(this.paper.node);
img = document.createElement("img");
document.body.appendChild(img)
img.src=dataUrl
img.id="toPNG"
} catch (e) {console.log(e)};
}
// svg2png
SvgCube.prototype.toPNG2 = function(){
// svg2png
SvgCube.prototype.toPNG = function () {
try {
var dataUrl = svg2png(this.paper.node);
img = document.createElement("img");
document.body.appendChild(img)
img.src=dataUrl
img.id="toPNG"
}
img.src = dataUrl
img.id = "toPNG"
} catch (e) {
console.log(e)
};
}
// svg2png
SvgCube.prototype.update = function(){
//this.paper.remove();
this.init();
this.drawCube();
}
// svg2png
SvgCube.prototype.toPNG2 = function () {
var dataUrl = svg2png(this.paper.node);
img = document.createElement("img");
document.body.appendChild(img)
img.src = dataUrl
img.id = "toPNG"
}
// svg2png
SvgCube.prototype.update = function () {
//this.paper.remove();
this.init();
this.drawCube();
}
try{
module.exports=SvgCube
} catch(e){};
try {
module.exports = SvgCube
} catch (e) {};
webdriver_rasterize.js
+13 -11
View File
@@ -1,3 +1,4 @@
'use strict';
var webdriverio = require('webdriverio');
var path = require('path');
@@ -18,16 +19,24 @@ var config = {
var input = process.argv[2];
console.log('input:',input);
var screenHandler = function(err, screenshot, response) {
if (config.debug){
console.log({err,screenshot,response});
} else if (err){
console.log('saveScreenshot',err);
}
}
globby(input).then(inputs => {
console.log('glob(',input,') =>', inputs);
for (var i=0; i<inputs.length;i++){
var file = inputs[i];
var address = path.join(process.cwd(),file);
var ext = path.extname(file);
var url = 'file://'+path.join(process.cwd(),file);
var outfile = address.replace('.svg','.png');
var outfile = address.replace(ext,'.png');
console.log(file, url,'=>',outfile);
webdriverio
.remote(options)
@@ -38,15 +47,8 @@ globby(input).then(inputs => {
})
.saveScreenshot(
[outfile],
function(err, screenshot, response) {
if (config.debug){
console.log({file,err,screenshot,response});
} else if (err){
'saveScreenshot',console.log(err);
}
}
screenHandler
)
.end();
}
}, this)