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.
Related
My page has two overlapping elements: a body that displays a DWG file, and a canvas that's only displayed when the user selects a specific option and covers the entire body.
When the canvas is hidden away, the user can drag the file by clicking, holding and dragging, but when the canvas is placed over it, the option is unavailable.
I need a way to click into the canvas and drag the underlying body. So far, I've added a mousedown function that hides the div and a mouseup function that brings it back, and both are functioning as intended. However, I'm yet to find a way to "bleed" this click through to the body to make it movable as mousedown still "sees" the click into the canvas. Displaying the canvas, or moving it while the body is being moved, is not required.
I've tried using the "FireEvent" method described this question with both "click" and "mousedown" events to no avail.
If I've understood the question right, you can use the pointer-events: none CSS property to click through an element.
See this Codepen to see pointer-events: none in action: https://codepen.io/trustedtomato/pen/bGdVvwX
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.
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 am trying to get the mouse over function working in my pure Javascript (no jQuery, HTML or CSS). At the moment I have created just a small circle and when I mouse over it I want it to change colors.
instance.threadContext is just the part of the canvas where the circle is being drawn.
Any help would be much appreciated.
What you need to understand is that when you draw something onto a canvas, it does not become a ui element, but is actually a part of the overall image of the canvas. The reason you can't invoke a mouse-over event on the circle is because the circle isn't a thing that can receive events, it's just a drawing of a circle on an element which itself can receive events.
One way that you can get around this is to measure the mouse position on move and redraw the circle in an over state when the position is within the area for which you want the event to be triggered.
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).