| 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|---|
| 2 | <html> |
|---|
| 3 | <head> |
|---|
| 4 | <title>Test Dashed Stroke</title> |
|---|
| 5 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
|---|
| 6 | <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="gfxRenderer:'canvas',async:true, isDebug:true"></script> |
|---|
| 7 | <script type="text/javascript"> |
|---|
| 8 | require([ |
|---|
| 9 | "dojo/ready", |
|---|
| 10 | "dojo/_base/array", |
|---|
| 11 | "dojo/dom", |
|---|
| 12 | "dojo/on", |
|---|
| 13 | "dojox/gfx", |
|---|
| 14 | "dojox/gfx/matrix", |
|---|
| 15 | "dojox/gfx/Moveable", |
|---|
| 16 | "dojox/gfx/svg"], |
|---|
| 17 | function(ready, array, dom, on, gfx, matrix, Moveable, svg) { |
|---|
| 18 | |
|---|
| 19 | function makeScene(surface, renderer){ |
|---|
| 20 | surface.createText({x:250,y:50,text:renderer}) |
|---|
| 21 | .setFill("black") |
|---|
| 22 | .setFont({family:'sans-serif', size:'40pt'}) |
|---|
| 23 | ; |
|---|
| 24 | |
|---|
| 25 | surface.createCircle({cx:130,cy:200,r:70}).setStroke({width:2, style:"dashdot", color:'blue'}).setFill("rgba(162,205,90,.3)"); |
|---|
| 26 | new Moveable(surface.createLine({x1:200,y1:200,x2:400,y2:300}).setStroke({width:2, style:"dashdot", color:'black'})); |
|---|
| 27 | surface.createRect({x:200,y:200}).setFill("rgba(162,205,90,.3)").setStroke({width:6, style:"longdash", color:'black'}); |
|---|
| 28 | surface.createRect({x:300,y:50,r:10}).setStroke({width:6, style:"dashdot", color:'red'}).setFill("rgba(162,205,90,.3)"); |
|---|
| 29 | new Moveable(surface.createEllipse({cx:300,cy:400, rx:120, ry:80}).setStroke({width:2, style:"dashdot", color:'black'}).setFill("rgba(162,205,90,.3)")); |
|---|
| 30 | |
|---|
| 31 | // MoveTo + lineTo combine in one M xx,xx,...,xxx [Absolute] |
|---|
| 32 | surface.createPath() |
|---|
| 33 | .setStroke({color:'rgb(110,139,61)', width:4, style:'longdash'}) |
|---|
| 34 | .setFill('rgba(162,205,90,.3)') |
|---|
| 35 | .setShape({path:"M 10.499686,210,100.174931,378.56990,40,290Z"}) |
|---|
| 36 | ; |
|---|
| 37 | // MoveTo + lineTo combine + lineTo [Relative] |
|---|
| 38 | surface.createPath() |
|---|
| 39 | .setStroke({color:'rgb(110,139,61)', width:4, style:'longdash'}) |
|---|
| 40 | .setFill('rgba(162,205,90,.3)') |
|---|
| 41 | .setShape({path:"m 300.499686,210,130,50,40,90 l 90,-150 Z"}) |
|---|
| 42 | ; |
|---|
| 43 | |
|---|
| 44 | //PI |
|---|
| 45 | surface.createPath() |
|---|
| 46 | .setStroke({color:'rgb(110,139,61)', width:4, style:'shortdashdot'}) |
|---|
| 47 | .setFill('rgba(162,205,90,.3)') |
|---|
| 48 | .setShape({path:"M 10.499686,177.03840 L 31.174931,178.56990 C 52.615925,154.32116 61.039171,82.595924 187.38789,96.634671 C 182.79339,403.95560 48.021426,436.37234 56.444675,499.41907 C 59.507674,535.15406 87.840417,557.10556 118.47041,558.38181 C 215.21014,555.06356 210.87089,424.63084 240.99038,95.868921 L 365.80760,95.868921 C 359.17110,211.75239 341.04836,327.63586 339.00636,441.22208 C 340.53786,516.77606 386.48285,557.10556 446.97708,557.61606 C 546.52456,560.93431 577.92030,444.79558 577.92030,395.27709 L 556.47931,395.27710 C 554.43731,436.11709 534.78306,465.47083 492.92207,467.25758 C 378.82535,468.78908 441.61683,266.63113 442.38258,97.400421 L 577.92030,98.166171 L 577.15455,11.636437 C 13.807491,8.9075799 85.312284,-2.1366151 10.499686,177.03840 z"}) |
|---|
| 49 | ; |
|---|
| 50 | |
|---|
| 51 | surface.createPath() |
|---|
| 52 | .setStroke({color: "black", style:'longdash', width:3}) |
|---|
| 53 | .setFill('rgba(162,205,90,.3)') |
|---|
| 54 | .setShape({path:"M400 100 500 100 500 200Q500 250 425 175T400 100z"}) |
|---|
| 55 | ; |
|---|
| 56 | new Moveable(surface.createPolyline({points:[50,50,80,130,160,90,110,270]}).setStroke({width:4, style:"dashdot", color:'black'})); |
|---|
| 57 | } |
|---|
| 58 | |
|---|
| 59 | ready(function(){ |
|---|
| 60 | var surface = gfx.createSurface(dom.byId("gfx_holder"), 600, 550); |
|---|
| 61 | makeScene(surface, "Canvas"); |
|---|
| 62 | gfx.switchTo(svg); |
|---|
| 63 | surface = gfx.createSurface(dom.byId("svg_holder"), 600, 550); |
|---|
| 64 | makeScene(surface, "SVG"); |
|---|
| 65 | var hasSetLineDash = typeof document.createElement("canvas").getContext("2d").setLineDash == "function"; |
|---|
| 66 | dom.byId("holder").innerHTML = "Native dashed stroke: " + hasSetLineDash+"</br>"; |
|---|
| 67 | }); |
|---|
| 68 | }); |
|---|
| 69 | |
|---|
| 70 | </script> |
|---|
| 71 | </head> |
|---|
| 72 | <body style="font-family:sans-serif;font-size:12pt"> |
|---|
| 73 | This test illustrates dashed stroke support for canvas renderer. The gfx implementation uses the native implementation if it is provided by the browser, or a custom implementation otherwise.<br/> |
|---|
| 74 | The left drawing uses the Canvas renderer. The right drawing uses the SVG Renderer for reference purpose.</br> |
|---|
| 75 | <span id="holder" style="color: red"></span> |
|---|
| 76 | <div id="gfx_holder" style="width: 600px; height: 550px; border: solid;display:inline-block"></div> |
|---|
| 77 | <div id="svg_holder" style="width: 600px; height: 550px; border: solid;display:inline-block"></div> |
|---|
| 78 | </body> |
|---|
| 79 | </html> |
|---|
