bezier.html

   1 <?xml version="1.0" encoding="UTF-8"?>
   2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
   3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
   4 <head>
   5     <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
   6     <link rel="stylesheet" href="style/pixelless.css" type="text/css"/>
   7     <script type="text/javascript" src="script/util.js"></script>
   8     <script type="text/javascript" src="script/geometry.js"></script>
   9     <script type="text/javascript" src="script/canvas.js"></script>
  10     <title>Bezier Curves</title>
  11     <style type="text/css">
  12         canvas {
  13             border: 1px solid;
  14         }
  15     </style>
  16 </head>
  17 <body>
  18 <div id="container">
  19     <div class="content header">
  20         <h1>Bezier Curves</h1>
  21     </div>
  22
  23     <div class="content">
  24         <canvas id="target" width="800px" height="500px">Convas is not supported in this browser.</canvas>
  25         <div class="empty_footer">
  26         </div>
  27     </div>
  28 </div>
  29 <div id="footer">
  30     <div class="content">
  31         &copy; Copyright
  32     </div>
  33 </div>
  34 <script type="text/javascript" language="JavaScript">
  35     var ctx = document.getElementById('target').getContext('2d');
  36     ctx.translate(-.5, -.5);
  37
  38     var colors = [
  39         'rgba(255, 140, 255, .9)',
  40         'rgba(140, 255, 255, .9)',
  41         'rgba(255, 255, 140, .9)',
  42         'rgba(150, 255, 150, .9)',
  43         'rgba(255, 150, 150, .9)',
  44         'rgba(150, 150, 255, .9)',
  45         'rgba(220, 220, 220, .9)'
  46     ];
  47
  48     function Curve(p1, c1, p2, c2)
  49     {
  50         this.p1 = p1;
  51         this.p2 = p2;
  52         this.c1 = c1;
  53         this.c2 = c2;
  54         this.color = colors.pick();
  55     }
  56
  57     Curve.prototype.toString = function()
  58     {
  59         return ['[', this.p1, 'x', this.c1, ' ~ ', this.p2,  'x', this.c2, ']'].join('');
  60     };
  61
  62     Curve.prototype.draw = function(ctx)
  63     {
  64         with (this) {
  65             ctx.strokeStyle = 'rgba(160, 160, 160, .5)';
  66             ctx.strokeCircle(p1.x, p1.y, 5).beginPath().moveTo(p1.x, p1.y).lineTo(c1.x, c1.y).stroke().closePath().strokeRect(c1.x - 3, c1.y - 3, 6, 6);
  67             ctx.strokeCircle(p2.x, p2.y, 5).beginPath().moveTo(p2.x, p2.y).lineTo(c2.x, c2.y).stroke().closePath().strokeRect(c2.x - 3, c2.y - 3, 6, 6);
  68             ctx.strokeStyle = color;
  69             ctx.beginPath().moveTo(p1.x, p1.y).bezierCurveTo(c1.x, c1.y, c2.x, c2.y, p2.x, p2.y).stroke().closePath();
  70         }
  71     };
  72
  73     var nodes = [];
  74     var curves = [];
  75
  76     function addCurve(p1, c1, p2, c2)
  77     {
  78         var c = new Curve(p1, c1, p2, c2);
  79         nodes.push(c1, c2, p1, p2);
  80         curves.push(c);
  81         redraw();
  82     }
  83
  84     function redraw()
  85     {
  86         ctx.clearRect(0, 0, w, h);
  87
  88         curves.map(function(c) {
  89             c.draw(ctx)
  90         });
  91     }
  92
  93     var ismousedown = false;
  94     var currentObj;
  95     var enterPoint = null;
  96
  97     function getPos(e)
  98     {
  99         return new Point(e.clientX - e.target.offsetLeft, e.clientY - e.target.offsetTop);
 100     }
 101
 102     function getObject(pos)
 103     {
 104         var i = -1, n = nodes.length;
 105         while (++i < n) {
 106             var p = nodes[i];
 107             if (p.inVicinityOf(pos)) return p;
 108         }
 109         return null;
 110     }
 111
 112     function mousedown(e)
 113     {
 114         var pos = getPos(e);
 115         ismousedown = true;
 116         currentObj = getObject(pos);
 117         if (!currentObj)enterPoint = pos;
 118         redraw();
 119     }
 120
 121     function mousemove(e)
 122     {
 123         var pos = getPos(e);
 124         if (currentObj) {
 125             currentObj.x = pos.x;
 126             currentObj.y = pos.y;
 127             redraw();
 128         }
 129     }
 130
 131     function mouseup(e)
 132     {
 133         if (enterPoint) {
 134             var pos = getPos(e);
 135             if (!pos.inVicinityOf(enterPoint)) {
 136                 var dx = pos.x - enterPoint.x;
 137                 var dy = pos.y - enterPoint.y;
 138                 addCurve(enterPoint, new Point(pos.x - dx * .6, pos.y - dy * .6), pos, new Point(pos.x - dx * .3, pos.y - dy * .3));
 139             }
 140             enterPoint = null;
 141         }
 142         ismousedown = false;
 143         currentObj = null;
 144     }
 145
 146     document.getElementById('target').onmousedown = mousedown;
 147     document.getElementById('target').onmousemove = mousemove;
 148     document.getElementById('target').onmouseup = mouseup;
 149
 150     var w = 800, h = 500;
 151     var x = 20, y = 20, dx = 300, dy = 0;
 152
 153     var p1 = new Point(x, y);
 154     var c1 = new Point(x + dx, y + dy);
 155     var p2 = new Point(w - x, h - y);
 156     var c2 = new Point(w - x - dx, h - y - dy);
 157
 158     addCurve(p1, c1, p2, c2);
 159
 160 </script>
 161 </body>
 162 </html>