OpenLayers OpenLayers

root/trunk/openlayers/tests/Renderer/Canvas.html

Revision 7862, 2.8 kB (checked in by crschmidt, 5 months ago)

Add support for a Canvas renderer. This renderer will allow for some new
capabilties in OpenLayers Vector drawing, including:

  • Vector support for iPhone, Safari 2.x series browsers
  • Improved performance of dragging the map with a large number of
    geometries.

The Vector layer default renderer order is now SVG, VML, Canvas, so browsers
with Canvas support and no SVG or VML will be able to draw vectors.

The Canvas layer has a number of limitations: getFeatureFromEvent is much
slower than the other types of layer, and any change to any feature requires a
redraw of the entire canvas. Because Canvas is typically a pretty fast
drawing implementation, the latter is less problematic than it might otherwise
be.

r=pagameba,fred, with glances from a couple other people.
(Closes #1512)

Line 
1 <html>
2 <head>
3 <script src="../../lib/OpenLayers.js"></script>
4   <script type="text/javascript">
5     var supported = OpenLayers.Renderer.Canvas.prototype.supported();
6     function test_Renderer_Canvas_constructor(t) {
7         if (!supported) { t.plan(0); return; }
8         t.plan(2);
9         var el = document.body;
10         el.id = "foo";
11         var r = new OpenLayers.Renderer.Canvas(el.id);
12        
13         t.ok(r instanceof OpenLayers.Renderer.Canvas, "new OpenLayers.Renderer.Canvas returns Renderer.Canvas object" );
14         t.ok(r.container == el, "renderer container is correctly set");
15     }
16    
17     function test_Renderer_Canvas_setextent(t) {
18         if (!supported) { t.plan(0); return; }
19         t.plan(2);
20         var el = document.body;
21         el.id = "foo";
22         var r = new OpenLayers.Renderer.Canvas(el.id);
23        
24         var extent = new OpenLayers.Bounds(1,2,3,4);
25         r.resolution = 1;
26         r.setExtent(extent);
27         t.ok(r.extent.equals(extent), "extent is correctly set");
28         t.eq(r.resolution, null, "resolution nullified");
29     }
30    
31     function test_Renderer_Canvas_setsize(t) {
32         if (!supported) { t.plan(0); return; }
33         t.plan(2);
34        
35         var el = document.body;
36         el.id = "foo";
37         var r = new OpenLayers.Renderer.Canvas(el.id);
38         var size = new OpenLayers.Size(1,2);
39         r.resolution = 1;
40         r.setSize(size);
41         t.ok(r.size.equals(size), "size is correctly set");
42         t.eq(r.resolution, null, "resolution nullified");
43     }
44    
45     function test_Renderer_Canvas_getresolution(t) {
46         if (!supported) { t.plan(0); return; }
47         t.plan(2);
48        
49         var el = document.body;
50         el.id = "foo";
51         var r = new OpenLayers.Renderer.Canvas(el.id);
52         var map = new OpenLayers.Map("map");
53         r.map = map;
54         var resolution = r.getResolution();
55         t.eq(resolution, map.getResolution(), "resolution matches the map resolution");
56         t.eq(r.resolution, resolution, "resolution is correctly set");
57     }
58
59     function test_Renderer_Canvas_destroy(t) {
60         if (!supported) { t.plan(0); return; }
61         t.plan(5);
62
63         var el = document.body;
64         el.id = "foo";
65         var r = new OpenLayers.Renderer.Canvas(el.id);
66         r.container = document.createElement("div");
67         r.extent = new OpenLayers.Bounds(1,2,3,4);
68         r.size = new OpenLayers.Size(1,2);
69         r.resolution = 1;
70         r.map = {};
71
72         r.destroy();
73
74         t.eq(r.container, null, "container nullified");
75         t.eq(r.extent, null, "extent nullified");
76         t.eq(r.size, null, "size nullified");
77         t.eq(r.resolution, null, "resolution nullified");
78         t.eq(r.map, null, "map nullified");
79     }
80
81   </script>
82 </head>
83 <body>
84 <div id="map" style="width:500px;height:550px"></div>
85 </body>
86 </html>
Note: See TracBrowser for help on using the browser.