I want to keep child div how it was in before of zoom. I want to zoom image like that https://yeye0922.github.io/ZoomMarker/
but when I zoom image child element is going away from coordinate.
$("#btn").click(function () {
var w = parseInt($("#parent").css("width").replace("px",""));
var h = parseInt($("#parent").css("height").replace("px",""));
var chilTop = parseInt($("#child2").css("top").replace("px",""));
var chilLeft = parseInt($("#child2").css("left").replace("px",""));
var a = w / chilLeft;
var b = h / chilTop;
var aa = chilLeft / a;
var bb = chilTop / b;
$("#child2").css("top",chilTop + aa +"px");
$("#child2").css("left",chilLeft + bb +"px");
w = w + 100;
h = h + 100;
$("#parent").css("height",h);
$("#parent").css("width",w);
})
https://jsfiddle.net/Etibar2/8hu57efo/
anyone know a solution?
Your code is modifying the top and left coordinates in the lines of
$("#child2").css("top",chilTop + aa +"px");
$("#child2").css("left",chilLeft + bb +"px");
Just remove them or comment them out.
Related
I am attempting to make a surface plot in Octave based on a bunch of overlapping, offset curves. the function should be treating x and y identically but I am not seeing that in the final plot, rather it has ridges running along one axis. I cant tell if this is a plotting error or something else wrong with my code. am hoping you can provide some help/insight.
Plot with ridges following one axis
Thanks
clear;
graphics_toolkit gnuplot
V = 2500; %scan speed in mm
rr = 200000; %rep rate in Hz
Qsp = 1; %pulse energy
pi = 3.14159;
ns = 1; %scan number
w = 0.0125; %Gaussian radius in mm
dp = 0.0125; %lateral pulse distance in mm
dh = 0.0125; %hatch pitch in mm
xmax = 0.2; %ablation area x in mm
ymax = 0.2; %ablation area y in mm
np = round(xmax/dp);
nh = round(ymax/dh);
points = 50;
cof = ns*2*Qsp/(pi*w^2);
N = [0:1:np];
M = rot90([0:1:nh]);
for i = 1:points
for j = 1:points
x = (i-1)*xmax/(points-1);
y = (j-1)*ymax/(points-1);
k = exp(-(2*(x-N*dp).^2+(y-M*dh).^2)/(w^2));
H(i,j) = cof*sum(sum(k));
endfor
endfor
ii = [1:1:points];
jj = ii;
xx = (ii-1)*xmax/(points-1);
yy = (jj-1)*ymax/(points-1);
surf(xx,yy,H);
I find it helpful to space out components of complex expressions.
k = exp(-(2*(x-N*dp).^2+(y-M*dh).^2)/(w^2));
It's too hard to read with so many parentheses.
k = exp(
-(
2*(x-N*dp).^2 + (y-M*dh).^2
) / (w^2)
);
Do you see it already?
k = exp(
-(
2 * (x-N*dp).^2
+
(y-M*dh).^2
) / (w^2)
);
The x component gets multiplied by two, but the y component doesn't.
I have this code, written using this: source1 and this: source 2
public static double CalculatePolygonArea(IList<GpsLocation> coordinates)
{
double area = 0;
if (coordinates.Count > 2)
{
for (var i = 0; i < coordinates.Count-1; i++)
{
GpsLocation p1, p2;
p1 = coordinates[i];
p2 = coordinates[i + 1];
area += ToRad(p2.Longitude - p1.Longitude) * (2 + Math.Sin(ToRad(p1.Latitude))
+ Math.Sin(ToRad(p2.Latitude)));
area = area * R * R / 2;
}
}
return Math.Abs(area);
}
Here is my test code:
[Fact]
public void GpsPolygonAreaTest()
{
var poly = new List<GpsLocation>();
var p1 = new GpsLocation(0, 0);
poly.Add(p1);
var p2 = GpsHelper.CreateLocationBasedOnBearingDistance(p1, 5, 100);
poly.Add(p2);
var p3 = GpsHelper.CreateLocationBasedOnBearingDistance(p2, 95, 100);
poly.Add(p3);
var p4 = GpsHelper.CreateLocationBasedOnBearingDistance(p3, 185, 100);
poly.Add(p4);
poly.Add(p1);
var area = GpsHelper.CalculatePolygonArea(poly);
area.Should().Be(10000);
}
I confirmed that my polygon is 100m x 100m, see image:
My test result is: Expected value to be 10000, but found 1.28153883377486E+48.
Any ideas what wrong with my code?
I'm pretty sure this statement:
area = area * R * R / 2;
should be placed after the loop over the vertices, rather than repeated on each iteration.
I want need to know how detect center coordinates of quadraticCurve in HTML5 canvas. I want to draw arrow in this center point of curve.
There is my draw curve method:
function draw_curve(Ax, Ay, Bx, By, M, context) {
var dx = Bx - Ax,
dy = By - Ay,
dr = Math.sqrt(dx * dx + dy * dy);
// side is either 1 or -1 depending on which side you want the curve to be on.
// Find midpoint J
var Jx = Ax + (Bx - Ax) / 2
var Jy = Ay + (By - Ay) / 2
// We need a and b to find theta, and we need to know the sign of each to make sure that the orientation is correct.
var a = Bx - Ax
var asign = (a < 0 ? -1 : 1)
var b = By - Ay
var bsign = (b < 0 ? -1 : 1)
var theta = Math.atan(b / a)
// Find the point that's perpendicular to J on side
var costheta = asign * Math.cos(theta)
var sintheta = asign * Math.sin(theta)
// Find c and d
var c = M * sintheta
var d = M * costheta
// Use c and d to find Kx and Ky
var Kx = Jx - c
var Ky = Jy + d
// context.bezierCurveTo(Kx, Ky,Bx,By, Ax, Ax);
context.quadraticCurveTo(Kx, Ky, Bx, By);
// draw the ending arrowhead
var endRadians = Math.atan((dx) / (dy));
context.stroke();
var t = 0.5; // given example value
var xx = (1 - t) * (1 - t) * Ax + 2 * (1 - t) * t * Kx + t * t * Bx;
var yy = (1 - t) * (1 - t) * Ay + 2 * (1 - t) * t * Ky + t * t * By;
var k = {};
k.x = xx;
k.y = yy;
SOLVED BY THIS CODE, T is parameter which set position on the curve:
var t = 0.5; // given example value
var xx = (1 - t) * (1 - t) * Ax + 2 * (1 - t) * t * Kx + t * t * Bx;
var yy = (1 - t) * (1 - t) * Ay + 2 * (1 - t) * t * Ky + t * t * By;
var k = {};
k.x = xx;
k.y = yy;
I took the example of Laplace from "Making image filters with Canvas", but I can not understand the use of Math.min() function in the following lines. Can anyone explain to me how the Laplace?
var weights = [-1,-1,-1,
-1, 8,-1,
-1,-1,-1];
var opaque = true;
var side = Math.round(Math.sqrt(weights.length));
var halfSide = Math.floor(side/2);
var imgd = context.getImageData(0, 0, canvas.width, canvas.height);
var src = imgd.data;
var sw = canvas.width;
var sh = canvas.height;
var w = sw;
var h = sh;
var output = contextNew.createImageData(w, h);
var dst = output.data;
var alphaFac = opaque ? 1 : 0;
for (var y=0; y<h; y++) {
for (var x=0; x<w; x++) {
var sy = y;
var sx = x;
var dstOff = (y*w+x)*4;
var r=0, g=0, b=0, a=0;
for (var cy=0; cy<side; cy++) {
for (var cx=0; cx<side; cx++) {
var scy = Math.min(sh-1, Math.max(0, sy + cy - halfSide));
var scx = Math.min(sw-1, Math.max(0, sx + cx - halfSide));
var srcOff = (scy*sw+scx)*4;
var wt = weights[cy*side+cx];
r += src[srcOff] * wt;
g += src[srcOff+1] * wt;
b += src[srcOff+2] * wt;
a += src[srcOff+3] * wt;
}
}
dst[dstOff] = r;
dst[dstOff+1] = g;
dst[dstOff+2] = b;
dst[dstOff+3] = a + alphaFac*(255-a);
}
}
its algorithm is something like
for y = 0 to imageHeight
for x = 0 to imageWidth
sum = 0
for i = -h to h
for j = -w to w
sum = sum + k(j, i) * f(x – j, y – i)
end for j
end for i
g(x, y) = sum end for x end for y
I am trying to determine the distance of a point along a given Polyline (from the start point) in Google maps (given that the user clicks on the Polyline and I get the point coordinates in the event).
So far, this is the only thing that comes to mind:
Iterate over all segments in the Polyline until I find one such that
d(line, point) ~= 0, keeping track of the distance covered so far.
Interpolate on the segment the point is on to find its distance
relative to the start of the segment.
Sadly, this seems rather complicated for something that should be straightforward to do.
Is there any easier way?
P.S.: I'm using API v3
So, after much searching I decided to implement the algorithm as described above. Turned out it isn't as bad as I thought. Should anyone ever land on this page, the full code is below:
var DistanceFromStart = function (/*latlng*/ markerPosition) {
var path = this.polyline.getPath();
var minValue = Infinity;
var minIndex = 0;
var x = markerPosition.lat();
var y = markerPosition.lng();
for (var i = 0; i < path.getLength() - 1; i++) {
var x1 = path.getAt(i).lat();
var y1 = path.getAt(i).lng();
var x2 = path.getAt(i + 1).lat();
var y2 = path.getAt(i + 1).lng();
var dist = pDistance(x, y, x1, y1, x2, y2);
if (dist < minValue) {
minIndex = i;
minValue = dist;
}
}
var gdist = google.maps.geometry.spherical.computeDistanceBetween;
var dinit = gdist(markerPosition, path.getAt(minIndex));
var dtotal = gdist(path.getAt(minIndex), path.getAt(minIndex + 1));
var distanceFromStart = 0;
for (var i = 0; i <= minIndex - 1; i++) {
distanceFromStart += gdist(path.getAt(i), path.getAt(i + 1));
}
distanceFromStart += dtotal * dinit / dtotal;
return distanceFromStart;
}
function pDistance(x, y, x1, y1, x2, y2) {
var A = x - x1;
var B = y - y1;
var C = x2 - x1;
var D = y2 - y1;
var dot = A * C + B * D;
var len_sq = C * C + D * D;
var param = dot / len_sq;
var xx, yy;
if (param < 0 || (x1 == x2 && y1 == y2)) {
xx = x1;
yy = y1;
}
else if (param > 1) {
xx = x2;
yy = y2;
}
else {
xx = x1 + param * C;
yy = y1 + param * D;
}
var dx = x - xx;
var dy = y - yy;
return Math.sqrt(dx * dx + dy * dy);
}
If you see anything to improve, do let me know.
If you get the coordinates for the start and end points, then use the haversine algorithm to calculate the distance you can easily find the distance between two points taking into consideration the curvature of the earth.
Here is the formula (you may need to convert in into the language you are using):
var R = 6371; // km
var dLat = (lat2-lat1).toRad();
var dLon = (lon2-lon1).toRad();
var lat1 = lat1.toRad();
var lat2 = lat2.toRad();
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.sin(dLon/2) * Math.sin(dLon/2) * Math.cos(lat1) * Math.cos(lat2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c;
variable d is your distance.
Hope this helps