Plotting image icon on top of a static image - javascript

To better understand my question, please refer to the following image.
http://i.imgur.com/yL0nD4h.jpg
I have two images. The map image and the blue circle image. Please note that the map image is only an image and I am not using the Google Maps API to display it. As it will always be the same view. What I am trying to accomplish is trying to move the blue circle along the black line and I want it to be able to move the circle dynamically with a simple incremental int number
So if my int push = 5
The circle on the map will move up by a certain distance and int push = -5 will bring it back.
Currently I have a simple html background with the map image and have places the blue circle on top with a image tag as follows
<div style="background-image:url('http://i.imgur.com/ZZHnuaf.png'); width:517px;height:374px;">
<img width="30px" height="30px"src="http://i.imgur.com/MUlVIyg.png" />
</div>
http://jsfiddle.net/rayshinn/9VqQ7/
Any help on how I can get started would be greatly appreciated! Also thank you very much for taking your time to read this.

So the main idea is having a function f(v) which returns an object with a x and y coordinate. Then you position the marker image relatively inside the map and change the left and top style attributes to move it around.
Here's an example http://jsfiddle.net/9VqQ7/2/

Related

Leaflet divIcon doesn't appear when drawn

I have a sprite sheet with a bunch images of aircraft in various rotations. I'm trying to set my icon to the sprite based on heading. My heading rounding calculation is working and I'm writing the correct class but nothing appears when I draw it. My previous iteration without sprites and just a bunch of separate images and a regular icons worked fine so the drawing portion of the code should be fine. I simply changed the icon type. Any ideas? This is my new marker function
iconClass = '757_' + (Math.round(HDG/15)) * 15
var nIcon = L.divIcon({className: iconClass});
marker[i].setIcon(nIcon)
marker[i].setLatLng(coords);
marker[i].bindTooltip(CALL);
mymap.addLayer(marker[i]);
my style sheet looks like
.757_120{top:0px;left:0px;
width:36px;height:27px;background: url("images/sprites.png") no-repeat -116px -651px;}
.757_135{top:0px;left:0px;
width:33px;height:33px;background: url("images/sprites.png") no-repeat -292px -465px;}
loaded like
<link rel="stylesheet" href="images/sprites.css">
and
console.log(document.styleSheets)
seems to show that the style sheet is loaded
Turns out part of my issue was that class names cannot start with a number.

Is it possible to graphics on a bitmap in easeljs?

i want to draw a circle on an image in easeljs.
My actual status:
In my canvas 1200 x 800 is a bitmap 9000 x 1000.
The image got a "pressmove" function, so i can navigate from the left to the right of the panorama and from the top to the bottom.
I want to draw a circle/shape onto the image/bitmap.
For example at the coordinate of the image x:3000, y:500.
With my actual attempt to do this i created a container and added the bitmap and the shape in there. If i say bitmap.x/y = shape.x/y, the shape stays where it belongs to be but i need to tie it a specific coordinate.
The picture shows my actual view, the whole picture and the point (x,y) where i want to draw a circle onto the picture. So if i am showing this part of the picture there should be the point.
Do you guys have any idea how to do this?
Problem Solved
As #Lenny said, moving the container instead is moving both of the displayed objects. That's the result i wanted.

How to get image coordinates after centering the object using image.centerObject() in fabric js

I am drawing a rectangle on top of a image and then saving the coordinates of both to a Mysql Database table.
Then I have to retrieve the same image and overlaying Rectangle from a Andriod APP
which will not know anything on FabricJS .
It will only know the coordinates of image and rectangle.
Luckily for image it is not a problem as it can be maintained using some Aspect ratio algorithm.
But how to get the coordinates of Rectangle , so that it can be rendered correctly.
Now what I see is Fabricjs saves the coordinates according to window left ,top, width, height. But andriod app expects the coordinates according to image , which fabricjs doesn't provide.
Any suggestions how to achieve this?
Please let me know if somebody didn't understand .
Its a basic and easy statement , hence not adding any fiddle or code.
before saving to database do this:
image.setCoords();
rect.setCoords();
in
image.oCoords.tl, image.oCoords.tr, image.oCoords.bl, image.oCoords.br
and
rect.oCoords.tl, rect.oCoords.tr, rect.oCoords.bl, rect.oCoords.br
you will find 4 objects with both x and y coordinates that represent your absolute position of the object.
tl stands for Top Left, br stands for Bottom Right and so on.
You should have no problem then to make some subtraction and find relative coordinates of the two objects.
Example:
if image has tl (45,80) and rect has tl (80,110) it means that rect coordinate relative to image is (80-45, 110-80) = (35, 30)

Drawing around an image to get the X/Y coordinates with jQuery. Like image maps in Dreamweaver

Is there a way of drawing around an image and getting the coordinates like image maps in Dreamweaver.
I would then like to use the coordinates so that the user can get information about an image depending on what part of the image they have clicked on. Like http://store.nike.com/us/en_us/product/free-flash-id/builder/
The problem is that I don't know how to get the coordinates. I want to be able to trace around an image and get the coordinates. Then use the coordinates in a function. When a user clicks inside the coordinates the js will say "you just clicked on this area of the image"
Thanks!
You can get the coordinates of a user click inside an image (relative to the image) like this (fiddle: http://jsfiddle.net/j8DBw/) :
var imageCoords = $("img").offset();
$("img").click(function(event){
var clickPageCoords = {
x:event.clientX,
y:event.clientY
}
var imageRelativeCoords = {
x: clickPageCoords.x - imageCoords.left,
y: clickPageCoords.y - imageCoords.top,
}
console.log(imageRelativeCoords);
})
I thought image maps was only a Dreamweaver feature. After VeXii's comment I found these solutions.
http://www.maschek.hu/imagemap/
http://www.image-maps.com/
Thanks for everyones help!

Canvas - Circle pie shape for preloader

What I'm trying to get done in the example shown below is a pie like shape for a preloader script. The deal with it is that it starts on 0% and finishes on 100%. Depending on the % given the circle behind the gray circle shall fill it self up.
Currently i have the shapes in 2 different canvas's as i had to use clip to actually hide parts of the circle. But as this applied to my overlay with the gray circle i spliced them up. They are by the way both images.
I would really appreciate any effort that you guys put in helping me.
Been trying to solve this issue for ages.
Found the solution.
Seems like i had to use the moveTo
function in order to get the shape to be painted correctly.
Using the
function degreesToRadians(degrees) {
return (degrees * Math.PI)/180;
}
function to use degrees rather than Radians.
-
Hope this helps someone else :)

Categories