Resize the renderer in highcharts through mouse events - javascript

I have drawn a renderer in high-charts using the mouse events . I want to resize and drag&drop the drawn renderer,since I couldn't get a way to resize the drawn renderer I have statically created a html div element with jquery and used some plugins from jquery to resize and drag&drop the drawn element and passing the resized and dragged value from the jquery div element to the renderer in high-charts so the the high-charts renderer gets dragged to the exact position where the html div element is dragged by the user. can anyone help to achieve this only through high-charts?? I have used mouse events to draw in high charts but i cannot get resize and draggable options for drawn renderer, Please look to this fiddle to see what I have done..[jsfiddle](click herehttps://jsfiddle.net/vgokul2272/ecqL1nw7/3/). you can notice on drag and drop of the grey box ,a yellow box behind the grey box.grey box is the html div element and yellow box is the renderer in highcharts.

Related

Jquery Draggable element is shifted out of snapping grid after rotating

I have draggable div rectangles and a grid of divs (of the same size) within a wrapper onto which the rectangles should snap and drop. Those rectangles are rotatable to the need of the user. When the user rotates the rectangles, at the same time the grid rotates in the same direction as well. The rotation is done with css transform. When I rotate the elements and the try to drag and drop a rectangle the snap is shifted by different amount of pixels, depending on the amount of rotation.
You can see the problem in action here - when you click on the measure tape icon and click on the satelite image, then you start rotating the rectangles along with the grid.
https://www.ticketa.cz/sketch/
I tried setting same transform origin on both draggable and snap elements. Also tried setting different options of the snap UI setting. Also tried setting draggable refresh positions to true. No help.

How do I force scroll wheel events to only affect a canvas filled with BabylonJS

I have a web app that contains a canvas filled with a BabylonJS created scene (with an ArcRotateCamera) and other html content.
I want to use the scroll wheel of the mouse to zoom the camera in the canvas.
This works as long as the html content is not scrollable. As soon as the html becomes scrollable the scroll wheel affects both, the zoom of the canvas (that is what I want) and the part of the HTML page shown (this what I do not want here).
How could I prevent the scroll wheel from affecting the HTML contents (which ultimately scrolls the canvas offscreen)?

keeping a drawing canvas visible behind an image

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.

SVG chart move elements which do not fit on the screen

I use svg.js to draw my chart. The chart is very specific, so I can't use some plugin to do it.
I have elements, rectangles, on my chart that are too long. The problem is that I can't resize all elements to display the elements that are too long; I have to scroll.
How can I do this?
Solution 1:
Drag and move the SVG to change the position of all elements.
This doesn't work when I use it on mobile device in browser; when I try to drag, the elements do not move, because browser goes into zoom mode.
My example:
Element 2 is too long; it's svg rect. Is it possible to allow scrolling horizontally? Or, is there a way to move all of the element's on the chart?

Javascript mouse over

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.

Categories

Resources