I have an image in a HTML document with an absolutely positioned Canvas element on top of it, to allow me to draw over the image. This may seem like bad practice, but I am also using a JavaScript library that adds effects to the image when you mouse over it. For this reason, I cannot simply draw the image to the canvas.
However, having the Canvas in front breaks the JavaScript library, as the image is no longer generating mouse-over events.
Is there any way of having these two bits of functionality simultaneously?
(If needed, I can specify exactly what my problem is, but answers are more useful when they are generic.)
You can use jQuery.trigger or dispatchEvent with initMouseEvent to manually launch event on image.
Simple way to do it bind events to canvas and then pragmatically track if the cursor within the bound of image...
In the end I set the image as the css background of the canvas, then had a transparent png over the top to bind events to and track movement.
I also ended up modifying the library to my own needs, as I couldn't find another way.
Related
I am trying to draw some guide lines via fabric.js like the online editor app on printio.ru.
So far, I placed 2 canvases with the same size in one page, the top one is to be a static workcanvas which used to draw some guide lines and the bottom canvas will contain some interactive objects. This seems to be how they do it in the page on the link above.
However, I can't work with those objects on the bottom canvas because the top canvas interrupts mouse events. Is there a way to let the mouse events to pass through to the bottom canvas? I am thinking of something like canvas.mouseenabled=false on the top canvas - is that possible?
I have thought of an alternative solution: place the guide lines and other objects in one single canvas. I don't like that solution because it adds things that I don't want to the bottom canvas and, in that case, I have to add some line instances instead of just draw line by context2d, which I think will give me low performance
Apply css-property
pointer-events:none
to upper elements, mouse events can through.
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
It will be work for modern browser.
http://caniuse.com/#feat=pointer-events
Perhaps the title isn't great, but I had a little trouble with the wording...
Basically, is it possible to have jQuery's hover only fire over the actual content of a png with an alpha channel.
So in the image below;
http://i.imgur.com/3kO7v.png
Only fire on the rectangle and not the alpha channel which make up the rest of the document bounds...
I've tried the obvious $('obj').hover(function(){stuff}) but this fires on the alpha channel too...
The final implementation of this will be for more complex shapes than just a rotated square, so css3 tricks are out for the primary basis, but could be used with a back-up/shim, plus I need to support IE7 and ipad,iphone,ipod....
If there is a CSS2 solution then that would be suitable too. Also any real guidance on this issue is more than welcome.
My backup for this will be to have an empty div, display block and position it over the shape and then use that. This will obviously not be ideal for the less square objects.
Any hits or tips are more than welcome.
Thank you
Yes it is possible depending on the stacking context of your elements. Keep in mind that when you do a focus over any particular element on a page, that you are actually focusing all other elements within the same stacking context.
So what you could do is either stop the event from bubbling up the stack (if the element you want to "hover" is lower in the stack that the elements you want to prevent hover effects on), or specifically put in prevent default for onhover events for all elements in the stacking context except for the one you want to actually get a hover effect.
I need to handle mouse events on a page where there are multiple irregular-shaped objects (for example, houses) are stacked on top of each other. If I use the normal way of event delegation jQuery .on(), the event source reported will always be the top most object, even if user clicked on the transparent part of the object (or image).
Example: <img> tag that contains the red triangle will always be the event source even if I click at the X position.
I can detect that mouse click is not inside the triangle. What I need is a way to "forward" the event to the green triangle below.
EDIT: My current approach is to catch the events on a big div that wraps everything, then use jQuery selector and compare coordinates to find out which object is under the mouse, then check if the mouse is in transparent part or not. It works fine, but seems to be slow and consume a lot of memory, especially with mouse move events being fired continuously.
EDIT 2:
This image was extracted from Building a game engine with jQuery, and my approach was almost identical to that. And now, this is the question:
Are you drawing complex graphics using plain HTML elements? Not sure about your exact needs, but it might make more sense to use SVG or Canvas, where catching click events on shapes becomes much easier.
Is it possible using javascript/jquery to desaturate and also blur a tag contents where both effects are minimal in the center and max'd at the corners radially?
I have a canvas element with a parallax effect going on as you move the cursor around. I want to blur and desaturate the contents the farther from the center of the container (div or canvas) but still allow the parallax effect to go on underneath... how can I create this effect?
There's no built-in functionality for doing exactly what you want, but you do have the option of coding something to do this or using an existing library to give you similar functionality. With the HTML 5 canvas, you can alter images at the pixel level using javascript. Here's some reference:
Pixel Manipulation by Beej
A few interesting blur techniques
JS Library that includes blurring and desaturating
I need to make a interactive image gallery (or image slider) where some hotspots need be placed on. It has to be possible to click on those hotspots, to update a sidebar with the corresponding info. Some basic animation must also be possible on a slide or scene of the gallery.
Which setup would be the best solution.
I'm currently thinking about the canvas element, but the lack of specific events for drawn hotspots makes me doubt. EaselJS could be a solution though.
An alternative could be just using a regular javascript image gallery and place some fixed positioned hotspots on it.
This is actually a basic mvc-setup, I have the image gallery, hotspots and the sidebar.
Should I use a javascript mvc library like http://javascriptmvc.com/ or backbone.js
So my question actually is, what would be the best setup, with performance and some basic animation in mind?
Thanks.
other interesting links I found:
http://processingjs.org
http://raphaeljs.com
...
If you are displaying large images or expect users to have older browsers or browsers without current GPU acceleration then you should always use standard HTML4 elements to get this done. Using canvas is overkill and will cause you pain later on if you are not overly-experienced with it.
With DOM-based images you already have click events and can even use image maps to do the click-regions. With canvas you need to code your own click detection and map mouse position to a region to check for clicks.
All in all the simplest solution is usually the best one and for performance and ease of dev, canvas is not the way forward in my opinion.