You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
79 lines
4.3 KiB
79 lines
4.3 KiB
<!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> |