jsketch.svg.js

  1. /*!
  2.  * jSketch SVG 1.0 | Luis A. Leiva | MIT license
  3.  */
  5. // XXX: Requires `jsketch.js` to be loaded first.
  7. /**
  8.  * SVG serializer for the jSketch lib.
  9.  * @version 1.0
  10.  * @author Luis A. Leiva
  11.  * @license MIT license
  12.  */
  13. ;(function(window) {
  14.   /**
  15.    * Convert jSketch canvas to SVG.
  16.    * This method is asynchronous, and will be invoked when the SVG is ready.
  17.    * @param {function} callback - Callback function, to be invoked with the SVG (string) as argument.
  18.    * @return {jSketch}
  19.    * @memberof jSketch
  20.    * @method
  21.    * @name toSVG
  22.    */
  23.   window.jSketch.prototype.toSVG = function(callback) {
  24.     // No callback, no SVG.
  25.     if (typeof callback !== 'function') throw new Error('You must supply a callback in toSVG() method.');
  26.     // Save pointer for use in closures.
  27.     var self = this;
  28.     // Gather lines together until path is closed.
  29.     var paths = [];
  30.     // TODO: Save composite operations. See https://www.w3.org/TR/2002/WD-SVG11-20020215/masking.html
  31.     var comps = {};
  32.     // Flag async stuff, like image loading.
  33.     var asyncOps = 0;
  34.     // Process jSketch properties.
  35.     var graphics = {};
  36.     // Process jSketch methods.
  37.     var methods = {
  38.       /**
  39.        * Add async flag.
  40.        * @return {string}
  41.        */
  42.       addAsync: function() {
  43.         asyncOps++;
  44.         return '';
  45.       },
  46.       /**
  47.        * Remove async flag.
  48.        * @return {string}
  49.        */
  50.       removeAsync: function() {
  51.         asyncOps--;
  52.         return '';
  53.       },
  54.       /**
  55.        * Serialize image.
  56.        * @param {object} img - Image element.
  57.        * @param {number} [x] - Horizontal coordinate.
  58.        * @param {number} [y] - Vertical coordinate.
  59.        * @return {string}
  60.        */
  61.       drawImage: function(img, x, y) {
  62.         return '<image preserveAspectRatio="none" \
  63.           width="' + img.width + '" \
  64.           height="' + img.height + '" \
  65.           transform="translate('+ x +', '+ y +')" \
  66.           xlink:href="' + img.src + '"></image>';
  67.       },
  68.       /**
  69.        * Serialize filled rectangle.
  70.        * @param {number} x - Horizontal coordinate.
  71.        * @param {number} y - Vertical coordinate.
  72.        * @param {number} width - Rectangle width.
  73.        * @param {number} height - Rectangle height.
  74.        * @return {string}
  75.        */
  76.       fillRect: function(x, y, width, height) {
  77.         return '<rect stroke="none" \
  78.           width="' + width + '" \
  79.           height="' + height + '" \
  80.           x="' + x + '" \
  81.           y="' + y + '" \
  82.           fill="' + graphics.fillStyle + '"></rect>';
  83.       },
  84.       /**
  85.        * Serialize stroked rectangle.
  86.        * @param {number} x - Horizontal coordinate.
  87.        * @param {number} y - Vertical coordinate.
  88.        * @param {number} width - Rectangle width.
  89.        * @param {number} height - Rectangle height.
  90.        * @return {string}
  91.        */
  92.       strokeRect: function(x, y, width, height) {
  93.         return '<rect fill="none" \
  94.           width="' + width + '" \
  95.           height="' + height + '" \
  96.           x="' + x + '" \
  97.           y="' + y + '" \
  98.           stroke="' + graphics.strokeStyle + '" \
  99.           stroke-width="' + graphics.lineWidth + '" \
  100.           stroke-linecap="' + graphics.lineCap + '" \
  101.           stroke-linejoin="' + graphics.lineJoin + '" \
  102.           stroke-miterlimit="' + graphics.miterLimit + '"></rect>';
  103.       },
  104.       /**
  105.        * Serialize stroked circle.
  106.        * @param {number} x - Horizontal coordinate.
  107.        * @param {number} y - Vertical coordinate.
  108.        * @param {number} radius - Circle radius.
  109.        * @return {string}
  110.        */
  111.       strokeCircle: function(x, y, radius) {
  112.         return '<circle fill="none" \
  113.           cx="' + x + '" \
  114.           cy="' + y + '" \
  115.           r="' + radius + '" \
  116.           stroke="' + graphics.strokeStyle + '" \
  117.           stroke-width="' + graphics.lineWidth + '" />';
  118.       },
  119.       /**
  120.        * Serialize filled circle.
  121.        * @param {number} x - Horizontal coordinate.
  122.        * @param {number} y - Vertical coordinate.
  123.        * @param {number} radius - Circle radius.
  124.        * @return {string}
  125.        */
  126.       fillCircle: function(x, y, radius) {
  127.         return '<circle stroke="none" \
  128.           cx="' + x + '" \
  129.           cy="' + y + '" \
  130.           r="' + radius + '" \
  131.           fill="' + graphics.fillStyle + '" />';
  132.       },
  133.       /**
  134.        * Mark start of path.
  135.        * @return {string}
  136.        */
  137.       beginPath: function() {
  138.         paths = [];
  139.         return '';
  140.       },
  141.       /**
  142.        * Mark end of path. Actually serializes the path.
  143.        * @return {string}
  144.        */
  145.       closePath: function() {
  146.         var path = '';
  147.         if (paths.length > 0) {
  148.           path = '<path fill="none" \
  149.             stroke="' + graphics.strokeStyle + '" \
  150.             stroke-width="' + graphics.lineWidth + '" \
  151.             stroke-linecap="' + graphics.lineCap + '" \
  152.             stroke-linejoin="' + graphics.lineJoin + '" \
  153.             stroke-miterlimit="' + graphics.miterLimit + '" \
  154.             d="' + paths.join(' ') + '" />';
  155.           paths = [];
  156.         }
  157.         return path;
  158.       },
  159.       /**
  160.        * Add point origin to path.
  161.        * @param {number} x - Horizontal coordinate.
  162.        * @param {number} y - Vertical coordinate.
  163.        * @return {string}
  164.        */
  165.       moveTo: function(x, y) {
  166.         paths.push('M '+ x +' '+ y);
  167.         return '';
  168.       },
  169.       /**
  170.        * Add line to path.
  171.        * @param {number} x - Horizontal coordinate.
  172.        * @param {number} y - Vertical coordinate.
  173.        * @return {string}
  174.        */
  175.       lineTo: function(x, y) {
  176.         paths.push('L '+ x +' '+ y);
  177.         return '';
  178.       },
  179.       /**
  180.        * Add curve to path.
  181.        * @param {number} cpx - Horizontal coordinate of control point.
  182.        * @param {number} cpy - Vertical coordinate of control point.
  183.        * @param {number} x - Horizontal coordinate.
  184.        * @param {number} y - Vertical coordinate.
  185.        * @return {string}
  186.        */
  187.       quadraticCurveTo: function(cpx, cpy, x, y) {
  188.         paths.push('Q '+ cpx +' '+ cpy + ' '+ x +' '+ y);
  189.         return '';
  190.       },
  191.     };
  193.     // Create SVG.
  194.     function build() {
  195.       var svg = '<?xml version="1.0" encoding="utf-8" standalone="no" ?>';
  196.       svg += '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" \
  197.         "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">';
  198.       svg += '<svg version="1.1" \
  199.         xmlns="http://www.w3.org/2000/svg" \
  200.         xmlns:svg="http://www.w3.org/2000/svg" \
  201.         xmlns:xlink="http://www.w3.org/1999/xlink" \
  202.         width="' + self.stageWidth + '" \
  203.         height="' + self.stageHeight + '" \
  204.         viewBox="0 0 ' + self.stageWidth + ' ' + self.stageHeight + '">';
  205.       svg += '<desc>Generated with jSketch: https://luis.leiva.name/jsketch/</desc>';
  206.       svg += '<defs></defs>';
  207.       svg += '<g>';
  208.       svg += processElements();
  209.       svg += '</g>';
  210.       svg += '</svg>';
  211.       // Normalize whitespacing.
  212.       return svg.replace(/\s+/g, ' ');
  213.     }
  215.     // Serialize jSketch elements.
  216.     function processElements() {
  217.       var ret = '';
  218.       for (var i = 0; i < self.callStack.length; i++) {
  219.         var entry = self.callStack[i];
  220.         if (entry.property && typeof entry.value !== 'object') {
  221.           // Save properties for later processing.
  222.           graphics[entry.property] = entry.value;
  223.         } else if (entry.method) {
  224.           // Ensure method.
  225.           if (!methods[entry.method]) {
  226.             console.warn('Method not implemented:', entry.method);
  227.             continue;
  228.           }
  229.           // Process method.
  230.           ret += methods[entry.method].apply(null, entry.args);
  231.         } else {
  232.           console.warn('Unknown call:', entry);
  233.         }
  234.       }
  235.       return ret;
  236.     }
  238.     // Throttle svg readiness.
  239.     var timer = setInterval(checkReady, 150);
  240.     function checkReady() {
  241.       if (asyncOps <= 0) {
  242.         clearInterval(timer);
  243.         var contents = build();
  244.         callback(contents);
  245.       } else {
  246.         console.info('Waiting for %s async operations to be finished ...', asyncOps);
  247.       }
  248.     }
  250.     return this;
  251.   };
  253. })(this);