my polyline not accurate from pickup location to drop location is starting from pickup location and ends to another country continent I want to draw polyline on the specify between pick and drop location please any solution
Related
I am pretty new with Fabricjs.
I want to create a project where you user can put their design on the blueprint containing a place holder inside.
The dash rectangle inside the T-shirt shaped is called place holder
The problem is that, I want to set the position and the size of the place holder to fit with the T-shirt shaped, I can change the canvas in css, but the selectable part (the purple shadow go after the mouse when I drag the it inside the place holder - sorry, I don't know how to call it) is still keep the same size and the same position.
Is there any way to change the size and the position of it, the real position of canvas?
So I am trying to build an app where users have a library of images available to them and they can drag and drop them onto a stage to create a kind of image diagram. so for this I wanted to give them the ability to zoom in and out of the stage as well as move it around by making the stage draggable.
The problem lies that when I move the stage by dragging it around or zoom in/out then try and place an image on the stage it snaps to the original scale of the stage and not the new location, i am not sure how to change this to make the image drop to the current position whatever the zoom scale or wherever the stage has been dragged.
codesandbox here: https://codesandbox.io/s/react-konva-drag-and-drop-image-with-draggable-stage-and-scroll-zoom-6977j?file=/src/Draganddrop.js
I have removed a lot of code to keep it simple to one image for the example, but nothing that changes the way it fundamentally works for this section.
any and all help is greatly appreciated.
For drop position, you are using stageRef.current.getPointerPosition(). stage.getPointerPosition() returns absolute position of pointer relative to top-left of canvas element. So it is ignoring scaling of your stage.
Instead, you can use stage.getRelativePointerPosition(). It will return transformed pointer position relative to used Konva node (stage in that case).
I want to be able to display a floor plan with pan / zoom capability and overlay location markers using GPS coordinates (similar to the uber clone but with a location plan as the base rather than a map).
What would be the best avenue to explore?
You can use the location manager to get a location listener. You can use the lat/lng values from the location listener to position the image correctly using either an image viewer or manually using drawImage (from Graphics). You would need to know the latitude and longitude values corresponding to the image corners so you can position the image correctly.
I want draw a line for a position on google maps. e.g. I want draw a vertical line for London city in this location 51.5072° N, 0.1275° W.
I use ionic framework and maps template. How I can draw vertical line for it?
and How I can set current location for displaying?
thank u!
You would like to draw a vertical line from London to what city? You can create a Polyline from London to another location.
If you would like to draw a line that is simply vertical, you could just specify another point in the polyline with a different longitude but same latitude as London.
For your second question, I assume that you mean setting the center of the map. Simply call setCenter(latlng) on your Map object. Details here.
EDIT:
If you want to set the user's current location as the center, use the navigator.geolocation property. Call map.setCenter() with the returned latitude and longitude. There is an example here.
i have a label and i wanna change it's location corresponding to mouse position, my problem is the label location !,it's relative to a application windows, how could i change coordinates to make them relative to screen coordinates.
thank you
sorry for my bad English :(
Just add the mouse coordinates (relative to the window) to the location of the window on the desktop.