git.roojs.org Git - raphael/blob - test/integration.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   2     "http://www.w3.org/TR/html4/strict.dtd">
   3 <html>
   4   <head>
   5     <title>Raphael - Integration Tests</title>
   6     <script src="vendor/jquery.js" type="text/javascript"></script>
   7     <script src="../raphael.js" type="text/javascript"></script>
   8     <script type="text/javascript">
   9       var variations = [
  10         {stroke: "#000"},
  11         {stroke: "#000", fill: "#000"},
  12         {stroke: "#000", fill: "#000", opacity: .1},
  13         {fill: "#000", stroke: "#f00", "stroke-width": "5px"}
  14       ];
  15
  16       function drawPrimitives(target, primitive, x, y, width, height, curve) {
  17         var canvas = Raphael(target, 500, 120);
  18         $.each(variations, function(index, variation) {
  19           canvas[primitive](x + (index * 110), y, width, height, curve).attr(variation);
  20         });
  21       }
  22
  23       function embedImages(image) {
  24         var canvas = Raphael("images", 500, 120);
  25         canvas.image(image, 0, 5, 100, 100);
  26         canvas.image(image, 110, 5, 100, 100).attr({opacity: "0.75"});
  27         canvas.image(image, 220, 5, 100, 100).attr({opacity: "0.5"});
  28         canvas.image(image, 330, 5, 100, 100).attr({opacity: "0.25"});
  29       }
  30
  31       function drawLines(target, method, treatment, x, y, X, Y, width) {
  32         var canvas = Raphael(target, 600, 120);
  33         $.each(variations, function(index, variation) {
  34           canvas.path(variation)[treatment]().moveTo(x + (index * 110),y)[method](X,Y, width);
  35         });
  36       }
  37
  38       function drawCurves(target, method, treatment, x, y, x1, y1, x2, y2, x3, y3) {
  39         var canvas = Raphael(target, 600, 120);
  40         $.each(variations, function(index, variation) {
  41           canvas.path(variation)[treatment]().moveTo(x + (index * 110), y)[method](x1, y1, x2, y2, x3, y3);
  42         });
  43       }
  44
  45       function drawqCurves(target, method, treatment, x, y, x1, y1, x2, y2) {
  46         var canvas = Raphael(target, 600, 120);
  47         $.each(variations, function(index, variation) {
  48           var c = canvas.path(variation)[treatment]().moveTo(x + (index * 110), y)[method](x1, y1, x2, y2);
  49           alert(c.node.path);
  50         });
  51       }
  52
  53       window.onload = function () {
  54         drawPrimitives("circles", "circle", 50, 55, 50, 50);
  55         drawPrimitives("squares", "rect", 0, 5, 100, 100);
  56         drawPrimitives("rounded-squares", "rect", 0, 5, 100, 100, 20);
  57         drawPrimitives("ellipses", "ellipse", 50, 55, 50, 30);
  58         embedImages("image/raphael.png");
  59         drawLines("absolute-line", "lineTo", "absolutely", 5, 5, 100, 100)
  60         drawLines("relative-line", "lineTo", "relatively", 5, 5, 100, 100)
  61         drawLines("absolute-linec", "cplineTo", "absolutely", 5, 5, 100, 100, 50)
  62         drawLines("relative-linec", "cplineTo", "relatively", 5, 5, 100, 100, 50)
  63         drawCurves("absolute-curve", "curveTo", "absolutely", 5, 5, 10, 30, 90, 60, 30, 100)
  64         drawCurves("relative-curve", "curveTo", "relatively", 5, 5, 10, 30, 90, 60, 30, 100)
  65         drawqCurves("absolute-qcurve", "qcurveTo", "absolutely", 5, 5, 10, 50, 90, 100)
  66         drawqCurves("relative-qcurve", "qcurveTo", "relatively", 5, 5, 10, 50, 90, 100)
  67       };
  68     </script>
  69   </head>
  70   <body>
  71     <h1>Raphael Integration Tests</h1>
  72     <h2>Primitives</h2>
  73     <h3>Should draw 4 circles</h3>
  74     <div id="circles"></div>
  75     <h3>Should draw 4 squares</h3>
  76     <div id="squares"></div>
  77     <h3>Should draw 4 squares with rounded corners</h3>
  78     <div id="rounded-squares"></div>
  79     <h3>Should draw 4 ellipses</h3>
  80     <div id="ellipses"></div>
  81     <h3>Should embed 4 images with decreasing opacity</h3>
  82     <div id="images"></div>
  83     <h2>Paths</h2>
  84     <h3>Should draw 4 straight lines to an absolute point</h3>
  85     <div id="absolute-line"></div>
  86     <h3>Should draw 4 straight lines to a relative point</h3>
  87     <div id="relative-line"></div>
  88     <h3>Should draw 4 curved lines to an absolute point</h3>
  89     <div id="absolute-linec"></div>
  90     <h3>Should draw 4 curved lines to a relative point</h3>
  91     <div id="relative-linec"></div>
  92     <h3>Should draw 4 bicubic curves to an absolute point</h3>
  93     <div id="absolute-curve"></div>
  94     <h3>Should draw 4 bicubic curves to a relative point</h3>
  95     <div id="relative-curve"></div>
  96     <h3>Should draw 4 quadratic curves to an absolute point</h3>
  97     <div id="absolute-qcurve"></div>
  98     <h3>Should draw 4 quadratic curves to a relative point</h3>
  99     <div id="relative-qcurve"></div>
 100   </body>
 101 </html>