Skip to content
This repository
Fetching contributors…

Cannot retrieve contributors at this time

file 97 lines (88 sloc) 2.66 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97
<!doctype html>
<head>
  <title>Bonsai Movie Library</title>
  <script>
  var require = {
    baseUrl: '../../src',
    urlArgs: +new Date
  };
  </script>
  <script src=../../lib/requirejs/require.js></script>
  <style type="text/css">
    body, html { margin: 0; font-family: sans-serif; font-size: 14px; width: 100%; height: 100%; }
    #edit {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 10;
        background: rgba(255,255,255, 0.5);
    }
    textarea {
      width:100%;
      height: 100%;
      border: none;
      background: transparent;
      outline: none;
      font-size: 14px;
      font-family: monospace;
    }
    .hidden textarea {
      display: none;
    }
    #edit.hidden {
      background: transparent;
    }
    #bs {
      box-shadow: 0 0 20px rgba(0,0,0,0.5);
      margin: 70px auto;
      width: 500px;
      height: 500px;
    }
  </style>
</head>
<body>
  <div id="edit">
    <div id="buttonbar">
        <button onclick="showEditor();">show editor</button>
        <button onclick="hideEditor();">hide editor</button>
        <button onclick="load()">Load</button>
    </div>
    <textarea>
/**
* Tests a simple shape creation.
*/

// bs.Path.rect returns a {DisplayObject}
var rectPath = new bonsai.Path.rect(150, 150, 150, 150);

// add [DisplayObjectInstance] to [Stage]
stage.addChild(rectPath.attr({strokeWidth:1, fill:'red', opacity:0.4}));

// full circle
stage.addChild(bonsai.Path.circle(52, 52, 50).attr({fill: 'red', strokeWidth:1, line: 'yellow'}));

// half circle
stage.addChild(bonsai.Path.arc(202, 52, 50, Math.PI/2, Math.PI).attr({fill: 'red', strokeWidth:1, line: 'green'})).attr({x:140,y:30});

// half circle
stage.addChild(new bonsai.Path('M40,140 L40,100 L10,100 C10,10 90,10 90,100 L60,100 L60,140 M140,50 C70,180 195,180 190,100 z').attr({fill: 'blue', strokeWidth: 1}));
    </textarea>
  </div>
  <div id=bs></div>

  <script>
    function load(){
      var stageNode = document.getElementById('bs');
      var script = document.getElementsByTagName('textarea')[0].value;
      stageNode.innerHTML = '';

      require(['player'], function(bs) {
        var opts = {
          width: 500,
          height: 500,
          noCache: true
        };
        stageNode.style.width = opts.width + 'px';
        stageNode.style.height = opts.height + 'px';
        var movie = bs.runCode(stageNode, '.', script, opts);
      });
    }

    function showEditor() { document.getElementById('edit').className = 'visible'; }
    function hideEditor() { document.getElementById('edit').className = 'hidden'; }

  </script>
</body>
Something went wrong with that request. Please try again.