mirror of
https://github.com/wassname/svg2cube.git
synced 2026-06-27 18:26:20 +08:00
working
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 73 KiB After Width: | Height: | Size: 241 B |
+10
-2383
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 73 KiB After Width: | Height: | Size: 435 B |
@@ -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
|
||||
@@ -6,7 +6,7 @@
|
||||
<body>
|
||||
|
||||
<div>
|
||||
|
||||
<p>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 </p>
|
||||
<button><a id="download" href="">Download</a></button
|
||||
</div>
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
|
||||
<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>
|
||||
@@ -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);
|
||||
|
||||
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 78 KiB After Width: | Height: | Size: 246 B |
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 75 KiB After Width: | Height: | Size: 244 B |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
@@ -1,41 +0,0 @@
|
||||
<svg height="1128" style="overflow: hidden; position: relative; left: 0px; top: 0px;" version="1.1" width="1128" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" >
|
||||
<foreignObject>
|
||||
<style>
|
||||
.cube, .cube .face, .cube .face * {
|
||||
height: 170px;
|
||||
width: 170px;
|
||||
}
|
||||
.cube {
|
||||
transform: translate(50%, 50%);
|
||||
}
|
||||
.cube2 .face, .cube2 .face * {
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
.cube2 .top {
|
||||
transform: rotate(-45deg) skew(15deg, 15deg);
|
||||
}
|
||||
.cube2 .left {
|
||||
transform: rotate(15deg) skew(15deg, 15deg) translate(-50%, 100%);
|
||||
}
|
||||
.cube2 .right {
|
||||
transform: rotate(-15deg) skew(-15deg, -15deg) translate(50%, 100%);
|
||||
}
|
||||
</style>
|
||||
</foreignObject>
|
||||
|
||||
<g class="cube cube2" id="c2notnested" >
|
||||
<image
|
||||
class="face top"
|
||||
xlink:href="grass.svg"
|
||||
/>
|
||||
<image
|
||||
class="face left"
|
||||
xlink:href="grass.svg"
|
||||
/>
|
||||
<image
|
||||
class="face right"
|
||||
xlink:href="grass.svg"
|
||||
/>
|
||||
</g>
|
||||
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
@@ -1,56 +0,0 @@
|
||||
<svg height="1128" version="1.1" width="1128" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" >
|
||||
<desc>https://en.wikipedia.org/wiki/Isometric_projection </desc>
|
||||
<foreignObject>
|
||||
<style>
|
||||
.cube, .cube .face, .cube .face * {
|
||||
height: 170px;
|
||||
width: 170px;
|
||||
}
|
||||
.cube {
|
||||
position: relative;
|
||||
-webkit-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;
|
||||
|
||||
}
|
||||
.cube2 .left {
|
||||
-webkit-transform: rotateX(45deg) rotateZ(-45deg) rotateX(90deg);
|
||||
-webkit-transform-style: preserve-3d;
|
||||
-webkit-transition: .25s;
|
||||
position: absolute;
|
||||
|
||||
}
|
||||
.cube2 .right {
|
||||
-webkit-transform: rotateX(45deg) rotateZ(-45deg) rotateY(90deg);
|
||||
-webkit-transform-style: preserve-3d;
|
||||
-webkit-transition: .25s;
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
</foreignObject>
|
||||
|
||||
<g class="cube cube2" id="c2notnested" >
|
||||
<image
|
||||
class="face top"
|
||||
xlink:href="grass.svg"
|
||||
/>
|
||||
<image
|
||||
class="face left"
|
||||
xlink:href="grass.svg"
|
||||
/>
|
||||
<image
|
||||
class="face right"
|
||||
xlink:href="grass.svg"
|
||||
/>
|
||||
</g>
|
||||
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.7 KiB |
+293
-251
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 86 KiB After Width: | Height: | Size: 94 KiB |
+115
-335
@@ -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 = ` <style>
|
||||
//var style = document.createElement('style');
|
||||
//this.paper.defs.appendChild(style)
|
||||
var styleStr = ` <style id="projection">
|
||||
.cube, .cube .face, .cube .face * {
|
||||
height: ${o.size}px;
|
||||
width: ${o.size}px;
|
||||
}
|
||||
.cube {
|
||||
position: absolute;
|
||||
background-color: #f66;
|
||||
|
||||
-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);
|
||||
-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-style: preserve-3d;
|
||||
-webkit-transition: .25s;
|
||||
-webkit-transition: 0.25s;
|
||||
}
|
||||
|
||||
|
||||
.cube * {
|
||||
transform-origin: 0% 100%;
|
||||
.back {
|
||||
transform: translateZ(-${o.size/2}px) rotateY(180deg);
|
||||
}
|
||||
.right {
|
||||
transform: rotateY(-270deg) translateX(${o.size/2}px);
|
||||
transform-origin: center right;
|
||||
}
|
||||
.left {
|
||||
transform: rotateY(270deg) translateX(-${o.size/2}px);
|
||||
transform-origin: center left;
|
||||
}
|
||||
.top {
|
||||
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;
|
||||
}
|
||||
.front {
|
||||
transform: translateZ(${o.size/2}px);
|
||||
}
|
||||
b{
|
||||
position:absolute;
|
||||
transition: all 1s linear;
|
||||
}
|
||||
|
||||
.cube2 .top {
|
||||
position: relative;
|
||||
-webkit-transform: rotateX(45deg) rotateZ(-45deg) rotateX(0deg);
|
||||
-webkit-transform-style: preserve-3d;
|
||||
-webkit-transition: .25s;
|
||||
/* outline */
|
||||
.face {
|
||||
box-sizing: border-box;
|
||||
border: ${o.stroke['stroke-width']}px solid ${o.stroke.stroke};
|
||||
}
|
||||
|
||||
/* shade in sides. But it seems to either mess up projection or not show */
|
||||
.wrap {
|
||||
overflow: hidden;
|
||||
width: 840px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.cube2 .left {
|
||||
-webkit-transform: rotateX(45deg) rotateZ(-45deg) rotateX(90deg);
|
||||
-webkit-transform-style: preserve-3d;
|
||||
-webkit-transition: .25s;
|
||||
position: absolute;
|
||||
|
||||
.tint {
|
||||
position: absolute; /* works with relative but busts proj */
|
||||
}
|
||||
.cube2 .right {
|
||||
-webkit-transform: rotateX(45deg) rotateZ(-45deg) rotateY(90deg);
|
||||
-webkit-transform-style: preserve-3d;
|
||||
-webkit-transition: .25s;
|
||||
position: absolute;
|
||||
|
||||
.tint:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
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>`
|
||||
console.log(styleStr);
|
||||
style.innerHTML= styleStr
|
||||
//style.innerHTML= styleStr
|
||||
|
||||
}
|
||||
if ($('body>.cube').length===0){
|
||||
var cube = $('<div class="cube cube2"></div>')
|
||||
|
||||
/* drawing measurements as a function of padding */
|
||||
SvgCube.prototype.measurements= function(p){
|
||||
if (p===undefined){
|
||||
p=0;
|
||||
}
|
||||
var imageFront = $(`<b width="256" height="256" class="front tint"><embed type="image/svg+xml" src="${o.frontUrl}" class="face"></embed></b>`)
|
||||
cube.append(imageFront);
|
||||
|
||||
var f = this.options.flatten
|
||||
var imageL = $(`<b width="256" height="256" class="left tint"><embed type="image/svg+xml" src="${o.leftUrl}" class="face"></embed></b>`)
|
||||
cube.append(imageL);
|
||||
|
||||
var tBox = this.imageT.getBBox()
|
||||
var lBox = this.imageL.getBBox()
|
||||
var rBox = this.imageR.getBBox()
|
||||
var imageRight = $(`<b width="256" height="256" class="right tint"><embed type="image/svg+xml" src="${o.rightUrl}" class="face"></embed></b>`)
|
||||
cube.append(imageRight);
|
||||
|
||||
return {
|
||||
// measurements
|
||||
uf : 1-f,
|
||||
p : 0, // lw/2, // padding
|
||||
var imageTop = $(`<b width="256" height="256" class="top tint"><embed type="image/svg+xml" src="${o.topUrl}" class="face"></embed></b>`)
|
||||
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 = $(`<b width="256" height="256" class="back tint"><embed type="image/svg+xml" src="${o.backUrl}" class="face"></embed></b>`)
|
||||
cube.append(imageBack);
|
||||
|
||||
mw: this.cw/2, // middle x
|
||||
mh: tBox.height/2, // middle of top square
|
||||
var imageBottom = $(`<b width="256" height="256" class="bottom tint"><embed type="image/svg+xml" src="${o.bottomUrl}" class="face"></embed></b>`)
|
||||
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 = '<ellipse xmlns="http://www.w3.org/2000/svg" cx="50%" cy="50%" rx="'+rxc+'%" ry="'+ryc+'%" fill="white"/>'
|
||||
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("<svg",'<svg clip-path="url(#cp)"')
|
||||
svg3=svg3.replace("<image",this.paper.node.getElementsByTagName("defs")[0].outerHTML+"<image")
|
||||
svg3=svg3.replace("clippath","clipPath")
|
||||
svg3=svg3.replace("clippath","clipPath")
|
||||
$('body').append(cube);
|
||||
|
||||
}
|
||||
return svg3
|
||||
|
||||
$('head>#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();
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
});
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 75 KiB After Width: | Height: | Size: 244 B |
@@ -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;
|
||||
}
|
||||
@@ -1,56 +0,0 @@
|
||||
<svg height="1128" version="1.1" width="1128" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" >
|
||||
<desc>https://en.wikipedia.org/wiki/Isometric_projection </desc>
|
||||
<foreignObject>
|
||||
<style>
|
||||
.cube, .cube .face, .cube .face * {
|
||||
height: 170px;
|
||||
width: 170px;
|
||||
}
|
||||
.cube {
|
||||
position: relative;
|
||||
-webkit-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;
|
||||
|
||||
}
|
||||
.cube2 .left {
|
||||
-webkit-transform: rotateX(45deg) rotateZ(-45deg) rotateX(90deg);
|
||||
-webkit-transform-style: preserve-3d;
|
||||
-webkit-transition: .25s;
|
||||
position: absolute;
|
||||
|
||||
}
|
||||
.cube2 .right {
|
||||
-webkit-transform: rotateX(45deg) rotateZ(-45deg) rotateY(90deg);
|
||||
-webkit-transform-style: preserve-3d;
|
||||
-webkit-transition: .25s;
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
</foreignObject>
|
||||
|
||||
<g class="cube cube2" id="c2notnested" >
|
||||
<image
|
||||
class="face top"
|
||||
xlink:href="grass.svg"
|
||||
/>
|
||||
<image
|
||||
class="face left"
|
||||
xlink:href="grass.svg"
|
||||
/>
|
||||
<image
|
||||
class="face right"
|
||||
xlink:href="grass.svg"
|
||||
/>
|
||||
</g>
|
||||
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.7 KiB |
Reference in New Issue
Block a user