[OpenLayers-Commits] r10827 - sandbox/tschaub/canvas/examples
commits-20090109 at openlayers.org
commits-20090109 at openlayers.org
Wed Oct 13 17:25:21 EDT 2010
Author: tschaub
Date: 2010-10-13 14:25:21 -0700 (Wed, 13 Oct 2010)
New Revision: 10827
Added:
sandbox/tschaub/canvas/examples/canvas-inspector.html
sandbox/tschaub/canvas/examples/canvas-inspector.js
Log:
Example for testing.
Added: sandbox/tschaub/canvas/examples/canvas-inspector.html
===================================================================
--- sandbox/tschaub/canvas/examples/canvas-inspector.html (rev 0)
+++ sandbox/tschaub/canvas/examples/canvas-inspector.html 2010-10-13 21:25:21 UTC (rev 10827)
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>OpenLayers Canvas Inspector</title>
+ <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
+ <link rel="stylesheet" href="../theme/default/google.css" type="text/css">
+ <link rel="stylesheet" href="style.css" type="text/css">
+ <script src="../lib/OpenLayers.js"></script>
+ <script src="Jugl.js"></script>
+ <style>
+ #map {
+ border: none;
+ }
+ #template {
+ display: none;
+ }
+ #inspector table {
+ border-right: 1px solid #666;
+ border-bottom: 1px solid #666;
+ }
+ #inspector table td {
+ font-size: 9px;
+ text-align: center;
+ width: 60px;
+ height: 60px;
+ border-top: 1px solid #666;
+ border-left: 1px solid #666;
+ }
+ </style>
+ </head>
+ <body>
+ <h1 id="title">Canvas Inspector</h1>
+ <p id="shortdesc">
+ Displays pixel values for hit context.
+ </p>
+ <div id="map" class="smallmap"></div>
+ <div id="docs">
+ <p>
+ View the <a href="canvas-inspector.js" target="_blank">canvas-inspector.js</a>
+ source to see how this is done.
+ </p>
+ </div>
+ <div id="inspector">
+ </div>
+ <table id="template">
+ <tr jugl:repeat="row new Array(rows)">
+ <td jugl:repeat="col new Array(cols)"
+ jugl:attributes="id 'c' + repeat.col.index + 'r' + repeat.row.index">
+
+ </td>
+ </tr>
+ </table>
+ <script src="canvas-inspector.js"></script>
+ </body>
+</html>
Added: sandbox/tschaub/canvas/examples/canvas-inspector.js
===================================================================
--- sandbox/tschaub/canvas/examples/canvas-inspector.js (rev 0)
+++ sandbox/tschaub/canvas/examples/canvas-inspector.js 2010-10-13 21:25:21 UTC (rev 10827)
@@ -0,0 +1,91 @@
+
+var features = [
+
+ new OpenLayers.Feature.Vector(
+ OpenLayers.Geometry.fromWKT(
+ "LINESTRING(-90 90, 90 -90)"
+ ),
+ {color: "#0f0000"}
+ ),
+
+ new OpenLayers.Feature.Vector(
+ OpenLayers.Geometry.fromWKT(
+ "LINESTRING(100 50, -100 -50)"
+ ),
+ {color: "#00ff00"}
+ )
+
+];
+
+var layer = new OpenLayers.Layer.Vector(null, {
+ styleMap: new OpenLayers.StyleMap({
+ strokeWidth: 3,
+ strokeColor: "${color}"
+ }),
+ isBaseLayer: true,
+ renderers: ["Canvas"],
+ rendererOptions: {hitDetection: true}
+});
+layer.addFeatures(features);
+
+var map = new OpenLayers.Map({
+ div: "map",
+ layers: [layer],
+ center: new OpenLayers.LonLat(0, 0),
+ zoom: 0
+});
+
+var xOff = 2, yOff = 2;
+
+var rows = 1 + (2 * yOff);
+var cols = 1 + (2 * xOff);
+
+var template = new jugl.Template("template");
+template.process({
+ clone: true,
+ parent: "inspector",
+ context: {
+ rows: rows,
+ cols: cols
+ }
+});
+
+function isDark(r, g, b, a) {
+ a = a / 255;
+ var da = 1 - a;
+ // convert color values to decimal (assume white background)
+ r = (a * r / 255) + da;
+ g = (a * g / 255) + da;
+ b = (a * b / 255) + da;
+ // use w3C brightness measure
+ var brightness = (r * 0.299) + (g * 0.587) + (b * 0.144);
+ return brightness < 0.5;
+}
+
+var hitContext = layer.renderer.canvas; //layer.renderer.hitContext;
+var size = map.getSize();
+map.events.on({
+ mousemove: function(event) {
+ var x = event.xy.x - 1; // TODO: fix this elsewhere
+ var y = event.xy.y;
+ if ((x >= xOff) && (x < size.w - xOff) && (y >= yOff) && (y < size.h - yOff)) {
+ var data = hitContext.getImageData(x - xOff, y - yOff, rows, cols).data;
+ var offset, red, green, blue, alpha, cell;
+ for (var i=0; i<cols; ++i) {
+ for (var j=0; j<rows; ++j) {
+ offset = (i * 4) + (j * 4 * cols);
+ red = data[offset];
+ green = data[offset + 1];
+ blue = data[offset + 2];
+ alpha = data[offset + 3];
+ cell = document.getElementById("c" + i + "r" + j);
+ cell.innerHTML = "R: " + red + "<br>G: " + green + "<br>B: " + blue + "<br>A: " + alpha;
+ cell.style.backgroundColor = "rgba(" + red + ", " + green + ", " + blue + ", " + (alpha / 255) + ")";
+ cell.style.color = isDark(red, green, blue, alpha) ? "#ffffff" : "#000000";
+ }
+ }
+ }
+ }
+});
+
+
More information about the Commits
mailing list