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.
Related
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.
My question is it possible to dynamically change the text of a Konva.text by doble clicking and entering the new text with the keyboard?
Konva has no out-the-box editable Text.
The docs page suggests placing an editable HTML element on top of your canvas, let the user make edits, then remove it when done. With this approach, your main problem would be to keep the text styles consistent between the Konva element and the DOM element, to some degree. Otherwise, the transition between the two modes might not look truly WYSIWYG-like. However, depending on what you need, this solution might be just close enough.
Another approach would be to create a hidden textarea/input, capture its events, and fully emulate text interactions, like cursor movements and text selection, on canvas. This would be hard to do properly but could arguably lead to a more seamless UX. In fact, this is what fabric.js does under the hood for its editable text.
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?
I am new to HTML5 and i have working on converting simple flash game to HTML5. What i have to do is, i am having an image of a character, so i have define the parts of the image in such a way that when user clicks on the head it should say you have clicked on head, and if some one click e.g on hand it should say you have clicked on hand or it is clicked in the face of the character.
I have done googling and find we can define different shapes and i have drawn and got successfull
So i just want to know that in my image what should i have to do, i have to use images for different parts or i have to draw character using HTML5 bezierCurveTo function.
Please tell me the best way and how can i do that.
Thanks
You can do it either with Images, SVG Elements, or Canvas.
If you have Images or SVG Elements, you can hook the onclick event of the Image to tell when it is clicked. Images will be the rectangular bounding box of the image, but SVG Elements will be the tight bounds. Use document.getElementById(<id>) to get the element from your page.
If you are using Canvas, you can use also use onclick but inside the callback, you can use CanvasRenderingContext2D.isPointInPath() to see if the point is in the head. This will allow you to check the exact bounds of the head, not just the rectangle around the head.
canvas.onclick = function(event) {
context.beginPath();
// Recreate the head path here.
if (context.isPointInPath(event.offsetX, event.offsetY)) {
// Click was within the head
}
};
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.