Stacking Transforms with RaphaelJS

In this example below you will see how to do a Stacking Transforms with RaphaelJS with some HTML / CSS and Javascript

This is a demo of how RaphaelJS helps with managing the transform stack.See managing transforms manually without RaphaelJS here: http://codepen.io/1Marc/details/DCvFm

Thumbnail
This awesome code was written by 1Marc, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 1Marc ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Stacking Transforms with RaphaelJS</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <form id="transforms">
  <p style="text-align:left">Try stacking transforms by clicking "apply transform" and then add another.</p>
  <select id="transforms-select">
    <option data-transform="T">Absolute Translate T (x, y)</option>
    <option data-transform="S">Absolute Scale S (sx, sy, [cx], [cy])</option>
    <option data-transform="R">Absolute Rotate R (deg, [cx], [cy])</option>
    <option data-transform="t">Relative Translate t (x, y)</option>
    <option data-transform="s">Relative Scale s (sx, sy, [cx], [cy])</option>
    <option data-transform="r">Relative Rotate r (deg, [cx], [cy])</option>
  </select>
  <br><br>
  <div class="translate-field" data-transform="t">
    x: <input type=range min=-500 max=500 value=0>
    y: <input type=range min=-500 max=500 value=0>
  </div>
  <div class="translate-field" data-transform="s">
    sx: <input type=range min=-5.0 max=5.0 value=1.0 step="0.1">
    sy: <input type=range min=-5.0 max=5.0 value=1.0 step="0.1">
    <br>
    cx: <input type=range min=-500 max=500 value=0>
    cy: <input type=range min=-500 max=500 value=0>
  </div>
  <div class="translate-field" data-transform="r">
    deg: <input type=range min=-360 max=360 value=0>
    cx: <input type=range min=-500 max=1000 value=500>
    cy: <input type=range min=-500 max=1000 value=500>
  </div><br>
  <button>apply transform</button>
  <br><br>
  <div id="results">result: </div>
</form>

<div id="paper"></div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/1Marc/stacking-transforms-with-raphaeljs-rsmbF */
#paper {
  position: absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  z-index: -1;
}

svg {
  width: 100%;
  height: 100%;
}

form {
  position: absolute;
  right: 10%;
  top: 10%;
  z-index: 9999999;
  text-align: right;
  background: rgba(255, 255, 255, 0.7);
  border: 3px solid #ddd;
  padding: 0 20px 20px;
  width: 50%;
  min-width: 500px;
}

form,
form select,
form input {
  font-size: 18px;
}

#transforms table { 
  float: right; 
}

/*Downloaded from https://www.codeseek.co/1Marc/stacking-transforms-with-raphaeljs-rsmbF */
// converted SVG to RaphaelJS with rappar.js
// https://github.com/DmitryBaranovskiy/rappar
var html5svg = [{"type":"path","fill":"#E44D26","stroke":"none","path":"M107.644,470.877 74.633,100.62 437.367,100.62 404.321,470.819 255.778,512 \t\t\tz"},{"type":"path","fill":"#F16529","stroke":"none","path":"M256,480.523 376.03,447.246 404.27,130.894 256,130.894 \t\t\tz"},{"type":"path","fill":"#EBEBEB","stroke":"none","path":"M256,268.217 195.91,268.217 191.76,221.716 256,221.716 256,176.305 255.843,176.305 142.132,176.305 143.219,188.488 154.38,313.627 256,313.627z"},{"type":"path","fill":"#EBEBEB","stroke":"none","path":"M256,386.153 255.801,386.206 205.227,372.55 201.994,336.333 177.419,336.333 156.409,336.333 162.771,407.634 255.791,433.457 256,433.399z"},{"type":"path","fill":"#000","stroke":"none","path":"M108.382,0h23.077v22.8h21.11V0h23.078v69.044H152.57v-23.12h-21.11v23.12h-23.077V0z"},{"type":"path","fill":"#000","stroke":"none","path":"M205.994,22.896h-20.316V0h63.72v22.896h-20.325v46.148h-23.078V22.896z"},{"type":"path","fill":"#000","stroke":"none","path":"M259.511,0h24.063l14.802,24.26L313.163,0h24.072v69.044h-22.982V34.822l-15.877,24.549h-0.397l-15.888-24.549v34.222h-22.58V0z"},{"type":"path","fill":"#000","stroke":"none","path":"M348.72,0h23.084v46.222h32.453v22.822H348.72V0z"},{"type":"path","fill":"#FFFFFF","stroke":"none","path":"M255.843,268.217 255.843,313.627 311.761,313.627 306.49,372.521 255.843,386.191 255.843,433.435 348.937,407.634 349.62,399.962 360.291,280.411 361.399,268.217 349.162,268.217z"},{"type":"path","fill":"#FFFFFF","stroke":"none","path":"M255.843,176.305 255.843,204.509 255.843,221.605 255.843,221.716 365.385,221.716 365.385,221.716 365.531,221.716 366.442,211.509 368.511,188.488 369.597,176.305z"}],
    paper = Raphael('paper'),
    set = paper.add(html5svg),
    $fields = $('.translate-field').hide(),
    $results = $("#results"),
    transforms = [],
    result = '',
    selectedTransform;

$fields.first().show();
selectedTransform = $fields.first().data('transform');

$("#transforms-select").on("change", function(){
  $fields.hide();
  selectedTransform = $(this).find(":selected").data('transform');
  $('.translate-field[data-transform="' + selectedTransform.toLowerCase() + '"]').show();
});

$(".translate-field").on("change", function(){
  var copyTransforms = transforms.slice(0);
  copyTransforms.push( getNewTransform() );
  
  renderTransforms(copyTransforms);
});

$("#transforms").on("submit", function(e){
  transforms.push( getNewTransform() );
  renderTransforms(transforms);
  
  return false;
});

function getNewTransform() {
  var vals = $.map($('input:visible'), function(input){ 
    return $(input).val();
  });
  
  return selectedTransform + vals;
}

function renderTransforms(t) {
  set.transform(t);
  
  var results = 'tranform: ' + t.join(' ') + '<br>',
      m = $.map(set[0].matrix, function(num){
        return Math.round(num * 10) / 10;
      });
  
  results += 'matrix:<br><table>';
  results += '<tr><td>| </td><td>' + m[0] +'</td><td> '+ m[1] +'</td><td> '+ m[2] + '</td><td> |</td></tr>';
  results += '<tr><td>| </td><td>' + m[3] +'</td><td>  '+ m[4] +'</td><td> '+ m[5] + '</td><td> |</td></tr>';
  results += '<tr><td>|  </td><td> 0</td><td> 0</td><td> 1</td><td> |</td></tr></table>';
  
  $results.html(results);
}

Comments