Permalink
Browse files

Include the Tiger example

  • Loading branch information...
1 parent 52c2687 commit 5c4cbad75074f2d59782cf869dc9b59fa18faf68 @louisremi committed Sep 4, 2012
Showing with 1,413 additions and 38 deletions.
  1. +14 −4 css/index.css
  2. +6 −4 index.html
  3. +88 −0 index.html_bak
  4. +1,254 −0 samples/tiger.svg
  5. +51 −30 script/index.js
View
@@ -23,6 +23,18 @@ header h2 {
padding-left: 40px;
}
+#tiger {
+ text-align: center;
+ margin-top: 130px;
+ margin-right: 20px;
+}
+
+#canvas-input {
+ background-size: contain;
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
#file-input {
opacity: 0;
position: absolute;
@@ -45,13 +57,11 @@ header h2 {
.square {
border: 1px solid #ddd;
border-radius: 4px;
- min-height: 280px;
+ height: 280px;
}
.loading {
background: url("../img/loader.gif") 115px 115px no-repeat;
-}
-.rendered {
- border: none;
+ background-size: inherit !important;
}
.small-list {
View
@@ -30,10 +30,10 @@
<h2>Convert your SVG files to lightweight, Raphael-compatible JSON</h2>
</header>
- <div class="row row-offset pagination-centered">
- <div class="span12">
+ <div class="row row-offset">
+ <div class="span2 offset5 pagination-centered">
<input type="file" accept="image/*" id="file-input" />
- <input type="button" id="file-button" class="btn btn-large btn-primary" value="Select File">
+ <input type="button" id="file-button" class="btn btn-large btn-primary" value="Select File"/>
</div>
</div>
@@ -43,7 +43,9 @@
<p class="span4">Output</p>
</div>
<div class="row">
- <img class="span4 square" id="canvas-input" />
+ <div class="span4 square" id="canvas-input">
+ <p id="tiger">Give the <input type="button" class="btn btn-small" id="tiger-button" value="Tiger"/> a try</p>
+ </div>
<textarea class="span4 square" id="json-output" resizable=false></textarea>
<div id="canvas-output" class="span4 square">
</div>
View
@@ -0,0 +1,88 @@
+<!doctype html>
+<html>
+<head>
+ <meta charset="UTF-8" />
+</head>
+<body>
+ <h1>SVG to JSON converter</h1>
+ <h2>1. Prepare your svg file</h2>
+ <h2>2. Open it <input type="file" id="file" /><!-- <small>(or give the <input type="button" id="tger" value="tiger" /> a try)</small>--></h2>
+
+ <div id="input"></div>
+ <h2>3. Tweak</h2>
+
+ <h2>4. And <input type="button" id="convert" value="Convert" /></h2>
+ <textarea id="textarea" style="width: 80em; height: 30em;"></textarea>
+ <h2>5. <input type="button" id="render" value="Render" /> with Victor</h2>
+ <div id="output"></div>
+
+ <script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/0.6.1/lodash.min.js"></script>
+ <script src="script/victor.js"></script>
+ <script>window.Victor = Raphael.ninja();</script>
+ <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael.js"></script>
+ <!--<script src="script/raphael.js"></script>-->
+ <script src="script/svgtojs.js"></script>
+ <script>
+ var file = $("#file"),
+ input = $("#input"),
+ output = $("#output"),
+ convert = $("#convert"),
+ textarea = $("#textarea"),
+ render = $("#render");
+
+ file.value = "";
+ file.onchange = function( event ) {
+ if ( !file.files.length ) { return; }
+
+ var freader = new FileReader();
+ freader.onload = function( e ) {
+ input.innerHTML = e.target.result;
+ };
+ freader.readAsText( file.files[0] );
+
+ };
+
+ convert.onclick = function() {
+ if ( input.innerHTML == "" ) { return; }
+
+ textarea.value = JSON.stringify( svgtojs( input.firstElementChild ) );
+ };
+
+ render.onclick = function() {
+ if ( textarea.value == "" ) { return; }
+
+ dummyRenderer( JSON.parse( textarea.value ) );
+ };
+
+ function $( selector ) {
+ return document.querySelector( selector );
+ }
+
+ function dummyRenderer( obj ) {
+ output.innerHTML = "";
+
+ var paper = Victor( output, obj.width, obj.height );
+
+ _.each( obj.children, function( child ) {
+ var style = child.style,
+ tmp;
+
+ // Raphael has strange defaults
+ !style.fill && ( style.fill = "none" );
+ !style.stroke && ( style.stroke = "none" );
+
+ // convert gradients in raphael format
+ if ( typeof style.fill != "string" ) {
+ // you can get "to transparent" gradients in raphael by setting the fill-opacity to less than 1
+ if ( ( tmp = style.fill.stops[1].substr(7) ) ) {
+ style["fill-opacity"] = parseInt( tmp, 16 ) / 255;
+ }
+ style.fill = style.fill.angle + "-" + style.fill.stops[0].substr(0,7) + "-" + style.fill.stops[1].substr(0,7);
+ }
+
+ paper[ child.type ].apply( paper, child.attrs ).attr( style );
+ });
+ }
+ </script>
+</body>
+</html>
Oops, something went wrong.

0 comments on commit 5c4cbad

Please sign in to comment.