Can I use two canvas elements in the same HTML file? I need to drag images from some area and drop them in another area in the same page.
The first region is a canvas where all images are put (I will use EaselJS library for this one). the second, and biggest part, is a grid. Tell me if you have other alternatives, I need ideas to implement this solution.
Yes, your project is possible.
Here's an outline:
Add all your images to EaselJS (as Bitmap objects);
Listen for mousedown events on the Bitmaps.
On mousedown:
Create an html img element (or have it available offscreen)
Place the img element directly over the EaselJS bitmap.
Make the img element draggable with jQueryUI
Make the second canvas a dropzone for the draggable img
Set the Bitmap visible property to false (so it’s no longer visible in EaselJS)
Trigger the mousedown event on the img element to trigger dragging the img
On drop: use drawImage to draw the dropped img on the second canvas.
Pseudo-code: secondCanvasContext.drawImage(imgElement,dropX,dropY)
Related
see demo: https://codesandbox.io/s/svg-marker-element-ekkkx?file=/src/App.js
as you can see - the events on the marker element just do not fire.
what can do to make it work, or any idea for an easy alternative implementing arrowhead without the use of SVG marker elements, or any sort of workaround?
(you can see a more detailed explanation of the problem here )
It's possible to reposition the arrow using translate, so that the marker element would no longer be needed. Here's the link: https://codesandbox.io/s/svg-marker-element-ewp6g?file=/src/App.js
Another option is to create a transparent absolute positioned element layered on top of the arrow's head: https://codesandbox.io/s/svg-marker-element-uf3sz?file=/src/App.js
I am making drag and drop event with html5.
If you drag an image, the transparent image sticks to mouse cursor though the base image keep still.
I would like to hide the base image as if you move some real object.
So I try this code.
<img src="img/tape01.png" id="img">
var img = document.getElementById('img');
img.addEventListener('dragstart', function(evt) {
//catch the drag event here.
img.style.visibility = 'hidden';
}, true);
But it hides not only base image but dragged image.
This is the standard behaviour of a html5 browser to keep two images of the draggable object on screen to remind the user the starting position and current position of the dragging object before its drop event is completed.
In your example, setting the draggable object 'img' be invisible will make the two images of it be invisible at the same time.
Is it possible to only trigger a div's mouseover when the cursor is over an opaque part of the div's background image? Perhaps via Javascript?
All I can find with Google are old IE PNG fixes.
This looks like a similar question to this one: Hit detection on non-transparent pixel
I suppose this could also be done for background image by getting the attribute with jQuery:
$('#myDiv').css('background-image');
I haven't personally done this, but it seems like a viable solution. This will only work for modern browsers, but you should be able to make it back-compatible with excanvas.
It is possible, just not very easily. You'll have to use a lot of Javascript.
You'd want to attach to your <div>'s onmousemove event, which returns the X,Y coordinates of the cursor. Your event handler function would then test to see if the cursor is in the correct place in order to trigger an alternative onmouseover event.
Implementing the "is the cursor over an opaque pixel or not?" test can be done two ways: the first is to create a simple mathematical expression (say if the opaque parts of the image make neat rectangles, circles or polygons). The more difficult (and less browser-supported) way is to load the background image into a Canvas object and then get the current pixel value's opacity figure and take it from there, like so:
var pixel = canvas.getImageData(x, y, 1, 1).data;
var alpha = pixel[3]; // assuming RGBA
if( alpha > threshold ) onMouseOver(); // raise the event
Another alternative is to create an entirely transparent div (or some other element) positioned and sized so that it only covers the opaque part of the div below, then just test the mouseover of that element's box.
It's a bit of tweaking but why don't you add a class to your opaque div, and use JavaScript to check for it?
In jQuery:
$('div').mouseover(function(){
if ($(this).is('.opaque')) {
//Some actions
}
});
I have this code for my effect to zoom in and zoom out in certains buttons
canada.addEventListener(MouseEvent.MOUSE_OVER, canadaover);
function canadaover(event:MouseEvent):void
{
gotoAndPlay("canadaS");
trace("in");
}
canada.addEventListener(MouseEvent.MOUSE_OUT, canadaout);
function canadaout(event:MouseEvent):void
{
gotoAndPlay("canadaF");
trace("out");
}
canada.addEventListener(MouseEvent.CLICK, clickcanada);
function clickcanada(event:MouseEvent):void
{
trace("Mouse clicked");
}
the problem is when u reach certain corner of the button it kinda gets into a loop, any ideas how can i fix this?
here its the link of the swf i'm trying to do:
http://viajescupatitzio.com/america%20map.swf
If your buttons are MovieClips you can add inside a layer with a mask (for example rectangle) on top. Mask width and height should be your mouseover region and give it alpha = 0. It will be invisible, but it will work with MOUSE_OVER and MOUSE_OUT Events.
You should move your buttons into a different hierarchy level than the graphics you are changing - even if the buttons disappear, or are covered with graphics for just a very short moment, both mouseOver and mouseOut events will be fired (the mouse has left and reentered the button) - and that probably causes your "loop".
It is generally a good idea to have animations and graphical objects within nested MovieClips, and place control elements on a higher level of the display list - that way you can make sure the elements don't overlap and/or interfere.
The reason for asking this question is because I want to be able to draw an arrow between two svg images. I want to use canvas to create the arrows, so firstly I generate the svgs then place a canvas on top of them to be able to draw the arrows.
I've tried using style=... but haven't had any luck as everytime I add the canvas element it just pushes my svg images to another pl
If there's no easy way to do this I'll just create arrows using SVG, I figured it would be more efficient to use canvas if I had to do lots of arrows in a short amount of time.
You need position:absolute on the CSS for the canvas to take it out of the flow, and then you can layer it as you like using z-index.
However, I instead suggest that you can use one or two tiny canvases to create the arrowheads and use toDataURL() on them to create a url you can use for <image> tags in the SVG. This way all your graphics are in SVG but you can use the canvas for complex raster effects if you need to.
have you tried z-index? it's a useful css trick
#svgcontent
{
z-index:1
}
#html5content
{
z-index:3
}
EDIT: accidentally screwed the #s up. 'scuse me.