I wonder if anyone could assist me with this?
I am writing a webpage with a drawing area ("GraphicsArea", below) that loads a map as a SVG image into the innerHTML of the "DiagramArea" div contained in it. The SVG has defined areas which have events attached to them and css styling that allows me to highlight areas as I mouseover them, and fill them with a highlight colour when I click on them. This all works fine.
I have, superimposed over the "DiagramArea", a HTML5 canvas element ("CanvasArea"). I have some javascript that allows me to draw inside this freehand with the mouse. The canvas is transparent, and I can see the map underneath it when I draw.
I can toggle between the drawing canvas layer and the "DiagramArea" with the SVG which I am using as an imagemap, by setting zIndex. I have a button that does this, allowing me to swap between functionality to highlight areas of the map, and the freehand drawing functionality.
My problem is that if I toggle away from the canvas, its drawing is hidden while I use the image map functionality. I can toggle it back again to display the drawing overlay after I have highlighted the areas I want to highlight, but it's a bit clumsy
Is there a way to keep the canvas contents visible while I'm using the rollover and click events attached to the SVG? I'm not particularly fussy as to whether it's a style or code solution. I'd prefer to avoid having to use an external library, if possible.
<div id="GraphicsArea">
<canvas id='CanvasArea'></canvas>
<div id="DiagramArea"></div>
</div>
Many thanks.
Related
So I'm making some sort of interactive map for a roleplaying game I have, where I want to be able to hover a country and it can scale up a bit and have a hover effect and so you can be able to click on it and it will give you main info of the country and stuff. Now the issue comes that I'm trying to check if there is a way to have multiple PNG layered up on HTML, CSS, JS and avoid having the transparent background of the top layer hover only that specific one. I'm trying to check if there is a way for the code to detect only the colored area of the img or if this is not possible.
I've tried layering with the z-index, but that doesn't really resolve the issue.
The effect I want to achieve is an image in a div that has a coloured highlight on top (with some opacity to see through it) and when you hover over that image a certain radius around the mouse will have the highlight removed (think of shining a torch over a greyed out image to reveal a brighter around around the torchlight)
I don't know where to start with this because I wasn't sure about dynamically styling a portion of a div without setting proportional properties in css. I know i can achieve a 'blocky' version of this with on hover and styling sections of a div on hover but that means i would have to constrain the styling to seperate div elements and it would not be 'fluid' so I'm looking for some pointers to a js solution I can write (possibly on mouseover call a function that gets mouse position and gets radius around it but then I wasn't sure how to dynamically style that radial area?)
Are there any functions that allow this type of styling within a dynamic area?
The solution you're looking for might be achieved through CSS but using JavaScript mouse events can also help.
Like discussed in the comments section, you can use help of the mousemove event to somehow achieve what you desire.
For other users reference, here is the link to the codepen https://codepen.io/edupoch/pen/GIhJq
In the codepen above, instead of the zoomin cursor image, you can use some gif image with the effect you want and apply it using the above code.
I'm making a svg drawing app. I have a tool that allows the user to select all the shapes in a rectangular area.
I need a way to detect the svg shapes under the rectangle.
I tried to use "document.elementFromPoint" and "getIntersectionList" on my root svg element. I use a path svg object with the fillColor set to none to display a line. getIntersectionList selects the path if the area is over the invisible region, so it isn't working. "document.elementFromPoint" doesn't work if I scroll.
The only way I can think of is to generate a click event on all the pixels inside the area, and listen to that event.
How can I do that? thank you
edit:
Here's an illustration. The white square is the selection area. Items under it must be highlighted in red. The square follows the mouse. If I move the mouse away from the lines, they must turn back white
If you want to have a click events on the svg elements, I would strongly suggest checking ngx-svg library. It provides various svg elements and events on each of them. The usage is also pretty simple -
<svg-container id="test-container>
<svg-circle radius="2" (clickEvent)="doSomething($event)"></svg-circle>
</svg-container>
The events are available on all elements. Also you can customize different stuff using the library. For more information, check the documentation of the library.
I'm trying to create a coloring book using EaselJS similar to this example:
https://github.com/CreateJS/EaselJS/blob/master/examples/CurveTo.html
However, I have discontinuous shapes I want users to color, and I want to hide paint strokes outside the shapes while allowing them to initiate a stroke outside of the shape. If they do start drawing outside the allowed space, I still want the part of the path within boundaries to be displayed.
to see what i mean click here
My first idea is to use a full canvas and cover the parts not colorable with an svg filled with the background color, but that would involve having to pass a click event on the svg to the same pixel on the canvas it's covering.
Is there a better approach?
There are a lot of questions regarding drawing on the canvas element and using things like Raphael.js (which is pretty awesome), but I'd like to know if there is a way I can draw some vectors (mostly diagonal lines) above the DOM document rendered in a html doctype webpage.
I haven't done much with the canvas element but I think it might be possible to do something like this with perhaps:
getting / monitoring the window size with javascript
creating / resizing a canvas element that takes up the whole page
somehow setting transparency on the canvas element
drawing the vectors that I want
When you use a clear .gif you can't click on or interact with the things underneath it - I would like to still be able to interact with the webpage normally. I would also like scrolling to move up and down the page normally so the vectors would scroll with the DOM elements.
Am I heading in the right direction with this?
How can I draw vectors above the HTML / DOM in a standard webpage?
Here's an example of Raphael.js drawing on top of text in a div http://raphaeljs.com/spin-spin-spin.html
Some more background on Raphael:
Raphael draws on an SVG canvas. If you give that a transparent
background and position it over the window (z-index), then you can get
the appearance you seek.
https://groups.google.com/forum/?fromgroups=#!topic/raphaeljs/SAPCl_UMNco