| 1 | <html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" > |
|---|
| 2 | <head> |
|---|
| 3 | <title>Approximation of an arc with bezier</title> |
|---|
| 4 | <style type="text/css"> |
|---|
| 5 | @import "../../../../dojo/resources/dojo.css"; |
|---|
| 6 | @import "../../../../dijit/tests/css/dijitTests.css"; |
|---|
| 7 | </style> |
|---|
| 8 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
|---|
| 9 | <!-- SVGWEB { --> |
|---|
| 10 | <meta name="svg.render.forceflash" content="true"/> |
|---|
| 11 | <script src="svgweb/src/svg.js" data-path="svgweb/src"></script> |
|---|
| 12 | <script src="../../../../dojo/dojo.js" data-dojo-config="isDebug:true,forceGfxRenderer:'svg'" type="text/javascript"></script> |
|---|
| 13 | <!-- } --> |
|---|
| 14 | <script type="text/javascript"> |
|---|
| 15 | dojo.require("dojox.gfx"); |
|---|
| 16 | |
|---|
| 17 | makeShapes = function(){ |
|---|
| 18 | var surface = dojox.gfx.createSurface("test", 500, 300); |
|---|
| 19 | /* SVGWEB { */ |
|---|
| 20 | surface.whenLoaded(function() { |
|---|
| 21 | var g = surface.createGroup(); |
|---|
| 22 | |
|---|
| 23 | // create a reference ellipse |
|---|
| 24 | var rx = 200; |
|---|
| 25 | var ry = 100; |
|---|
| 26 | var startAngle = -30; |
|---|
| 27 | var arcAngle = -90; |
|---|
| 28 | var axisAngle = -30; |
|---|
| 29 | var e = g.createEllipse({rx: rx, ry: ry}).setStroke({}); |
|---|
| 30 | |
|---|
| 31 | // calculate a bezier |
|---|
| 32 | var alpha = dojox.gfx.matrix._degToRad(arcAngle) / 2; // half of our angle |
|---|
| 33 | var cosa = Math.cos(alpha); |
|---|
| 34 | var sina = Math.sin(alpha); |
|---|
| 35 | // start point |
|---|
| 36 | var p1 = {x: cosa, y: sina}; |
|---|
| 37 | // 1st control point |
|---|
| 38 | var p2 = {x: cosa + (4 / 3) * (1 - cosa), y: sina - (4 / 3) * cosa * (1 - cosa) / sina}; |
|---|
| 39 | // 2nd control point (symmetric to the 1st one) |
|---|
| 40 | var p3 = {x: p2.x, y: -p2.y}; |
|---|
| 41 | // end point (symmetric to the start point) |
|---|
| 42 | var p4 = {x: p1.x, y: -p1.y}; |
|---|
| 43 | |
|---|
| 44 | // rotate and scale poins as appropriate |
|---|
| 45 | var s = dojox.gfx.matrix.normalize([dojox.gfx.matrix.scale(e.shape.rx, e.shape.ry), dojox.gfx.matrix.rotateg(startAngle + arcAngle / 2)]); |
|---|
| 46 | p1 = dojox.gfx.matrix.multiplyPoint(s, p1); |
|---|
| 47 | p2 = dojox.gfx.matrix.multiplyPoint(s, p2); |
|---|
| 48 | p3 = dojox.gfx.matrix.multiplyPoint(s, p3); |
|---|
| 49 | p4 = dojox.gfx.matrix.multiplyPoint(s, p4); |
|---|
| 50 | // draw control trapezoid |
|---|
| 51 | var t = g.createPath().setStroke({color: "blue"}); |
|---|
| 52 | t.moveTo(p1.x, p1.y); |
|---|
| 53 | t.lineTo(p2.x, p2.y); |
|---|
| 54 | t.lineTo(p3.x, p3.y); |
|---|
| 55 | t.lineTo(p4.x, p4.y); |
|---|
| 56 | t.lineTo(p1.x, p1.y); |
|---|
| 57 | t.moveTo((p1.x + p4.x) / 2, (p1.y + p4.y) / 2); |
|---|
| 58 | t.lineTo((p2.x + p3.x) / 2, (p2.y + p3.y) / 2); |
|---|
| 59 | t.moveTo((p1.x + p2.x) / 2, (p1.y + p2.y) / 2); |
|---|
| 60 | t.lineTo((p3.x + p4.x) / 2, (p3.y + p4.y) / 2); |
|---|
| 61 | // draw a bezier |
|---|
| 62 | var b = g.createPath().setStroke({color: "red"}); |
|---|
| 63 | b.moveTo(p1.x, p1.y); |
|---|
| 64 | b.curveTo(p2.x, p2.y, p3.x, p3.y, p4.x, p4.y); |
|---|
| 65 | // move everything in a middle |
|---|
| 66 | g.setTransform([dojox.gfx.matrix.translate(250, 150), dojox.gfx.matrix.rotateg(axisAngle)]); |
|---|
| 67 | }); |
|---|
| 68 | /* } */ |
|---|
| 69 | }; |
|---|
| 70 | |
|---|
| 71 | dojo.addOnLoad(makeShapes); |
|---|
| 72 | |
|---|
| 73 | </script> |
|---|
| 74 | </head> |
|---|
| 75 | <body> |
|---|
| 76 | <h1>Approximation of an arc with bezier</h1> |
|---|
| 77 | <!--<p><button onclick="makeShapes();">Make</button></p>--> |
|---|
| 78 | <div id="test" style="width: 500px; height: 300px;"></div> |
|---|
| 79 | <p>That's all Folks!</p> |
|---|
| 80 | </body> |
|---|
| 81 | </html> |
|---|
