chao
/
mini_cocopi


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
							<!DOCTYPE HTML>
<html>
<!--
Copyright 2007 The Closure Library Authors. All Rights Reserved.

Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
<head>
<title>The SVG tiger drawn with goog.graphics</title>
<script type="text/javascript" src="../../base.js"></script>
<script type="text/javascript">

goog.require('goog.dom');
goog.require('goog.graphics');

</script>
<script src="tigerdata.js"></script>
<script type="text/javascript">

function drawTiger() {
  var graphics = goog.graphics.createGraphics(600, 600);

  var fills = {};
  var strokes = {};

  var segmentFunctions = {
    'z': goog.graphics.Path.prototype.close,
    'M': goog.graphics.Path.prototype.moveTo,
    'L': goog.graphics.Path.prototype.lineTo,
    'C': goog.graphics.Path.prototype.curveTo
  };

  function createPath(stroke, fill, paths) {

    var fillObject;

    if (fill == null) {
      fillObject = null;
    } else if (fill in fills) {
      fillObject = fills[fill];
    } else {
      fillObject = new goog.graphics.SolidFill(fill);
      fills[fill] = fillObject;
    }

    var strokeObject;
    if (stroke == null) {
      strokeObject = null;
    } else {
      var strokeKey;
      if (typeof stroke == 'string') {
        strokeKey = stroke;
      } else {
        strokeKey = stroke.c + stroke.w;
      }
      if (strokeKey in strokes) {
        strokeObject = strokes[strokeKey];
      } else if (typeof stroke == 'string') {
        strokeObject = null;
      } else {
        strokeObject = new goog.graphics.Stroke(stroke.w, stroke.c);
      }
    }
    strokes[strokeKey] = strokeObject;

    var pathObject = graphics.createPath();
    for (var i = 0, path; path = paths[i]; i++) {
      segmentFunctions[path.t].apply(pathObject, path.p);
    }

    graphics.drawPath(pathObject, strokeObject, fillObject);
  }

  var d0 = new Date;
  for (var i = 0; i < tigerData.length; i++) {
    var d = tigerData[i];
    createPath(d.s, d.f, d.p);
  }

  graphics.render(goog.dom.getElement('tiger-container'));
  var d1 = new Date;

  goog.dom.setTextContent(goog.dom.getElement('out'),
                          'Creating took: ' + (d1 - d0));
  window.setTimeout(function() {
    var d2 = new Date;
    goog.dom.setTextContent(goog.dom.getElement('out-2'),
                            'Drawing took: ' + (d2 - d1));
  }, 1);
}


</script>
</head>
<body>

<div id="tiger-container" style='border:1px solid black;width:600px;height:600px'></div>
<div id="out"></div>
<div id="out-2"></div>
<script>
drawTiger();
</script>
</body>
</html>