ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix initial offset and visibility issues in VML renderer; also make sure that all floats are converted to integers (previously using toFixed(), now using (num | 0)). p=tschaub,me, r=tschaub,me (closes #2465)

Browse Source 
git-svn-id: http://svn.openlayers.org/trunk/openlayers@10039 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
ahocevar
2010-02-10 07:04:31 +00:00
parent b19261d417
commit 6811dc3745
2 changed files with 43 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/OpenLayers/Renderer/VML.js
+34 -31
View File
@@ -11,7 +11,7 @@
* Render vector features in browsers with VML capability. Construct a new * Render vector features in browsers with VML capability. Construct a new
* VML renderer with the <OpenLayers.Renderer.VML> constructor. * VML renderer with the <OpenLayers.Renderer.VML> constructor.
* *
* Note that for all calculations in this class, we use toFixed() to round a * Note that for all calculations in this class, we use (num | 0) to truncate a
* float value to an integer. This is done because it seems that VML doesn't * float value to an integer. This is done because it seems that VML doesn't
* support float values. * support float values.
* *
@@ -63,7 +63,6 @@ OpenLayers.Renderer.VML = OpenLayers.Class(OpenLayers.Renderer.Elements, {
OpenLayers.Renderer.Elements.prototype.initialize.apply(this, OpenLayers.Renderer.Elements.prototype.initialize.apply(this,
arguments); arguments);
this.offset = {x: 0, y: 0};
}, },
/** /**
@@ -102,9 +101,9 @@ OpenLayers.Renderer.VML = OpenLayers.Class(OpenLayers.Renderer.Elements, {
arguments); arguments);
var resolution = this.getResolution(); var resolution = this.getResolution();
var left = extent.left/resolution; var left = (extent.left/resolution) | 0;
var top = extent.top/resolution - this.size.h; var top = (extent.top/resolution - this.size.h) | 0;
if (resolutionChanged) { if (resolutionChanged || !this.offset) {
this.offset = {x: left, y: top}; this.offset = {x: left, y: top};
left = 0; left = 0;
top = 0; top = 0;
@@ -233,8 +232,8 @@ OpenLayers.Renderer.VML = OpenLayers.Class(OpenLayers.Renderer.Elements, {
var yOffset = (style.graphicYOffset != undefined) ? var yOffset = (style.graphicYOffset != undefined) ?
style.graphicYOffset : -(0.5 * height); style.graphicYOffset : -(0.5 * height);
node.style.left = ((geometry.x/resolution - this.offset.x)+xOffset).toFixed(); node.style.left = (((geometry.x/resolution - this.offset.x)+xOffset) | 0) + "px";
node.style.top = ((geometry.y/resolution - this.offset.y)-(yOffset+height)).toFixed(); node.style.top = (((geometry.y/resolution - this.offset.y)-(yOffset+height)) | 0) + "px";
node.style.width = width + "px"; node.style.width = width + "px";
node.style.height = height + "px"; node.style.height = height + "px";
node.style.flip = "y"; node.style.flip = "y";
@@ -445,10 +444,13 @@ OpenLayers.Renderer.VML = OpenLayers.Class(OpenLayers.Renderer.Elements, {
/** /**
* Method: postDraw * Method: postDraw
* Some versions of Internet Explorer seem to be unable to set fillcolor * Does some node postprocessing to work around browser issues:
* and strokecolor to "none" correctly before the fill node is appended to * - Some versions of Internet Explorer seem to be unable to set fillcolor
* a visible vml node. This method takes care of that and sets fillcolor * and strokecolor to "none" correctly before the fill node is appended
* and strokecolor again if needed. * to a visible vml node. This method takes care of that and sets
* fillcolor and strokecolor again if needed.
* - In some cases, a node won't become visible after being drawn. Setting
* style.visibility to "visible" works around that.
* *
* Parameters: * Parameters:
* node - {DOMElement} * node - {DOMElement}
@@ -464,6 +466,7 @@ OpenLayers.Renderer.VML = OpenLayers.Class(OpenLayers.Renderer.Elements, {
node.strokecolor != strokeColor) { node.strokecolor != strokeColor) {
node.strokecolor = strokeColor; node.strokecolor = strokeColor;
} }
node.style.visibility = "visible";
}, },
@@ -483,10 +486,10 @@ OpenLayers.Renderer.VML = OpenLayers.Class(OpenLayers.Renderer.Elements, {
var resolution = this.getResolution(); var resolution = this.getResolution();
var scaledBox = var scaledBox =
new OpenLayers.Bounds((bbox.left/resolution - this.offset.x).toFixed(), new OpenLayers.Bounds((bbox.left/resolution - this.offset.x) | 0,
(bbox.bottom/resolution - this.offset.y).toFixed(), (bbox.bottom/resolution - this.offset.y) | 0,
(bbox.right/resolution - this.offset.x).toFixed(), (bbox.right/resolution - this.offset.x) | 0,
(bbox.top/resolution - this.offset.y).toFixed()); (bbox.top/resolution - this.offset.y) | 0);
// Set the internal coordinate system to draw the path // Set the internal coordinate system to draw the path
node.style.left = scaledBox.left + "px"; node.style.left = scaledBox.left + "px";
@@ -652,8 +655,8 @@ OpenLayers.Renderer.VML = OpenLayers.Class(OpenLayers.Renderer.Elements, {
if(!isNaN(geometry.x)&& !isNaN(geometry.y)) { if(!isNaN(geometry.x)&& !isNaN(geometry.y)) {
var resolution = this.getResolution(); var resolution = this.getResolution();
node.style.left = ((geometry.x /resolution - this.offset.x).toFixed() - radius) + "px"; node.style.left = (((geometry.x /resolution - this.offset.x) | 0) - radius) + "px";
node.style.top = ((geometry.y /resolution - this.offset.y).toFixed() - radius) + "px"; node.style.top = (((geometry.y /resolution - this.offset.y) | 0) - radius) + "px";
var diameter = radius * 2; var diameter = radius * 2;
@@ -718,9 +721,9 @@ OpenLayers.Renderer.VML = OpenLayers.Class(OpenLayers.Renderer.Elements, {
var comp, x, y; var comp, x, y;
for (var i = 0; i < numComponents; i++) { for (var i = 0; i < numComponents; i++) {
comp = geometry.components[i]; comp = geometry.components[i];
x = (comp.x/resolution - this.offset.x); x = (comp.x/resolution - this.offset.x) | 0;
y = (comp.y/resolution - this.offset.y); y = (comp.y/resolution - this.offset.y) | 0;
parts[i] = " " + x.toFixed() + "," + y.toFixed() + " l "; parts[i] = " " + x + "," + y + " l ";
} }
var end = (closeLine) ? " x e" : " e"; var end = (closeLine) ? " x e" : " e";
node.path = "m" + parts.join("") + end; node.path = "m" + parts.join("") + end;
@@ -751,9 +754,9 @@ OpenLayers.Renderer.VML = OpenLayers.Class(OpenLayers.Renderer.Elements, {
path.push("m"); path.push("m");
for (i=0, ilen=linearRing.components.length; i<ilen; i++) { for (i=0, ilen=linearRing.components.length; i<ilen; i++) {
comp = linearRing.components[i]; comp = linearRing.components[i];
x = comp.x / resolution - this.offset.x; x = (comp.x / resolution - this.offset.x) | 0;
y = comp.y / resolution - this.offset.y; y = (comp.y / resolution - this.offset.y) | 0;
path.push(" " + x.toFixed() + "," + y.toFixed()); path.push(" " + x + "," + y);
if (i==0) { if (i==0) {
path.push(" l"); path.push(" l");
} }
@@ -779,10 +782,10 @@ OpenLayers.Renderer.VML = OpenLayers.Class(OpenLayers.Renderer.Elements, {
drawRectangle: function(node, geometry) { drawRectangle: function(node, geometry) {
var resolution = this.getResolution(); var resolution = this.getResolution();
node.style.left = (geometry.x/resolution - this.offset.x) + "px"; node.style.left = ((geometry.x/resolution - this.offset.x) | 0) + "px";
node.style.top = (geometry.y/resolution - this.offset.y) + "px"; node.style.top = ((geometry.y/resolution - this.offset.y) | 0) + "px";
node.style.width = geometry.width/resolution + "px"; node.style.width = ((geometry.width/resolution) | 0) + "px";
node.style.height = geometry.height/resolution + "px"; node.style.height = ((geometry.height/resolution) | 0) + "px";
return node; return node;
}, },
@@ -801,8 +804,8 @@ OpenLayers.Renderer.VML = OpenLayers.Class(OpenLayers.Renderer.Elements, {
var textbox = this.nodeFactory(featureId + this.LABEL_ID_SUFFIX + "_textbox", "olv:textbox"); var textbox = this.nodeFactory(featureId + this.LABEL_ID_SUFFIX + "_textbox", "olv:textbox");
var resolution = this.getResolution(); var resolution = this.getResolution();
label.style.left = (location.x/resolution - this.offset.x).toFixed() + "px"; label.style.left = ((location.x/resolution - this.offset.x) | 0) + "px";
label.style.top = (location.y/resolution - this.offset.y).toFixed() + "px"; label.style.top = ((location.y/resolution - this.offset.y) | 0) + "px";
label.style.flip = "y"; label.style.flip = "y";
textbox.innerText = style.label; textbox.innerText = style.label;
@@ -869,8 +872,8 @@ OpenLayers.Renderer.VML = OpenLayers.Class(OpenLayers.Renderer.Elements, {
var comp, x, y; var comp, x, y;
for (var i=0, len=geometry.components.length; i<len; i++) { for (var i=0, len=geometry.components.length; i<len; i++) {
comp = geometry.components[i]; comp = geometry.components[i];
x = comp.x / resolution - this.offset.x; x = (comp.x / resolution - this.offset.x) | 0;
y = comp.y / resolution - this.offset.y; y = (comp.y / resolution - this.offset.y) | 0;
if ((i%3)==0 && (i/3)==0) { if ((i%3)==0 && (i/3)==0) {
path.push("m"); path.push("m");
} else if ((i%3)==1) { } else if ((i%3)==1) {
tests/Renderer/VML.html
+9 -2
View File
@@ -48,7 +48,7 @@
return; return;
} }
t.plan(3); t.plan(4);
OpenLayers.Renderer.Elements.prototype._setExtent = OpenLayers.Renderer.Elements.prototype._setExtent =
OpenLayers.Renderer.Elements.prototype.setExtent; OpenLayers.Renderer.Elements.prototype.setExtent;
@@ -71,8 +71,9 @@
t.eq(g_SetExtent, true, "Elements.setExtent() called"); t.eq(g_SetExtent, true, "Elements.setExtent() called");
t.ok(r.root.coordorigin == "2,4", "coordorigin is correct"); t.ok(r.root.coordorigin == "0,0", "coordorigin is correct");
t.ok(r.root.coordsize == "4,4", "coordsize is correct"); t.ok(r.root.coordsize == "4,4", "coordsize is correct");
t.eq(r.offset, {x:2, y:4}, "offset is correct");
OpenLayers.Renderer.Elements.prototype.setExtent = OpenLayers.Renderer.Elements.prototype.setExtent =
OpenLayers.Renderer.Elements.prototype._setExtent; OpenLayers.Renderer.Elements.prototype._setExtent;
@@ -106,6 +107,7 @@
t.plan(2); t.plan(2);
var r = new OpenLayers.Renderer.VML(document.body); var r = new OpenLayers.Renderer.VML(document.body);
r.offset = {x: 0, y: 0};
r.LABEL_ID_SUFFIX = ""; r.LABEL_ID_SUFFIX = "";
r.getResolution = function() { r.getResolution = function() {
@@ -155,6 +157,7 @@
t.plan(4); t.plan(4);
var r = new OpenLayers.Renderer.VML(document.body); var r = new OpenLayers.Renderer.VML(document.body);
r.offset = {x: 0, y: 0};
r.resolution = 0.5; r.resolution = 0.5;
var node = document.createElement('div'); var node = document.createElement('div');
@@ -182,6 +185,7 @@
t.plan(6); t.plan(6);
var r = new OpenLayers.Renderer.VML(document.body); var r = new OpenLayers.Renderer.VML(document.body);
r.offset = {x: 0, y: 0};
r.resolution = 1; r.resolution = 1;
var node = document.createElement('div'); var node = document.createElement('div');
@@ -263,6 +267,7 @@
t.plan(8); t.plan(8);
var r = new OpenLayers.Renderer.VML(document.body); var r = new OpenLayers.Renderer.VML(document.body);
r.offset = {x: 0, y: 0};
r.resolution = 0.5; r.resolution = 0.5;
var node = document.createElement('div'); var node = document.createElement('div');
@@ -303,6 +308,7 @@
t.plan(2); t.plan(2);
var r = new OpenLayers.Renderer.VML(document.body); var r = new OpenLayers.Renderer.VML(document.body);
r.offset = {x: 0, y: 0};
r.resolution = 0.5; r.resolution = 0.5;
g_SetNodeDimension = false; g_SetNodeDimension = false;
@@ -347,6 +353,7 @@
t.plan(4); t.plan(4);
var r = new OpenLayers.Renderer.VML(document.body); var r = new OpenLayers.Renderer.VML(document.body);
r.offset = {x: 0, y: 0};
r.resolution = 0.5; r.resolution = 0.5;
var node = document.createElement('div'); var node = document.createElement('div');