dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
79 lines (72 loc) • 4.44 kB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test Dashed Stroke</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="gfxRenderer:'canvas',async:true, isDebug:true"></script>
<script type="text/javascript">
require([
"dojo/ready",
"dojo/_base/array",
"dojo/dom",
"dojo/on",
"dojox/gfx",
"dojox/gfx/matrix",
"dojox/gfx/Moveable",
"dojox/gfx/svg"],
function(ready, array, dom, on, gfx, matrix, Moveable, svg) {
function makeScene(surface, renderer){
surface.createText({x:250,y:50,text:renderer})
.setFill("black")
.setFont({family:'sans-serif', size:'40pt'})
;
surface.createCircle({cx:130,cy:200,r:70}).setStroke({width:2, style:"dashdot", color:'blue'}).setFill("rgba(162,205,90,.3)");
new Moveable(surface.createLine({x1:200,y1:200,x2:400,y2:300}).setStroke({width:2, style:"dashdot", color:'black'}));
surface.createRect({x:200,y:200}).setFill("rgba(162,205,90,.3)").setStroke({width:6, style:"longdash", color:'black'});
surface.createRect({x:300,y:50,r:10}).setStroke({width:6, style:"dashdot", color:'red'}).setFill("rgba(162,205,90,.3)");
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)"));
// MoveTo + lineTo combine in one M xx,xx,...,xxx [Absolute]
surface.createPath()
.setStroke({color:'rgb(110,139,61)', width:4, style:'longdash'})
.setFill('rgba(162,205,90,.3)')
.setShape({path:"M 10.499686,210,100.174931,378.56990,40,290Z"})
;
// MoveTo + lineTo combine + lineTo [Relative]
surface.createPath()
.setStroke({color:'rgb(110,139,61)', width:4, style:'longdash'})
.setFill('rgba(162,205,90,.3)')
.setShape({path:"m 300.499686,210,130,50,40,90 l 90,-150 Z"})
;
//PI
surface.createPath()
.setStroke({color:'rgb(110,139,61)', width:4, style:'shortdashdot'})
.setFill('rgba(162,205,90,.3)')
.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"})
;
surface.createPath()
.setStroke({color: "black", style:'longdash', width:3})
.setFill('rgba(162,205,90,.3)')
.setShape({path:"M400 100 500 100 500 200Q500 250 425 175T400 100z"})
;
new Moveable(surface.createPolyline({points:[50,50,80,130,160,90,110,270]}).setStroke({width:4, style:"dashdot", color:'black'}));
}
ready(function(){
var surface = gfx.createSurface(dom.byId("gfx_holder"), 600, 550);
makeScene(surface, "Canvas");
gfx.switchTo(svg);
surface = gfx.createSurface(dom.byId("svg_holder"), 600, 550);
makeScene(surface, "SVG");
var hasSetLineDash = typeof document.createElement("canvas").getContext("2d").setLineDash == "function";
dom.byId("holder").innerHTML = "Native dashed stroke: " + hasSetLineDash+"</br>";
});
});
</script>
</head>
<body style="font-family:sans-serif;font-size:12pt">
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/>
The left drawing uses the Canvas renderer. The right drawing uses the SVG Renderer for reference purpose.</br>
<span id="holder" style="color: red"></span>
<div id="gfx_holder" style="width: 600px; height: 550px; border: solid;display:inline-block"></div>
<div id="svg_holder" style="width: 600px; height: 550px; border: solid;display:inline-block"></div>
</body>
</html>