diff --git a/2c_css_svgs.css b/2c_css_svgs.css deleted file mode 100644 index 271b9f1..0000000 --- a/2c_css_svgs.css +++ /dev/null @@ -1,43 +0,0 @@ - -.grass { - background-image: url(2c_css_svgs.png); - background-position: 0px 0px; - width: 256px; - height: 256px; -} - -.manual_good_30 { - background-image: url(2c_css_svgs.png); - background-position: 0px -256px; - width: 1128px; - height: 1128px; -} - -.manualcss_v2 { - background-image: url(2c_css_svgs.png); - background-position: 0px -431px; - width: 1128px; - height: 1128px; -} - -.manualcss_v2c { - background-image: url(2c_css_svgs.png); - background-position: 0px -606px; - width: 1128px; - height: 1128px; -} - -.manualcss_v2d { - background-image: url(2c_css_svgs.png); - background-position: 0px -1734px; - width: 1128px; - height: 1128px; -} - -.manuallcss_2b { - background-image: url(2c_css_svgs.png); - background-position: 0px -2862px; - width: 1128px; - height: 1128px; -} - diff --git a/back.svg b/back.svg index e1b67bc..bed89f9 100644 --- a/back.svg +++ b/back.svg @@ -1,2384 +1,5 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - image/svg+xml - - - - - - - - - + + diff --git a/bottom.svg b/bottom.svg index e1b67bc..fda87d1 100644 --- a/bottom.svg +++ b/bottom.svg @@ -1,2384 +1,11 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - image/svg+xml - - - - - - - - - + + + + + + diff --git a/convert.sh b/convert.sh deleted file mode 100644 index b595bcd..0000000 --- a/convert.sh +++ /dev/null @@ -1,6 +0,0 @@ -cairosvg manual_good_30.svg -o manual_good_30.png - - -for i in *.svg; do cairosvg $i -o `echo $i | sed -e 's/\.svg$/1.png/'`; done -for i in *.svg; do rsvg-convert -a $i -o `echo $i | sed -e 's/\.svg$/2.png/'`; done -for i in *.svg; do phantomjs rasterise.js $i `echo $i | sed -e 's/\.svg$/3.png/'`; done diff --git a/test2.html b/css3_svgCube.html similarity index 64% rename from test2.html rename to css3_svgCube.html index 8895906..ddc8d6c 100644 --- a/test2.html +++ b/css3_svgCube.html @@ -6,7 +6,7 @@
- +

This uses a css3 to make an SVG cube from a SVG panel. The buttons allow you to try different parameters. The front, left, etc svg's are just linked to panel.svg

@@ -14,6 +14,7 @@ + @@ -47,18 +48,17 @@ window.onload = function () { cube1 = new SvgCube({ angle: 45, - flatten: 0, + flatten: 0.05, topUrl: 'top.svg', - leftUrl: 'front.svg', + leftUrl: 'left.svg', + frontUrl: 'front.svg', rightUrl: 'right.svg', + backUrl: 'back.svg', + bottomUrl: 'bottom.svg', clipCircle: false, stroke: { - "arrow-end": 'none', "stroke": 'black', // stroke color for outline "stroke-width": 2, // outline width - "stroke-linecap": "round", - "stroke-linejoin": "round", - "stroke-opacity": 0.5, }, size: 256, }); @@ -66,19 +66,24 @@ window.onload = function () { var gui = new dat.GUI(); gui.remember(cube1.options); - gui.add(cube1.options,'angle').min(0.00).max(90).step(1).onChange(update); - gui.add(cube1.options,'flatten').min(0.00).max(90).step(1).onChange(update); - gui.add(cube1.options,'size').min(1).max(512).step(1).onChange(update); - gui.add(cube1.options,'rotateX').min(0).max(360).step(1).onChange(update); + 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,'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(500).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,'scaleX').min(0.0).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); + 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); + diff --git a/front.svg b/front.svg index 6c383d5..e2a3cbe 100644 --- a/front.svg +++ b/front.svg @@ -1,2469 +1,5 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - image/svg+xml - - - - - - - - - - - - - - - - - - - - - - - - - + + diff --git a/left.svg b/left.svg index b87a0ff..d3a94ad 100644 --- a/left.svg +++ b/left.svg @@ -1,2439 +1,5 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - image/svg+xml - - - - - - - - - - + + diff --git a/manual_good_30.png b/manual_good_30.png deleted file mode 100644 index cbbdff9..0000000 Binary files a/manual_good_30.png and /dev/null differ diff --git a/manual_good_30.svg b/manual_good_30.svg deleted file mode 100644 index 2991222..0000000 --- a/manual_good_30.svg +++ /dev/null @@ -1,41 +0,0 @@ - - - - - - - - - - - - diff --git a/manualcss2.png b/manualcss2.png deleted file mode 100644 index b577087..0000000 Binary files a/manualcss2.png and /dev/null differ diff --git a/manualcss2.svg b/manualcss2.svg deleted file mode 100644 index 6631cba..0000000 --- a/manualcss2.svg +++ /dev/null @@ -1,56 +0,0 @@ - - https://en.wikipedia.org/wiki/Isometric_projection - - - - - - - - - - - diff --git a/grass.svg b/panels.svg similarity index 75% rename from grass.svg rename to panels.svg index 1a59791..f31c834 100644 --- a/grass.svg +++ b/panels.svg @@ -11,14 +11,25 @@ xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" - width="256" - height="256" + width="1024" + height="768" id="svg3075" version="1.1" inkscape:version="0.48.5 r10040" - sodipodi:docname="grass.svg"> + sodipodi:docname="panels.svg"> + + + + + + + originx="512.00001px" + originy="255.99999px" /> @@ -2325,37 +2354,40 @@ inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1" - transform="translate(-6.5030624,575.01369)"> + transform="translate(505.49695,831.01367)"> - - - - - - - - - - - - - - - - - + width="256" + height="256" + x="6.5030622" + y="-575.22198" + ry="0.97438556" /> + style="fill:#e3e2db;fill-opacity:1;stroke:none;display:inline" + id="rect4146-1" + width="256" + height="256" + x="6.5030622" + y="-831.01367" + ry="0.97438556" /> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + style="fill:none;stroke:#6c5d53;stroke-width:7.08661413;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" + d="m 40,-388.66159 0,80 c 0,0 15.671216,20 29.224096,20 13.552879,0 30.775904,-14.93103 30.775904,-20 0,-10.6066 0,-80 0,-80" + id="path4446" + inkscape:connector-curvature="0" + sodipodi:nodetypes="ccssc" /> + style="fill:none;stroke:#6c5d53;stroke-width:7.08661413;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" + d="m 170.77591,-388.66159 0,80 c 0,0 15.67121,20 29.22409,20 13.55288,0 30.77591,-14.93103 30.77591,-20 0,-10.6066 0,-80 0,-80" + id="path4446-1" + inkscape:connector-curvature="0" + sodipodi:nodetypes="ccssc" /> + + diff --git a/projectSVG.js b/projectSVG.js index 717d3ec..a12ad20 100644 --- a/projectSVG.js +++ b/projectSVG.js @@ -24,7 +24,7 @@ var SvgCube = function (options) { "fill": "none", }, // cube - flatten: 0, // fraction to vertically flatten the 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 @@ -34,12 +34,20 @@ var SvgCube = function (options) { rightUrl: '', rightRot: 0, rightShad: 0.3, + backUrl: '', + backRot: 0, + backShad: 0.3, + bottomUrl: '', + bottomRot: 0, + bottomShad: 0.3, svgNS: "http://www.w3.org/2000/svg", padding: 0, - rotateX: 0, - rotateY: 0, + rotateX: 45, + rotateY: 45, rotateZ: 0, perspective: 0, + scaleX: 1.00, + scaleZ: 1.00, } // add defaults, 2 levels deep @@ -56,6 +64,10 @@ var SvgCube = function (options) { } this.options = options + if (!options.drawOutline){ + options.stroke['stroke-width']=0; + } + this.init(); } @@ -76,371 +88,139 @@ SvgCube.prototype.init = function(){ this.ch = (1 + this.padding) * (this.h / 2 + this.h * Math.tan(this.rot)) -this.h/2*(1-this.f); //canvas height full // create SVG element - this.paper = Snap(this.cw, this.ch); - this.svg=this.paper.node var o = this.options; - var style = document.createElement('style'); - this.paper.defs.appendChild(style) - var styleStr = `
') -/* drawing measurements as a function of padding */ -SvgCube.prototype.measurements= function(p){ - if (p===undefined){ - p=0; - } + var imageFront = $(``) + cube.append(imageFront); - var f = this.options.flatten + var imageL = $(``) + cube.append(imageL); - var tBox = this.imageT.getBBox() - var lBox = this.imageL.getBBox() - var rBox = this.imageR.getBBox() + var imageRight = $(``) + cube.append(imageRight); - return { - // measurements - uf : 1-f, - p : 0, // lw/2, // padding + var imageTop = $(``) + cube.append(imageTop); - tw: this.cw-p/2, // right side. adjust by half line thickness to keep line in canvas - th: tBox.height-p/2, // height of square, and dist to middle + var imageBack = $(``) + cube.append(imageBack); - mw: this.cw/2, // middle x - mh: tBox.height/2, // middle of top square + var imageBottom = $(``) + cube.append(imageBottom); - bh: 0+p/2, // top of picture, bottom y - bw: 0+p/2, // left of picture, bottom of x - - sw: this.cw-p/2,// bottom of cube - sh: this.ch-p/2, // right of cube - - lq: -tBox.height/2+this.ch-p/2, // lower quarter of height - uq: tBox.height/2+p/2 // upper quarter - } -} - - -/* - * Adds a svg transform to an element, the transform has the origin of - * xi,yi fraction of the element, so 0.5,0.5 is the middle, - * unlike normalsvg it adds transforms in order of application not reverse order - * Usage: svgTransform(elementImage,'rotate',[45],0.5,0.5) - * This would rotate 45 degrees around center of image - */ -SvgCube.prototype.svgTransform = function (element, op, inputs, xi, yi) { - if (isNaN(xi)) { - xi = 0.5; - } - if (isNaN(yi)) { - yi = 0.5; - } - var svgBox = this.svg.getClientRects()[0] - // this.paper.getBBox() - var cbox = element.getBoundingClientRect(); - var x = cbox.left + xi * cbox.width -svgBox.left; - var y = cbox.top + yi * cbox.height -svgBox.top; - // - var matrix = this.svg.createSVGMatrix() - matrix = matrix.translate(x, y) - matrix = matrix[op].apply(matrix, inputs); - matrix = matrix.translate(-x, -y); - - var transform = this.svg.createSVGTransform(); - transform.setMatrix(matrix); - //element.transform.baseVal.appendItem(transform); // for reverse order - element.transform.baseVal.insertItemBefore(transform, 0) // normal order -} - -/* - * transform an element to be the left of an isometric cube - * Inputs: dom element, angle in degrees, and xi,yi which - * are the transform origin as a fraction of element size - */ -SvgCube.prototype.toLeft = function (element, angle, xi, yi) { - // half it's width - xi = 0 - yi = 1 - if (this.f>0){ - this.svgTransform(element, 'scaleNonUniform', [1,this.f],0.5,0.5) - } - this.svgTransform(element, 'translate', [-1, -1]) // pixel adjustment HACK - this.svgTransform(element, 'scaleNonUniform', [1 / 2, 1 / 2], xi, yi) - // skew it, in degrees - this.svgTransform(element, 'skewY', [angle], xi, yi) - -} - -/* - * transform an element to be the right of an isometric cube - * Inputs: dom element, angle in degrees, and xi,yi which - * are the transform origin as a fraction of element size - */ -SvgCube.prototype.toRight = function (element, angle, xi, yi) { - xi = 1 - yi = 1 - if (this.f>0){ - this.svgTransform(element, 'scaleNonUniform', [1,this.f],0.5,0.5) - } - this.svgTransform(element, 'translate', [-1, -2]) // pixel adjustment HACK - // half it's width to fiit in canvas - this.svgTransform(element, 'scaleNonUniform', [1 / 2, 1 / 2], xi, yi) - // skew it - this.svgTransform(element, 'skewY', [-angle], xi, yi) - -} - -/* - * transform an element to be the top of an isometric cube - * Inputs: dom element, angle in degrees, and xi,yi which - * are the transform origin as a fraction of element size - */ -SvgCube.prototype.toTop = function (element, angle, xi, yi) { - var rot = angle * Math.PI / 180; - this.svgTransform(element, 'translate', [-2, -1]) // pixel adjustment HACK - - // rotate so it's a diamond - this.svgTransform(element, 'rotate', [45], xi, yi) - // squish - along x axis to fit in canvas, along y axis for perspective change - this.svgTransform(element, 'scaleNonUniform', [Math.sin(45 * Math.PI / 180), Math.tan(rot) * Math.sin(45 * Math.PI / 180)], xi, yi) -} - -SvgCube.prototype.moveTop = function (element) { - // align top of cube with top of canvas - var cbox = element.getBoundingClientRect(); - this.svgTransform(element, 'translate', [-cbox.left + this.pPx, -cbox.top + this.pPx]) -} - -/* - * align left of cube with top, - * fit upper-left of left panel with middle-left of top panel - */ -SvgCube.prototype.moveLeft = function (elem, elemT) { - var cboxL = elem.getBoundingClientRect(); - var cboxT = elemT.getBoundingClientRect(); - // align left - var x = cboxT.left - cboxL.left - // align top of left with half height of - var y = cboxT.top - cboxL.top + cboxT.height / 2 - this.svgTransform(elem, 'translate', [x, y]) -} - -/* - * align right of cube with top, - * fit upper-right of right panel with middle-right of top panel - */ -SvgCube.prototype.moveRight = function (elem, elemT) { - // line up left with top, move to half tops height, and to align left - var cboxL = elem.getBoundingClientRect(); - var cboxT = elemT.getBoundingClientRect(); - - // align right with right - var x = cboxT.right - cboxL.right - - // align top of left with half height of - var y = cboxT.top - cboxL.top + cboxT.height / 2 - this.svgTransform(elem, 'translate', [x, y]) -} - -/* draw outline get line color from option.strokeColor, and width from options.stroke-width */ -SvgCube.prototype.drawOutline = function(lw){ - lw=lw||this.options.stroke["stroke-width"]; - var ms = this.measurements(lw/2) - - - var tb = this.imageT.getBBox() - var lb = this.imageL.getBBox() - var rb = this.imageR.getBBox() - - // Draw outline of top - var strTop= - 'M'+ms.mw +' '+ms.th +' '+ // Move to bottom - 'L'+ms.bw +' '+ms.mh+' '+ // left - 'L'+ms.mw +' '+ms.bh+ ' '+ // top - 'L'+ms.tw +' '+ms.mh+' '+ // right - 'Z' // close - var pathTop = this.paper.path(strTop); - - // // outline of left - var strLeft= - 'M'+ms.mw +' '+ms.th+' '+ // middle - 'L'+ms.bw +' '+ms.uq+' '+ // left top - 'L'+ms.bw +' '+ms.lq+' '+ // left bottom - 'L'+ms.mw +' '+ms.sh+' '+ // middle bottom - 'Z' - var pathLeft = this.paper.path(strLeft); - // - // right - var strRight= - 'M'+ms.mw +' '+ms.th+' '+ // middle - 'L'+ms.mw +' '+ms.sh +' '+ // middle bottom - 'L'+ms.tw +' '+ms.lq+' '+ // right bottom - 'L'+ms.tw +' '+ms.uq+' '+ // right top - 'Z' // close - var pathRight = this.paper.path(strRight); - - // join into set - var pathGroup = this.paper.group(); - pathGroup.append(pathTop); - pathGroup.append(pathLeft); - pathGroup.append(pathRight); - - // set attrs from options - // ref http://raphaeljs.com/reference.html#Element.attr - var blackList = ['url','target','src','title'] - for (var a in this.options.stroke){ - if (this.options.stroke.hasOwnProperty(a) && blackList.indexOf(a)<0){ - pathGroup.attr(a,this.options.stroke[a]); - } - } - this.outline=pathGroup; -} - - -/* draw outline get line color from option.strokeColor, and width from options.stroke-width */ -SvgCube.prototype.drawShading = function(lw){ - lw=lw||this.options.stroke["stroke-width"]; - var ms = this.measurements(0); - var pathGroup = this.paper.g(); - - var strTop= - 'M'+ms.mw +' '+ms.th +' '+ // Move to bottom - 'L'+ms.bw +' '+ms.mh+' '+ // left - 'L'+ms.mw +' '+ms.bh+ ' '+ // top - 'L'+ms.tw +' '+ms.mh+' '+ // right - 'Z' // close - var pathTop = this.paper.path(strTop); - pathGroup.append(pathTop); - - // outline of left - var strLeft= - 'M'+ms.mw +' '+ms.th+' '+ // middle - 'L'+ms.bw +' '+ms.uq+' '+ // left top - 'L'+ms.bw +' '+ms.lq+' '+ // left bottom - 'L'+ms.mw +' '+ms.sh+' '+ // middle bottom - 'Z' - var pathLeft = this.paper.path(strLeft); - pathGroup.append(pathLeft); - - // last line from middle down - var strRight= - 'M'+ms.mw +' '+ms.th+' '+ // middle - 'L'+ms.mw +' '+ms.sh +' '+ // middle bottom - 'L'+ms.tw +' '+ms.lq+' '+ // right bottom - 'L'+ms.tw +' '+ms.uq+' '+ // right top - 'Z' // close - var pathRight = this.paper.path(strRight); - pathGroup.append(pathRight); - - - // style the set - pathGroup.attr({ - 'stroke': 'none', - 'fill': 'black', - 'stroke-width': 0, - 'stroke-opacity': 0, - 'stroke-linecap': 'round', - 'stroke-linejoin': 'round' - }); - // shade each side, 0 is no shading, 1 is black - pathTop.attr({'fill-opacity': this.options.topShad}); - pathLeft.attr({'fill-opacity': this.options.leftShad}); - pathRight.attr({'fill-opacity': this.options.rightShad}); - this.shading=pathGroup; - -} - -/*clip the cube using an elipse to give rounded corners */ -SvgCube.prototype.clipCircle = function(amount){ - var cp = document.createElementNS("http://www.w3.org/2000/svg","clipPath") - cp.id="cp"; - var rxc=51+4*(1-this.f)*(1-this.f); - var ryc=50-2/Math.sqrt(1-this.f); - cp.innerHTML = '' - this.paper.node.getElementsByTagName("defs")[0].appendChild(cp); - this.paper.node.setAttribute("clip-path","url(#cp)"); -} - - -/* returns svg string */ -SvgCube.prototype.toSVG = function(){ - var svg3 = this.paper.toString(); - //var svg = this.paper.node.outerHTML; - //var svg2 = xmlserializer.serializeToString(this.paper.node); - if (this.paper.node.attributes.getNamedItem("clip-path")){ - // patch svg export to add clip - // HACK I have to add these manually to the export sadly as raphael.export doesn't handle them and also misses some recent change to canvas - svg3=svg3.replace("#projection').remove() + $('head').append($(styleStr)); + } /* 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(); - this.cube.attr({ - class: 'cube cube2', - id: "c2notnested", - }); - this.leftImg = this.cube.image(this.options.leftUrl,0,0,imgS,imgS); - this.leftImg.attr({ - class: 'face left', - }) - this.rightImg = this.cube.image(this.options.rightUrl,0,0,imgS,imgS); - this.rightImg.attr({ - class: 'face right', - }) - this.topImg = this.cube.image(this.options.topUrl,0,0,imgS,imgS); - this.topImg.attr({ - class: 'face top', - }) + // var imgS = this.options.size / Math.sqrt(2); + // this.cube = this.paper.g(); + // this.cube.attr({ + // class: 'cube cube2', + // id: "c2notnested", + // }); + // this.leftImg = this.cube.image(this.options.leftUrl,0,0,imgS,imgS); + // this.leftImg.attr({ + // class: 'face left', + // }) + // this.rightImg = this.cube.image(this.options.rightUrl,0,0,imgS,imgS); + // this.rightImg.attr({ + // class: 'face right', + // }) + // this.topImg = this.cube.image(this.options.topUrl,0,0,imgS,imgS); + // this.topImg.attr({ + // class: 'face top', + // }) } @@ -466,7 +246,7 @@ SvgCube.prototype.toPNG2 = function(){ // svg2png SvgCube.prototype.update = function(){ - this.paper.remove(); + //this.paper.remove(); this.init(); this.drawCube(); } diff --git a/rasterise.js b/rasterise.js deleted file mode 100644 index b0e0f67..0000000 --- a/rasterise.js +++ /dev/null @@ -1,48 +0,0 @@ -var page = require('webpage').create(), - system = require('system'), - address, output, size; - -if (system.args.length < 3 || system.args.length > 5) { - console.log('Usage: rasterize.js URL filename [paperwidth*paperheight|paperformat] [zoom]'); - console.log(' paper (pdf output) examples: "5in*7.5in", "10cm*20cm", "A4", "Letter"'); - console.log(' image (png/jpg output) examples: "1920px" entire page, window width 1920px'); - console.log(' "800px*600px" window, clipped to 800x600'); - phantom.exit(1); -} else { - address = system.args[1]; - output = system.args[2]; - page.viewportSize = { width: 600, height: 600 }; - if (system.args.length > 3 && system.args[2].substr(-4) === ".pdf") { - size = system.args[3].split('*'); - page.paperSize = size.length === 2 ? { width: size[0], height: size[1], margin: '0px' } - : { format: system.args[3], orientation: 'portrait', margin: '1cm' }; - } else if (system.args.length > 3 && system.args[3].substr(-2) === "px") { - size = system.args[3].split('*'); - if (size.length === 2) { - pageWidth = parseInt(size[0], 10); - pageHeight = parseInt(size[1], 10); - page.viewportSize = { width: pageWidth, height: pageHeight }; - page.clipRect = { top: 0, left: 0, width: pageWidth, height: pageHeight }; - } else { - console.log("size:", system.args[3]); - pageWidth = parseInt(system.args[3], 10); - pageHeight = parseInt(pageWidth * 3/4, 10); // it's as good an assumption as any - console.log ("pageHeight:",pageHeight); - page.viewportSize = { width: pageWidth, height: pageHeight }; - } - } - if (system.args.length > 4) { - page.zoomFactor = system.args[4]; - } - page.open(address, function (status) { - if (status !== 'success') { - console.log('Unable to load the address!'); - phantom.exit(1); - } else { - window.setTimeout(function () { - page.render(output); - phantom.exit(); - }, 200); - } - }); -} diff --git a/right.svg b/right.svg index b87a0ff..9810390 100644 --- a/right.svg +++ b/right.svg @@ -1,2439 +1,5 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - image/svg+xml - - - - - - - - - - + + diff --git a/svg-stylesheet.css b/svg-stylesheet.css deleted file mode 100644 index 3181dfd..0000000 --- a/svg-stylesheet.css +++ /dev/null @@ -1,43 +0,0 @@ - .cube, .cube .face, .cube .face * { - height: 170px; - width: 170px; - } - .cube { - position: relative; - -webkit-transform: translate(11em,11em) - transform: translate(11em,11em) - } - - .cube * { - transform-origin: 0% 100%; - } - - .cube2 .top { - position: relative; - -webkit-transform: rotateX(45deg) rotateZ(-45deg) rotateX(0deg); - -webkit-transform-style: preserve-3d; - -webkit-transition: .25s; - transform: rotateX(45deg) rotateZ(-45deg) rotateX(0deg); - transform-style: preserve-3d; - transition: .25s; - - } - .cube2 .left { - -webkit-transform: rotateX(45deg) rotateZ(-45deg) rotateX(90deg); - -webkit-transform-style: preserve-3d; - -webkit-transition: .25s; - transform: rotateX(45deg) rotateZ(-45deg) rotateX(90deg); - transform-style: preserve-3d; - transition: .25s; - position: absolute; - - } - .cube2 .right { - -webkit-transform: rotateX(45deg) rotateZ(-45deg) rotateY(90deg); - -webkit-transform-style: preserve-3d; - -webkit-transition: .25s; - transform: rotateX(45deg) rotateZ(-45deg) rotateY(90deg); - transform-style: preserve-3d; - transition: .25s; - position: absolute; - } diff --git a/test.html b/test.html deleted file mode 100644 index 6631cba..0000000 --- a/test.html +++ /dev/null @@ -1,56 +0,0 @@ - - https://en.wikipedia.org/wiki/Isometric_projection - - - - - - - - - - - diff --git a/top.svg b/top.svg index e1b67bc..7472516 100644 --- a/top.svg +++ b/top.svg @@ -1,2384 +1,5 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - image/svg+xml - - - - - - - - - + +