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.
139 lines (126 loc) • 6.02 kB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test Clip</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="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"],
function(ready, array, dom, on, gfx, matrix, Moveable) {
var surface, clipped = [];
var drawGrid = function(){
var sz = surface.getDimensions();
for (var r=0;r<sz.height; r+=50){
surface.createLine({y1: r, x1:0, x2:sz.width, y2:r}).setStroke({width:1, color:"#cfcfcf"});
}
for (var c=0; c<sz.width; c+=50){
surface.createLine({y1: 0, x1:c, x2:c, y2:sz.height}).setStroke({width:1, color:"#cfcfcf"});
}
};
var img = "./images/maps.png";
var buildScene = function(){
clipped = [];
var container = dom.byId("gfx_holder");
surface = gfx.createSurface(container, 600, 550);
surface.whenLoaded(function(){
drawGrid();
clipped.push(surface.createImage({src:img, width:200,height:200}).setClip({x:10,y:80,width:50,height:50}).setTransform(matrix.translate(200,200)));
surface.createRect({width:200,height:200}).setStroke("red").setTransform(matrix.translate(200,200));
// clip = ellipse
clipped.push(surface.createImage({src:img, x:100,y:50,width:200,height:200}).setClip({cx:200,cy:100,rx:20,ry:30}));
surface.createRect({x:100,y:50,width:200,height:200}).setStroke("green");
// clip = circle
clipped.push(surface.createImage({src:img, x:0,y:350,width:200,height:200}).setClip({cx:100,cy:425,rx:60,ry:60}));
surface.createRect({x:0,y:350,width:200,height:200}).setStroke("blue");
// clip = path
clipped.push(surface.createImage({src:img, x:300,y:350,width:200,height:200}).setClip({d:"M 350,350 C314,414 317,557 373,450.0000 z"}));
surface.createRect({x:300,y:350,width:200,height:200}).setStroke("#00FFFF");
// clip = polyline
clipped.push(surface.createImage({src:img, x:300,y:0,width:200,height:200}).setClip({points:[350,0,450,50,380,130,300,110]}));
surface.createRect({x:300,y:0,width:200,height:200}).setStroke("#FF00FF");
var g1 = surface.createGroup().setTransform(matrix.translate(50,200)).setClip({x:20, y:20, width:90, height:150});
var g = g1.createGroup();
g.createRect({width:70, height:100}).setFill("#8B8878");
g.createEllipse({cx:50,cy:90,rx:40,ry:20}).setFill("#CDB79E");
g.setClip({x:0,y:60,width:80,height:30});
g.createRect(g.getBoundingBox()).setStroke("#CDB79E");
clipped.push(g);
g = g1.createGroup();
g.createRect({width:70, height:100}).setFill("#8B8878");
g.createEllipse({cx:50,cy:90,rx:40,ry:20}).setFill("#CDB79E");
g.setClip({x:0,y:60,width:70,height:50}).setTransform(matrix.translate(50,50));
g.createRect(g.getBoundingBox()).setStroke("#CDB79E");
clipped.push(g);
surface.createRect(g1.getBoundingBox()).setStroke("#8B8878").setTransform(matrix.translate(50,200));
clipped.push(surface.createRect({x:50,y:50,width:100, height:100}).setClip({x:50, y:50, width:50, height:50}).setFill("yellow").setTransform(matrix.scaleAt(2,2,50,50)));
g = surface.createGroup();
var gg = g.createGroup().setTransform(matrix.scaleAt(2,2,50,250)).setClip({x:100, y:300, width:50, height:50});
gg.createRect({x:50,y:250,width:100, height:100}).setFill("red");
clipped.push(gg);
clipped.push(surface.createRect({x:50,y:350,width:50, height:50}).setClip({x:75, y:375, width:25, height:25}).setFill("green"));
array.forEach(clipped, function(s){
new Moveable(s);
});
});
};
var switchRenderer = function(){
var select = dom.byId("selectGfx");
var r = select.options[select.selectedIndex].value;
if(surface){
surface.destroy();
}
require(["dojox/gfx/"+r], function(r){
gfx.switchTo(r);
buildScene();
dom.byId("noClip").value = clipped[0]._oldClip ? "Set clip" : "Remove clip";
});
};
ready(function() {
on(dom.byId("noClip"), "click", function(){
array.forEach(clipped,function(s){
var c = s.getClip();
s.setClip(s._oldClip);
s._oldClip = c;
});
dom.byId("noClip").value = clipped[0]._oldClip ? "Set clip" : "Remove clip";
});
var select = dom.byId("selectGfx");
on(select,"change",function(e){
switchRenderer();
});
array.forEach(select.options, function(opt,i){
if (gfx.renderer.indexOf(opt.value) !== -1){
select.selectedIndex = i;
switchRenderer();
}
});
});
});
</script>
</head>
<body style="font-family:sans-serif;font-size:10pt">
<h1>Test Clip</h1>
<p>This page illustrates the gfx clipping api. This api allows to define a clipping area on any gfx Shape types
(including group). The supported clipping geometry are rectangle, ellipse, polyline and path, with the following exceptions:</p>
<ul>
<li>VML only supports rectangular clipping shape.</li>
<li>The gfx Silverlight implementation does not support Path clipping geometry.</li>
</ul>
<p>You can drag the shapes using the mouse, remove the clip using the button at the bottom, and change the gfx renderer in the combobox.</p>
GFX Renderer: <select id="selectGfx">
<option value="svg">SVG</option>
<option value="canvasWithEvents">Canvas</option>
<option value="silverlight">Silverlight (IE)</option>
<option value="vml">VML (IE <9)</option>
</select>
<div id="gfx_holder" style="width: 600px; height: 550px; border: solid;background-color: #eeeeee"></div>
<input type="button" value="Remove clip" id="noClip"/>
</body>
</html>