| 1 |
<html xmlns="http://www.w3.org/1999/xhtml"> |
|---|
| 2 |
<head> |
|---|
| 3 |
<title>#965 : rendered geometries blink sometimes in the VML renderer</title> |
|---|
| 4 |
<style type="text/css"> |
|---|
| 5 |
#map { |
|---|
| 6 |
width: 400px; |
|---|
| 7 |
height: 400px; |
|---|
| 8 |
border: 1px solid black; |
|---|
| 9 |
overflow: hidden; |
|---|
| 10 |
} |
|---|
| 11 |
</style> |
|---|
| 12 |
<script type="text/javascript"> |
|---|
| 13 |
|
|---|
| 14 |
|
|---|
| 15 |
init = function() { |
|---|
| 16 |
var xmlns = "urn:schemas-microsoft-com:vml"; |
|---|
| 17 |
document.namespaces.add("v", xmlns); |
|---|
| 18 |
|
|---|
| 19 |
var style = document.createStyleSheet(); |
|---|
| 20 |
style.addRule('v\\:*', "behavior: url(#default#VML); " + |
|---|
| 21 |
"position: absolute; display: inline-block;"); |
|---|
| 22 |
|
|---|
| 23 |
var rendererRoot = document.createElement("div"); |
|---|
| 24 |
rendererRoot.id = "vmlRoot"; |
|---|
| 25 |
|
|---|
| 26 |
rendererRoot.style.width = 400; |
|---|
| 27 |
rendererRoot.style.height = 400; |
|---|
| 28 |
|
|---|
| 29 |
var root = document.createElement("v:group"); |
|---|
| 30 |
root.id = "root"; |
|---|
| 31 |
root.style.width = 400; |
|---|
| 32 |
root.style.height = 400; |
|---|
| 33 |
rendererRoot.appendChild(root); |
|---|
| 34 |
|
|---|
| 35 |
var resolution = 10; |
|---|
| 36 |
var extent = {left: 0, top: 0, right: 400, bottom: 400}; |
|---|
| 37 |
extent.getWidth = function() { |
|---|
| 38 |
return this.right - this.left; |
|---|
| 39 |
} |
|---|
| 40 |
extent.getHeight = function() { |
|---|
| 41 |
return this.top - this.bottom; |
|---|
| 42 |
} |
|---|
| 43 |
var org = extent.left/resolution + " " + |
|---|
| 44 |
extent.top/resolution; |
|---|
| 45 |
root.setAttribute("coordorigin", org); |
|---|
| 46 |
|
|---|
| 47 |
var size = extent.getWidth()/resolution + " " + |
|---|
| 48 |
-extent.getHeight()/resolution; |
|---|
| 49 |
root.setAttribute("coordsize", size); |
|---|
| 50 |
|
|---|
| 51 |
|
|---|
| 52 |
document.getElementById('viewport').appendChild(rendererRoot); |
|---|
| 53 |
|
|---|
| 54 |
function drawPoint(x, y) { |
|---|
| 55 |
var radius = 10; |
|---|
| 56 |
var node = document.createElement("v:oval"); |
|---|
| 57 |
node.style.left = (x / resolution).toFixed() - radius / resolution; |
|---|
| 58 |
node.style.top = (y / resolution).toFixed() - radius / resolution; |
|---|
| 59 |
node.style.width = radius / resolution * 2; |
|---|
| 60 |
node.style.height = radius / resolution * 2; |
|---|
| 61 |
|
|---|
| 62 |
node.setAttribute("fillcolor", "#0000FF" ); |
|---|
| 63 |
|
|---|
| 64 |
root.appendChild(node) |
|---|
| 65 |
} |
|---|
| 66 |
|
|---|
| 67 |
function mapClicked(evt) { |
|---|
| 68 |
drawPoint(evt.x, evt.y); |
|---|
| 69 |
} |
|---|
| 70 |
document.getElementById('viewport').attachEvent('onclick', mapClicked, false); |
|---|
| 71 |
} |
|---|
| 72 |
|
|---|
| 73 |
</script> |
|---|
| 74 |
</head> |
|---|
| 75 |
<body onload="init();"> |
|---|
| 76 |
<div id="map"> |
|---|
| 77 |
<div id="viewport" style="position:relative;left:0px;top:0px;width:100%;height:100%;"></div> |
|---|
| 78 |
</div> |
|---|
| 79 |
Same example as <a href="create-vml-current.html" >here</a> but with style position set to absolute : |
|---|
| 80 |
|
|---|
| 81 |
<pre> |
|---|
| 82 |
|
|---|
| 83 |
style.addRule('v\\:*', "behavior: url(#default#VML); " + |
|---|
| 84 |
"position: absolute; display: inline-block;"); |
|---|
| 85 |
</pre> |
|---|
| 86 |
and root size given in absolute values.<br /> |
|---|
| 87 |
It Works ! |
|---|
| 88 |
</body> |
|---|
| 89 |
</html> |
|---|
