[Mapbender-commits] r8106 - trunk/mapbender/lib

svn_mapbender at osgeo.org svn_mapbender at osgeo.org
Tue Sep 6 06:49:45 EDT 2011


Author: verenadiewald
Date: 2011-09-06 03:49:45 -0700 (Tue, 06 Sep 2011)
New Revision: 8106

Modified:
   trunk/mapbender/lib/printbox.js
Log:
don't use a filledPolygon any more to move the print box, because IE can't display the filled opacity, use instead a center point for moving print box

Modified: trunk/mapbender/lib/printbox.js
===================================================================
--- trunk/mapbender/lib/printbox.js	2011-09-06 10:45:23 UTC (rev 8105)
+++ trunk/mapbender/lib/printbox.js	2011-09-06 10:49:45 UTC (rev 8106)
@@ -13,16 +13,16 @@
 	var printHeight = options.printHeight || 29.7;
 
 	// initialised in setScale()
-	var boxWidth, boxHeight; 
+	var boxWidth, boxHeight;
 
 	var scale = options.scale || 100000;
 
 	// behaviour
 	var afterChangeAngle = options.afterChangeAngle || function (obj) {};
 	var afterChangeSize = options.afterChangeSize || function (obj) {};
-	
+
 	// styles
-	var opacity = options.boxOpacity || 0.6;
+	var opacity = options.boxOpacity || 1;
 	var boxColour = options.boxColour || "#9999FF";
 	var frameColour = options.frameColour || "#000000";
 	var pointColour = options.pointColour || "#DD0000";
@@ -69,7 +69,7 @@
 		str += "Mappos: " + String(startPointMapArray) + "\n";
 		return str;
 	};
-	
+
 	var initBehaviour = function () {
 		initMoveBehaviour();
 		initResizeBehaviour();
@@ -78,18 +78,18 @@
 
 	var initRotateBehaviour = function () {
 		$circleCanvas.css("z-index", "110").mousedown(function (e) {
-			circleCanvas.clear();	
-	
+			circleCanvas.clear();
+
 			var newCenter = getCenter();
-	
+
 			var mouseMoveStart = map.getMousePos(e);
 			var vectorA = pointArray[0].minus(newCenter);
-			
+
 			var currentPos = map.getMousePos(e);
 			var vectorCurrent = currentPos.minus(newCenter);
-			
+
 			angle = Math.ceil(getAngle(vectorA, vectorCurrent));
-			
+
 			$(document).mousemove(function (e) {
 				var currentPos = map.getMousePos(e);
 				var vectorCurrent = currentPos.minus(newCenter);
@@ -111,33 +111,33 @@
 				});
 				that.paintBox();
 				return false;
-			});	
+			});
 			return false;
 		}).css("cursor", "move");
 	};
 
 	var initMoveBehaviour = function () {
 		$boxCanvas.mousedown(function (e) {
-			circleCanvas.clear();	
-	
+			circleCanvas.clear();
+
 			var mouseMoveStart = map.getMousePos(e);
-	
+
 			var containerStart = new Point(
 				parseInt($container.css("left"), 10),
 				parseInt($container.css("top"), 10)
 			);
 
 			var diff;
-	
+
 			$(document).mousemove(function (e) {
 				diff = (map.getMousePos(e)).minus(mouseMoveStart);
-	
+
 				$container.css({
 					"top": (containerStart.y + diff.y) + "px",
 					"left": (containerStart.x + diff.x) + "px"
 				});
 				return false;
-	
+
 			}).mouseup(function (e) {
 				$(document).unbind("mousemove");
 				$(document).unbind("mouseup");
@@ -145,17 +145,17 @@
 				that.rotate(totalAngle);
 				that.paintBox();
 				return false;
-			});	
+			});
 			return false;
 		});
 	};
 
 	var initResizeBehaviour = function () {
 		$pointCanvas.css("z-index", "120").mousedown(function (e) {
-			circleCanvas.clear();	
+			circleCanvas.clear();
 
 			var vectorA = getCenter();
-	
+
 			resizeRatio = 1;
 			mouseMoveStart = map.getMousePos(e);
 			$(document).mousemove(function (e) {
@@ -194,16 +194,16 @@
 	var setCenter = function (inputCenter) {
 		center = inputCenter.minus(
 			new Point(
-				parseInt($container.css("left"), 10), 
+				parseInt($container.css("left"), 10),
 				parseInt($container.css("top"), 10)
 			)
 		);
 	};
-	
+
 	var getCenter = function () {
 		var c = center.plus(
 			new Point(
-				parseInt($container.css("left"), 10), 
+				parseInt($container.css("left"), 10),
 				parseInt($container.css("top"), 10)
 			)
 		);
@@ -212,23 +212,23 @@
 
 	/**
 	 * Calculates the angle (-180 < angle <= 180) between two vectors.
-	 * 
+	 *
 	 * @param {Point} a
 	 * @param {Point} b
 	 */
 	var getAngle = function (a, b) {
 		var undirectedAngle = 180 * Math.acos(
-				(a.x * b.x + a.y * b.y) 
+				(a.x * b.x + a.y * b.y)
 				/
 				(
 					Math.sqrt(
 						a.x * a.x
-					+ 
+					+
 					 	a.y * a.y
-					) * 
+					) *
 					Math.sqrt(
 						b.x * b.x
-					+ 
+					+
 						b.y * b.y
 					)
 				)
@@ -238,14 +238,14 @@
 			return -1 * undirectedAngle;
 		}
 		return undirectedAngle;
-		
+
 	};
-	
+
 	/**
 	 * To be replaced by the map objects native getMousePosition
-	 * 
+	 *
 	 * @param {Event} e
-	 
+
 	var getMousePos = function (e) {
 		if ($.msie) {
 			return new Point(event.clientX, event.clientY);
@@ -259,7 +259,7 @@
 			startPointMapArray[i] = convertPixelToMap(startPointPixArray[i].plus(getCenter()));
 		}
 		centerMap = convertPixelToMap(getCenter());
-		
+
 	};
 
 	var recalculatePixPositions = function () {
@@ -310,41 +310,41 @@
 			switchBoxDimensions();
 		}
 	};
-	
+
 	this.setLandscape = function () {
 		this.setAngle(0);
 		if (boxWidth < boxHeight) {
 			switchBoxDimensions();
 		}
 	};
-	
+
 	this.setPrintWidthAndHeight = function (width, height) {
 		var currentScale = this.getScale();
 		printWidth = width;
 		printHeight = height;
 		this.setScale(currentScale);
 	};
-	
+
 	var convertMapToPixel = function (aPoint) {
 		var pArray = makeRealWorld2mapPos(map.elementName, aPoint.x, aPoint.y);
 		return new Point(pArray[0], pArray[1]);
 	};
-	
+
 	var convertPixelToMap = function (aPoint) {
 		var pArray = makeClickPos2RealWorldPos(map.elementName, aPoint.x, aPoint.y);
 		return new Point(pArray[0], pArray[1]);
 	};
-	
+
 	/**
 	 * Sets the box width and box height (calculated in setScale)
-	 * 
+	 *
 	 * @param {Integer} inputWidth
 	 * @param {Integer} inputHeight
 	 */
 	var setBoxDimensions = function (inputWidth, inputHeight) {
 		boxWidth = inputWidth;
 		boxHeight = inputHeight;
-		
+
 		initPoints();
 		that.rotate(totalAngle);
 
@@ -375,12 +375,12 @@
 	this.getScale = function () {
 /*
 		var coords = this.getStartCoordinates();
-		var coordsArray = coords.split(",");		
+		var coordsArray = coords.split(",");
 
 		var ext = mapObj.getExtentInfos();
 		var extMinX = ext.minx;
 		var extMaxX = ext.maxx;
-		
+
 		var x = (ext.minx + ext.maxx)/2;
 		var y = (ext.miny + ext.maxy)/2;
 		var scale1 = (x - coordsArray[0]) * (mb_resolution * 100 *2) / mapObj.width;
@@ -389,15 +389,15 @@
 		return scale;
 */
 		var coords = this.getStartCoordinates();
-		var coordsArray = coords.split(",");		
-	
+		var coordsArray = coords.split(",");
+
 		xtentx =  coordsArray[2] - coordsArray[0];
 		scale = parseInt(Math.ceil(xtentx / (printWidth / 100)), 10);
 		return scale;
 	};
 
 	/**
-	 * Repaints the Box with the current scale. Can be called from outside, 
+	 * Repaints the Box with the current scale. Can be called from outside,
 	 * for example after zoom in.
 	 */
 	this.repaint = function () {
@@ -405,19 +405,19 @@
 		this.rotate(totalAngle);
 		this.paintBox();
 	};
-	
+
 	/**
 	 * Sets the current scale, and repaints the box
-	 * 
+	 *
 	 * @param {Integer} inputScale
 	 */
 	this.setScale = function (inputScale) {
 		if (typeof(inputScale) == "number") {
-/*			
+/*
 			var arrayBBox = mapObj.extent.split(",");
 			x = parseFloat(arrayBBox[0]) + ((parseFloat(arrayBBox[2]) - parseFloat(arrayBBox[0]))/2);
 			y = parseFloat(arrayBBox[1]) + ((parseFloat(arrayBBox[3]) - parseFloat(arrayBBox[1]))/2);
-			
+
 			var minx = parseFloat(x) - (mapObj.width / (mb_resolution * 100 *2) * inputScale);
 			var miny = parseFloat(y) -  (mapObj.height / (mb_resolution * 100 *2) * inputScale);
 			var maxx = parseFloat(x) + (mapObj.width / (mb_resolution * 100 *2) * inputScale);
@@ -432,19 +432,19 @@
 			var realWidthInM = inputScale * mapWidthInM;
 			var mapHeightInM = printHeight / 100;
 			var realHeightInM = inputScale * mapHeightInM;
-			
+
 			var coords = this.getStartCoordinates();
 			if (coords !== null) {
 				var coordsArray = coords.split(",");
 				var oldMin = new Point(parseFloat(coordsArray[0]), parseFloat(coordsArray[1]));
 				var oldMax = new Point(parseFloat(coordsArray[2]), parseFloat(coordsArray[3]));
 				centerMap = (oldMin.times(0.5)).plus(oldMax.times(0.5));
-				
+
 			}
 			else {
 				centerMap = convertPixelToMap(getCenter());
 			}
-			
+
 			var newMin = new Point(centerMap.x - 0.5 * realWidthInM, centerMap.y - 0.5 * realHeightInM);
 			var newMax = new Point(centerMap.x + 0.5 * realWidthInM, centerMap.y + 0.5 * realHeightInM);
 
@@ -466,23 +466,23 @@
 			pointArray[1] = new Point( w,  h);
 			pointArray[2] = new Point( w, -h);
 			pointArray[3] = new Point(-w, -h);
-	
+
 			startPointPixArray[0] = (new Point(-w,  h));
 			startPointPixArray[1] = (new Point( w,  h));
 			startPointPixArray[2] = (new Point( w, -h));
 			startPointPixArray[3] = (new Point(-w, -h));
-	
+
 			radius = pointArray[0].dist(new Point(0,0));
 			startRadius = radius;
-	
+
 			this.rotate(totalAngle);
-	
-	
+
+
 			afterChangeSize({
 				scale: that.getScale(),
 				coordinates: that.getStartCoordinates()
 			});
-	
+
 			that.paintBox();
 
 			return true;
@@ -492,7 +492,7 @@
 
 	/**
 	 * Sets the angle of the box to a specific angle.
-	 * 
+	 *
 	 * @param {Integer} angle
 	 */
 	this.setAngle = function (angle) {
@@ -517,9 +517,9 @@
 	//
 
 	/**
-	 * Rotates the box by a given degree (0 <= degree < 360), 
+	 * Rotates the box by a given degree (0 <= degree < 360),
 	 * and paints the corner points.
-	 * 
+	 *
 	 * @param {Integer} degree
 	 */
 	this.rotate = function (degree) {
@@ -578,7 +578,7 @@
 	this.paintBox = function () {
 		var r = Math.round(0.75 * radius);
 		var c = center;
-		circleCanvas.clear();	
+		circleCanvas.clear();
 		if (!boxTooSmall() && !boxTooBig()) {
 			circleCanvas.drawEllipse(c.x-r, c.y-r, 2*r, 2*r);
 		}
@@ -588,26 +588,39 @@
 		circleCanvas.paint();
 
 		boxCanvas.clear();
-		if (!boxTooBig()) {
-			boxCanvas.fillPolygon([
+
+                //don't use a filledPolygon any more to move the print box, because
+                //IE can't display the fill opacity, use instead a center point for moving print box
+                //if (!boxTooBig()) {
+			/*boxCanvas.fillPolygon([
 				pointArray[0].x + c.x,
 				pointArray[1].x + c.x,
 				pointArray[2].x + c.x,
 				pointArray[3].x + c.x
-			], 
+			],
 			[
 				pointArray[0].y + c.y,
 				pointArray[1].y + c.y,
 				pointArray[2].y + c.y,
 				pointArray[3].y + c.y
-			]);
-		}
-		else {
-			new Mb_warning("The print box is too big. The box is not filled.");
-		}
-		
+			]);*/
+
+                    boxCanvas.setColor(pointColour);
+                    boxCanvas.fillEllipse(
+                            c.x - 4,
+                            c.y - 4,
+                            10,
+                            10
+                    );
+		//}
+		//else {
+		//	new Mb_warning("The print box is too big. The box is not filled.");
+		//}
+
+
+
 		// frame
-		boxCanvas.setColor(frameColour);	
+		boxCanvas.setColor(frameColour);
 		for (var i = 0; i < pointArray.length; i++) {
 			var indexA = i % 4;
 			var a = pointArray[indexA].plus(center);
@@ -615,16 +628,16 @@
 			var b = pointArray[indexB].plus(center);
 			boxCanvas.drawLine(a.x, a.y, b.x, b.y);
 		}
-		
-		boxCanvas.setColor(boxColour);	
+
+		boxCanvas.setColor(boxColour);
 		boxCanvas.paint();
 	};
-	
+
 	/**
 	 * Clears all canvases, to be performed onunload.
 	 */
 	this.destroy = function () {
-		circleCanvas.clear();	
+		circleCanvas.clear();
 		boxCanvas.clear();
 		activeCanvas.clear();
 		passiveCanvas.clear();
@@ -646,14 +659,14 @@
 	};
 
 
-	var $container = $("<div id='" + this.id + "' style='position:relative;top:0px;left:0px;" + 
+	var $container = $("<div id='" + this.id + "' style='position:relative;top:0px;left:0px;" +
 		"'></div>");
-		
+
 	var $superContainer = $("<div id='container_" + this.id + "' style='position:absolute;z-index:1000;'></div>");
 	$superContainer.append($container);
 	//$("#"+map.elementName).append($superContainer);
 	$(map_el).append($superContainer);
-	
+
 	var canvasName = [
 		this.id + "_canvas_box",
 		this.id + "_canvas_points1",
@@ -662,7 +675,7 @@
 	];
 
 	var jg = [];
-	
+
 	var canvasNr = 1;
 
 	for (var i = 0; i < canvasName.length; i++) {
@@ -676,21 +689,22 @@
 	$pointCanvas = $("#" + canvasName[1] +  ", #" + canvasName[2]);
 	$boxCanvas = $("#" + canvasName[0]);
 	$boxCanvas.css({
-		"opacity" : opacity, 
-		"filter" : "alpha(opacity=" + (opacity * 100) + ")"
+		"opacity" : opacity,
+		"filter" : "alpha(opacity=" + (opacity * 100) + ")",
+                "cursor" : "move"
 	});
-		
+
 	var boxCanvas = jg[0];
-	boxCanvas.setColor(boxColour);	
+	boxCanvas.setColor(boxColour);
 	var activeCanvas = jg[1];
 	activeCanvas.setColor(pointColour);
 	var passiveCanvas = jg[2];
 	passiveCanvas.setColor(pointColour);
 	var circleCanvas = jg[3];
 	circleCanvas.setColor(circleColour);
-	circleCanvas.setStroke(circleWidth);	
+	circleCanvas.setStroke(circleWidth);
 
-	var mouseMoveStart = [];	
+	var mouseMoveStart = [];
 
 	var radius = 0;
 	var startRadius = 0;



More information about the Mapbender_commits mailing list