[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