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

options

Browse Source
This commit is contained in:
gitea
2016-01-19 09:49:41 +08:00
parent e58a96bbca
commit 5f7b3476e8
2 changed files with 39 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
readme.md
+15 -2
View File
@@ -53,8 +53,21 @@ var svg2cube = require('./svg2cube.js');
svg2cube('inputs/panels.svg',{rotateY: 45, size:256});
```
Now create your own panel and generate your own sprites. Available options are
[here for now](https://github.com/wassname/svg2cube/blob/master/svg2cube-frontend.js#L10).
Now create your own panel and generate your own sprites. Primary options are:
```js
{
rotateX: 30, // isometric perspective in degrees
rotateY: 45,
rotateZ: 0,
scaleX: 1.00,
scaleY: 1.00, // flatten your cube from the top
scaleZ: 1.00, // distort cube by pushing push face back
drawOutline: false,
drawShading: false
}
```
All available options are [in svg2cube-frontend.js around line 10 ](https://github.com/wassname/svg2cube/blob/master/svg2cube-frontend.js#L10).
# Screenshots
svg2cube-frontend.js
+24 -25
View File
@@ -6,18 +6,15 @@
(function (exports) {
exports.SvgCube = function (svgPanel, options) {
// Inputs and options
this.defaultOptions = {
rotateX: 30, // isometric perspective
rotateX: 30, // isometric perspective in degrees
rotateY: 45,
rotateZ: 0,
perspective: 0, // doesn't do anything usefull
scaleX: 1.00,
scaleY: 1.00, // flatten you cube from the top
scaleY: 1.00, // flatten your cube from the top
scaleZ: 1.00, // distort cube by pushing push face back
size: 400, // size of one side
@@ -26,7 +23,7 @@
// outline
drawOutline: false,
drawShading: false,
borderRadius: 0, // in px
borderRadius: 2, // in px
stroke: {
"stroke": 'black', // stroke color for outline
"stroke-width": 0, // outline width in px
@@ -41,8 +38,8 @@
frontRot: 0,
topShad: 0, // shading for top, float from 0 to 1
leftShad: 0.0,
rightShad: 0.0,
leftShad: 0.3,
rightShad: 0.1,
backShad: 0.0,
bottomShad: 0.0,
frontShad: 0.0,
@@ -55,6 +52,8 @@
frontRender: true,
backRender: true
perspective: 0, // doesn't do anything usefull
};
// add defaults to input options, looking 2 levels deep
@@ -117,7 +116,7 @@
' <image x="-512" y="-256" width="1024" height="768" xlink:href="' + o.svgPanel + '" />' +
'</svg>' +
'</b>');
if (this.options.frontRender){
if (this.options.frontRender) {
cube.append(imageFront);
}
@@ -129,7 +128,7 @@
' <image x="-256" y="-256" width="1024" height="768" xlink:href="' + o.svgPanel + '" />' +
'</svg>' +
'</b>');
if (this.options.leftRender){
if (this.options.leftRender) {
cube.append(imageL);
}
@@ -141,7 +140,7 @@
' <image x="-768" y="-256" width="1024" height="768" xlink:href="' + o.svgPanel + '" />' +
' </svg>' +
'</b>');
if (this.options.rightRender){
if (this.options.rightRender) {
cube.append(imageRight);
}
@@ -153,7 +152,7 @@
' <image x="-512" y="0" width="1024" height="768" xlink:href="' + o.svgPanel + '" />' +
'</svg>' +
'</b>');
if (this.options.topRender){
if (this.options.topRender) {
cube.append(imageTop);
}
@@ -165,7 +164,7 @@
' <image x="0" y="-256" width="1024" height="768" xlink:href="' + o.svgPanel + '" />' +
'</svg>' +
'</b>');
if (this.options.backRender){
if (this.options.backRender) {
cube.append(imageBack);
}
@@ -177,15 +176,15 @@
' <image x="0" y="0" width="1024" height="768" xlink:href="' + o.svgPanel + '" />' +
'</svg>' +
'</b>');
if (this.options.bottomRender){
if (this.options.bottomRender) {
cube.append(imageBottom);
}
// get destination dom
var target=$('#svg2cube');
if (!target){
target=$('body');
var target = $('#svg2cube');
if (!target) {
target = $('body');
}
// remove old sides
@@ -200,7 +199,7 @@
'<style id="projection"> ' +
' .cube { ' +
' height: ' + this.ch + 'px; ' +
' width: ' + this.cw*2 + 'px; ' +
' width: ' + this.cw * 2 + 'px; ' +
' } ' +
' .face { ' +
' height: ' + o.size + 'px; ' +
@@ -260,7 +259,7 @@
' /* outline */ ' +
' .face { ' +
' box-sizing: border-box; ' +
' border: ' + o.drawOutline*o.stroke['stroke-width'] + 'px solid ' + o.stroke.stroke + '; ' +
' border: ' + o.drawOutline * o.stroke['stroke-width'] + 'px solid ' + o.stroke.stroke + '; ' +
' } ' +
' /* shade in sides */ ' +
' .wrap { ' +
@@ -281,12 +280,12 @@
' right: 0; ' +
' } ' +
' .tint:hover:after { background: none; } ' +
' .tint.top:after { background: rgba(0,0,0, ' + o.drawShading*o.topShad + ');} ' +
' .tint.left:after { background: rgba(0,0,0, ' + o.drawShading*o.leftShad + ');} ' +
' .tint.right:after { background: rgba(0,0,0, ' + o.drawShading*o.rightShad + ');} ' +
' .tint.back:after { background: rgba(0,0,0, ' + o.drawShading*o.backShad + '); } ' +
' .tint.front:after { background: rgba(0,0,0, ' + o.drawShading*o.frontShad + '); } ' +
' .tint.bottom:after { background: rgba(0,0,0, ' + o.drawShading*o.bottomShad + '); } ' +
' .tint.top:after { background: rgba(0,0,0, ' + o.drawShading * o.topShad + ');} ' +
' .tint.left:after { background: rgba(0,0,0, ' + o.drawShading * o.leftShad + ');} ' +
' .tint.right:after { background: rgba(0,0,0, ' + o.drawShading * o.rightShad + ');} ' +
' .tint.back:after { background: rgba(0,0,0, ' + o.drawShading * o.backShad + '); } ' +
' .tint.front:after { background: rgba(0,0,0, ' + o.drawShading * o.frontShad + '); } ' +
' .tint.bottom:after { background: rgba(0,0,0, ' + o.drawShading * o.bottomShad + '); } ' +
' /* 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; ' +