I want to change a point’s height by mouse, only height, because longitude and latitude was fixed.
please give some idea..., thanks
The effect is as follows
picture
I try to convert mouse's position to coordinates it's useless, and I try to convert to screen pixel to distance the Proportional problem was happen
Related
I wanted to create this Pixel Effect from Frontend Expert.
Although I was able to implement the entire pixel effect on a full screen canvas:
const canvas = getElementById('canvas');
canvas.height = window.innerHeight; // Gives the canvas height of fullscreen
canvas.width= window.innerWidth; // Gives the canvas width of fullscreen
and got the coordinates of the mouse pretty easily
const mouse = {
x: undefined,
y: undefined
}
canvas.addEventListner('mousemove', function(e) {
mouse.x = e.x;
mouse.y = e.y;
}
About now the canvas width and height was equal to that of the document, therefore, it was pretty easy to get the exact coordinates of the mouse.
But when I tried to implement it with 800px X 400px dimensions and used a flexbox with it (like shown in the website) my mouse coordinates got completely messed up and I spent hours in fixing but wasn't able to get the accuracy as shown in the above website. Also there were some issues related to resize.
I would like to know how can I preserve the mouse accuracy.
Your help is much appreciated.
I believe when you use e.x and e.y, even though used in an event listener for tha canvas, they return the mouse coordinate relative to the top-left pixel of the entire page, not just the canvas. If by messed up, you mean that anywhere you click, the pixel effect is offset in some constant direction, this may be your issue and you should replace e.x and e.y with e.clientX and e.clientY. The ‘client’ in e.clientX refers to which element the listener is for and specifies to give event coordinates relative to that element instead of the page. If it is messed up in some other way, then I don’t think I have an answer for that.
I have an image which is 640px by 480px and I have coordinates where I want to create a canvas crop of the image. I am a bit confused as to how to work out for 1, the crop size, where to crop and so on.
How would one work out the correct position to crop and the crop size? e.g. what size to set the canvas from coordinates such as the following
coordinates = [160, 593, 345, 407] // [top, right, bottom, left]
essentially im returning image coordinates from a Python script but no idea how to work out the correct positions.
The drawImage() method takes arguments for source and destination coordinates.
context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
I have been struggling with this problem for sometime, I hope someone would be able to help me out on this.
I have added canvas object in my html code, in which I load a photo image. I am trying to scale the image at some random coordinates, but the scaling happens only from the center of the canvas. If I use translate the whole image moves as the origin changes. I have also tried transform but that too doesn't give the desired result.
use context.drawImage() + extended parameters to scale your original image onto your canvas
context.drawImage(srcImage, srcX, srcY, srcWidth, srcHeight,
canvasX, canvasY, scaledWidth, scaledHeight)
Where:
srcImage = your source image
srcX = the X-coord on your source image you want to start grabbing pixels from
srcY = the Y-coord on your source image you want to start grabbing pixels from
srcWidth = width of a rectangle of pixels you want to start grabbing from the source image
srcHeight = height of a rectangle of pixels you want to start grabbing from the source image
canvasX - the X coord on the canvas where you want to start painting your pixel rectangle
canvasY - the Y coord on the canvas where you want to start painting your pixel rectangle
scaledWidth - scale the source pixel rectangle to this width before painting to the canvas
scaledHeight - scale the source pixel rectangle to this height before painting to the canvas
For example:
context.drawImage(myMap, 50,50,100,150, 20,20,200,300)
This will grab a 100x150px rectangle of pixels from myMap image object starting at coordinate [50,50].
Then it will scale the pixel rectangle to 200x300px.
And finally, it will paint the scaled-up pixel rectangle at coordinate [20,20] on the canvas
I've implemented a zoom and crop on the HTML5 Canvas. Zoom is actually increasing the height and width of the Canvas so that it looks zoomed. For crop, I wrote an algorithm to select a rectangular area using mouse and then crop it. Now, if I want to crop when the image is zoomed in or out, while selecting the crop area I have to consider the top and left position displacement caused due to the zoom , which works fine.
So I'm now implementing a rotate (using css3 transform: rotate). The problem is, when I rotate the image by a certain angle, the selection appears a little away from the actual mouse position. This used to happen for the zoom effect as well, but since I used to subtract the added left and top distance from the x and y position resp., I was able to draw the selection even when the image was zoomed. I don't understand how I should do it for a rotated image!
The following image might help you understand my problem a little more clearly:
There's a div around the canvas, reflecting the canvas. It'll have the same width, height, top, left properties as the canvas. This is done on purpose since I can't add the selection, which is absolute, as the child of the canvas. Now this cover, when selected in FireBug, still shows as a rectangle with increased width and height and changed top and left positions.
I understand I have to calculate the displacement like I'm already doing for zoom, but I don't know how to do it! I have spent a lot of time trying out stuff like Pythagoras algorithm and rotational matrix and blah blah!
Please help me out!
You can rotate each of the vertices using this function where "pnt" is a vertex, "pivot" is the point you're rotating around and "angle" is the angle in radians
function rotatePoint(pnt, pivot, angle){
var data = figureAngle(pivot, pnt),
theta = data.angle + angle,
rise = Math.sin(theta) * data.length,
run = Math.cos(theta) * data.length;
return {
x: pivot.x + run,
y: pivot.y + rise
}
}
function figureAngle(start, end){
var rise = (end.y - start.y),
run = (end.x - start.x),
length = Math.sqrt(Math.pow(rise, 2) + Math.pow(run, 2));
return {length: length, angle: Math.atan2(-rise, -run) + Math.PI};
}
Then your horizontal shift is going to be the smallest x of the 4 new vertices, and your vertical shift is going to be the smallest y.
EDIT: this assumes your top left coordinate is [0, 0] before you rotate. If not you need to subtract your starting coordinates from the results i.e. if your top-left corner starts at [50, 100], your horizontal shift would be xMin - 50, and your vertical would be yMin - 100
I'm looking for a way to determine the display/screen coordinates of a movie clip element.
point = uie.localToGlobal(new Point(uie.x,uie.y));
posX = point.x + (uie.width / 2);
posY = point.y + (uie.height / 2);
The code above only retrieves coordinates within the stage. However - I need display/screen coordinates and NOT stage coordinates.
Maybe there is a way to retrieve the display/screen position (top left corner) of the flash container or move the mouse to a position within the stage, retrieve the screen/display and stage position of the mouse and determine an offset between screen position and stage position. Is this possible within (!) AS3?
This isn't possible within the Flash player. You could try to get the coordinates of the flash container with javascript this will get you a coordinate relative to the browser window. Javascript can get the browser's screen position relative to the desktop. You need the window.screenLeft api of the browser. With this you can get the position of the flash element on the page and add it to the browser window. This will give you the correct position with a small error margin.
You can also achieve this with Adobe Air. With the NativeWindow api.
stage.nativeWindow.x = 0
stage.nativeWindow.y = 0
This code snippet will set the window in the top left corner for example.