source: Dev/trunk/src/client/dojox/gfx/tests/test_clip.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 5.9 KB
Line 
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 Clip</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="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                                function(ready, array, dom, on, gfx, matrix, Moveable) {
17
18                                var surface, clipped = [];
19                               
20                                var drawGrid = function(){
21                                        var sz = surface.getDimensions();
22                                        for (var r=0;r<sz.height; r+=50){
23                                                surface.createLine({y1: r, x1:0, x2:sz.width, y2:r}).setStroke({width:1, color:"#cfcfcf"});
24                                        }
25                                        for (var c=0; c<sz.width; c+=50){
26                                                surface.createLine({y1: 0, x1:c, x2:c, y2:sz.height}).setStroke({width:1, color:"#cfcfcf"});
27                                        }
28                                };
29                                var img = "./images/maps.png";
30                               
31                                var buildScene = function(){
32                                        clipped = [];
33                                        var container = dom.byId("gfx_holder");
34                                        surface = gfx.createSurface(container, 600, 550);
35                                        surface.whenLoaded(function(){
36                                                drawGrid();
37                                                clipped.push(surface.createImage({src:img, width:200,height:200}).setClip({x:10,y:80,width:50,height:50}).setTransform(matrix.translate(200,200)));
38                                                surface.createRect({width:200,height:200}).setStroke("red").setTransform(matrix.translate(200,200));
39                                                // clip = ellipse
40                                                clipped.push(surface.createImage({src:img, x:100,y:50,width:200,height:200}).setClip({cx:200,cy:100,rx:20,ry:30}));
41                                                surface.createRect({x:100,y:50,width:200,height:200}).setStroke("green");
42                                                // clip = circle
43                                                clipped.push(surface.createImage({src:img, x:0,y:350,width:200,height:200}).setClip({cx:100,cy:425,rx:60,ry:60}));
44                                                surface.createRect({x:0,y:350,width:200,height:200}).setStroke("blue");
45                                                // clip = path
46                                                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"}));
47                                                surface.createRect({x:300,y:350,width:200,height:200}).setStroke("#00FFFF");
48                                                // clip = polyline
49                                                clipped.push(surface.createImage({src:img, x:300,y:0,width:200,height:200}).setClip({points:[350,0,450,50,380,130,300,110]}));
50                                                surface.createRect({x:300,y:0,width:200,height:200}).setStroke("#FF00FF");
51                                               
52                                                var g1 = surface.createGroup().setTransform(matrix.translate(50,200)).setClip({x:20, y:20, width:90, height:150});
53                                                var g = g1.createGroup();
54                                                g.createRect({width:70, height:100}).setFill("#8B8878");
55                                                g.createEllipse({cx:50,cy:90,rx:40,ry:20}).setFill("#CDB79E");
56                                                g.setClip({x:0,y:60,width:80,height:30});
57                                                g.createRect(g.getBoundingBox()).setStroke("#CDB79E");
58                                                clipped.push(g);
59                                               
60                                                g = g1.createGroup();
61                                                g.createRect({width:70, height:100}).setFill("#8B8878");
62                                                g.createEllipse({cx:50,cy:90,rx:40,ry:20}).setFill("#CDB79E");
63                                                g.setClip({x:0,y:60,width:70,height:50}).setTransform(matrix.translate(50,50));
64                                                g.createRect(g.getBoundingBox()).setStroke("#CDB79E");
65                                                clipped.push(g);
66                                                surface.createRect(g1.getBoundingBox()).setStroke("#8B8878").setTransform(matrix.translate(50,200));
67                                               
68                                                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)));
69                                                g = surface.createGroup();
70                                                var gg = g.createGroup().setTransform(matrix.scaleAt(2,2,50,250)).setClip({x:100, y:300, width:50, height:50});
71                                                gg.createRect({x:50,y:250,width:100, height:100}).setFill("red");
72                                                clipped.push(gg);
73                                                clipped.push(surface.createRect({x:50,y:350,width:50, height:50}).setClip({x:75, y:375, width:25, height:25}).setFill("green"));
74
75
76                                                array.forEach(clipped, function(s){
77                                                        new Moveable(s);
78                                                });
79                                               
80                                        });
81                                };
82                               
83                                var switchRenderer = function(){
84                                        var select = dom.byId("selectGfx");
85                                        var r = select.options[select.selectedIndex].value;
86                                        if(surface){
87                                                surface.destroy();
88                                        }
89                                        require(["dojox/gfx/"+r], function(r){
90                                                gfx.switchTo(r);
91                                                buildScene();
92                                                dom.byId("noClip").value = clipped[0]._oldClip ? "Set clip" : "Remove clip";
93                                        });
94                                };
95                               
96                                ready(function() {
97                                        on(dom.byId("noClip"), "click", function(){
98                                                array.forEach(clipped,function(s){
99                                                        var c = s.getClip();
100                                                        s.setClip(s._oldClip);
101                                                        s._oldClip = c;
102                                                });
103                                                dom.byId("noClip").value = clipped[0]._oldClip ? "Set clip" : "Remove clip";
104                                        });
105                                        var select = dom.byId("selectGfx");
106                                        on(select,"change",function(e){
107                                                switchRenderer();
108                                        });
109                                        array.forEach(select.options, function(opt,i){
110                                                if (gfx.renderer.indexOf(opt.value) !== -1){
111                                                        select.selectedIndex = i;
112                                                        switchRenderer();
113                                                }
114                                        });
115                                });
116                        });
117
118                </script>
119        </head>
120        <body style="font-family:sans-serif;font-size:10pt">
121                <h1>Test Clip</h1>
122                <p>This page illustrates the gfx clipping api. This api allows to define a clipping area on any gfx Shape types
123                (including group). The supported clipping geometry are rectangle, ellipse, polyline and path, with the following exceptions:</p>
124                        <ul>
125                                <li>VML only supports rectangular clipping shape.</li>
126                                <li>The gfx Silverlight implementation does not support Path clipping geometry.</li>
127                        </ul>
128                <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>                   
129                GFX Renderer: <select id="selectGfx">
130                  <option value="svg">SVG</option>
131                  <option value="canvasWithEvents">Canvas</option>
132                  <option value="silverlight">Silverlight (IE)</option>
133                  <option value="vml">VML (IE <9)</option>
134                </select>
135                <div id="gfx_holder" style="width: 600px; height: 550px; border: solid;background-color: #eeeeee"></div>                       
136                <input type="button" value="Remove clip" id="noClip"/>
137        </body>
138</html>
Note: See TracBrowser for help on using the repository browser.