diff --git a/examples/graphic-name.js b/examples/graphic-name.js index 9349ed28b6..654a4c997d 100644 --- a/examples/graphic-name.js +++ b/examples/graphic-name.js @@ -5,6 +5,10 @@ OpenLayers.Renderer.symbol.church = [4, 0, 6, 0, 6, 4, 10, 4, 10, 6, 6, 6, 6, 14 var map; function init(){ + // allow testing of specific renderers via "?renderer=Canvas", etc + var renderer = OpenLayers.Util.getParameters(window.location.href).renderer; + renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers; + map = new OpenLayers.Map('map', { controls: [] }); @@ -46,7 +50,8 @@ function init(){ // Create a vector layer and give it your style map. var layer = new OpenLayers.Layer.Vector("Graphics", { styleMap: styles, - isBaseLayer: true + isBaseLayer: true, + renderers: renderer }); layer.addFeatures(features); map.addLayer(layer); diff --git a/examples/transform-feature.html b/examples/transform-feature.html index d768c106a6..a0c5645de2 100644 --- a/examples/transform-feature.html +++ b/examples/transform-feature.html @@ -14,30 +14,6 @@ function init(){ map = new OpenLayers.Map('map', {allOverlays: true}); - // context for appropriate scale/resize cursors - var cursors = ["sw-resize", "s-resize", "se-resize", - "e-resize", "ne-resize", "n-resize", "nw-resize", "w-resize"]; - var context = { - getCursor: function(feature){ - var i = OpenLayers.Util.indexOf(control.handles, feature); - var cursor = "inherit"; - if(i !== -1) { - i = (i + 8 + Math.round(control.rotation / 90) * 2) % 8; - cursor = cursors[i]; - } - return cursor; - } - }; - - // a nice style for the transformation box - var style = new OpenLayers.Style({ - cursor: "${getCursor}", - pointRadius: 5, - fillColor: "white", - fillOpacity: 1, - strokeColor: "black" - }, {context: context}); - // allow testing of specific renderers via "?renderer=Canvas", etc var renderer = OpenLayers.Util.getParameters(window.location.href).renderer; renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers; @@ -45,7 +21,36 @@ // the layer that we want to transform features on var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", { styleMap: new OpenLayers.StyleMap({ - "transform": style + // a nice style for the transformation box + "transform": new OpenLayers.Style({ + display: "${getDisplay}", + cursor: "${role}", + pointRadius: 5, + fillColor: "white", + fillOpacity: 1, + strokeColor: "black" + }, { + context: { + getDisplay: function(feature) { + // hide the resize handle at the south-east corner + return feature.attributes.role === "se-resize" ? "none" : ""; + } + } + }), + "rotate": new OpenLayers.Style({ + display: "${getDisplay}", + pointRadius: 10, + fillColor: "#ddd", + fillOpacity: 1, + strokeColor: "black" + }, { + context: { + getDisplay: function(feature) { + // only display the rotate handle at the south-east corner + return feature.attributes.role === "se-rotate" ? "" : "none"; + } + } + }) }), renderers: renderer }); @@ -53,7 +58,8 @@ // create the TransformFeature control, using the renderIntent // from above control = new OpenLayers.Control.TransformFeature(vectorLayer, { - renderIntent: "transform" + renderIntent: "transform", + rotationHandleSymbolizer: "rotate" }); map.addControl(control); @@ -101,13 +107,15 @@
This example shows transformation of vector features with a tranformation box. Grab one of the handles to resize the feature. - Holding the SHIFT key will preserve the aspect ratio. Position the - mouse right outside one of the corner handles to rotate the feature, - and hold the SHIFT key to only rotate in 45° increments.
-In this example, the transformation box has been set on the left + Holding the SHIFT key will preserve the aspect ratio. Use the gray + handle to rotate the feature and hold the SHIFT key to only rotate + in 45° increments. +
+In this example, the transformation box has been set on the left feature, with a rotation preset of 45°. Clicking on the right feature will set it for transformation, starting with an unrotated box. - Dragging a feature or the box edges will move it around.
+ Dragging a feature or the box edges will move it around. +