In my project, I need to click on an image drawn in the canvas. I am able to do it with coordinates. But that is not the right way to do, because each time different images with different size, gets loaded. So sometimes there will be empty space around the image on canvas depending on the height and width of that image. And this image cannot be located through DOM. Is there any way for Selenium to find the boundaries of these images which gets loaded(dynamic)? So that I can mouse click within the image.
xord = Integer.parseInt(ExcelUtils.getnumData(i, 5));
yord = Integer.parseInt(ExcelUtils.getnumData(i, 6));
new Actions(driver).moveToElement(target, xord, yord).click().perform();
More details on project:
This page has a canvas on which image gets loaded.
Test scenario is to select a dropdown, which will load the image on this canvas.
In positive test case, mouse click anywhere inside the image.
In negative test case, mouse click anywhere outside the image within canvas space.
Related
I have an image in a React application, in the future images from cameras will be displayed there. the task is to get the coordinates of the clicked place by clicking on the image. as if we are clicking on a target in the image.
I've tried using const coordnates = [e.clientX, e.clientY] but I get screen coordinates not the
It seems like that you're looking for this: Find mouse position relative to element. (getBoundingClientRect)
But there are plenty options that you can use for example <map>.
I am not sure if it is possible. But let's say there are two images, one over another. Then I will have a circle size 100px around my cursor. So when I move the cursor over the image, it shows part of image that is under the front image. So the back image is hidden and visible only if the circle size 100px is over some part of it.
Unfortunately I have no code as I am not sure if it is possible to create.
However, any idea about it?
I would try actually stacking the hidden image above the visible one, then use HTML5's canvas to track your mouse cursor, clip a circular area underneath your cursor, then draw your image above it. This gives the illusion that you're "revealing" an underlying image, when in fact you're really revealing a small portion of an image stacked on top. Repeat this any time the user moves his/her cursor.
Here are some resources you might find useful in coding this:
HTML5 Canvas Clipping Region Tutorial
HTML5 Canvas Mouse Coordinates
Stack Overflow: clearing circular regions from HTML5 Canvas
Is there a way to mimic this on have image event?
On hover image enlarges but it is done in smart way - it knows were browser window ends and all the times it manages to reposition enlarged image so it always shows full image.
Foto example of what I am talking about:
First assign a mouseover and mouseout event handler to the image class that sets a flag variable to true and false. On the mouseover event, get the img source then display that image in the viewing box. If the flag variable is true, then display the viewing box and adjust it's position according to the mouse's position. As far as deciding which side of the mouse to display the image on, I would recommend simply checking if the mouse is farther than half way across the x axis. You can do this by checking if event.clientX > window.innerWidth/2
I have a canvas which loads in a selected image. The canvas should display 2 6x6 rectangles where the user clicks. On the first click, the rectangle should be red, the second click it should be blue on the third click, it resets (deletes both first rectangles) and so on..
This works fine (see example here: http://jsfiddle.net/8HSGG/)
My problem is when I reload an image, the rectangles start messing up (i.e. colors come in different order or don't show up at all).
I have two variables in the Javascript: topLeft and bottomRight which are both null whenever an image is loaded in, then a check based on those and paint accordingly.
Any idea what's going on?
You're adding click and mouseover event listeners to the canvas every time you're "handling" the image. Thus, I would suspect you're getting code that gets invoked multiple times.
Here's a canvas app I come across : canvasphoto (uses YUI 2 I believe, which I haven't used before). It displays images on a canvas and it lets you resize/move the images across the canvas. What I want to do is to add a close button on the top right side of the images drawn on the canvas and have it trigger an onclick event when clicked (I'd display a confirm button asking the user if he/she wants to remove the image).
Is this possible? If so, can you help me get started on this (resource/link for drawing an image on top of another image drawn on a canvas, basic canvas manipulation, etc.) Thanks!
Edit: solved the part where the image rendered will respond to click (on top right corner only). So, the only problem left is drawing the close button on the top right corner of the image.
There is no way for something drawn into a canvas to respond to events without additional work. Either you can store the position of the close box and have an onclick event on the canvas check if the click occurs within the rectangle, or you could place an element over the canvas where the rectangle has been drawn and use that to handle the click. A relatively positioned div with no contents would work.
Instead of drawing on the corkboard, a div with an image is rendered on the page above the top right corner of the image by setting a higher z-index than the canvas and and absolute position (with the coordinates of the top right corner, of course).