I am trying to make the zooming functionality of a d3 topology map smoother on my app. The default zooming behavior are kind of lag a lot and mostly it conflicts with ionic touch events. I am trying to disable all default zooming features completely and will try to do it with zoom in/out buttons.. But it seems I cannot disable zoom.
Here is my markup
And here is my map code ...
Though I cannot pinch zoom on the map, but it seems I can zoom the svg by pinching the white area outside the map. I want to disable the pinch zoom completely so user cannot zoom it using touch.
You could put a div above the map, and give this div a transparent background and give it height and width as the map size, so when user touch the div it will give no effect since it is the div and not the map, and then you can do your zooming using 2 buttons (zoom in/ zoom out).
Related
So, i've been trying to implement pinch pan function with slider in react js, i have gotten the value to pinch the image by, but ive no idea now to combine those two features to pinch the image by the value i get from slider.
enter image description here
I would like to have the option of manual zoom in the enlarged image window on the mobile device. So that I can zoom into the displayed image within the Javascript frame. I do not want to zoom the whole web page. Is that possible? Or is there another Javascript that can do this?
It is not possible to zoom the enlarged image in Lightbox or Lightbox2. There is no such feature.
To do that, you should use a different zoom script, such as Magic Zoom Plus.
I am using the ReactJS version of the CanvasJS library.
I have some charts laid out on the screen such that they take up close to 100% height and width on a mobile device.
When I place my fingers on the chart and drag (in order to scroll down the page), I am unable to scroll. This issue doesn't happen on other parts of the page where I don't have the chart.
Is there any way to get scrolling working properly when touching these charts on mobile?
Figured it out.
I had the CanvasJS component wrapped inside a div component.
This div component had the following CSS attributes applied to it:
overflow-y:auto;
overflow:scroll;
overflow-x:auto;
Once I removed those CSS attributes (which didn't need to be there in the first place) I was able to touch-drag on the chart component on mobile.
I am using fabric canvas to draw rectangle on two mouse clicks.I am using Angular.js along with fabric.When I logged in to the application the rectangle drawn position changes after two mouse clicks.
I totally unaware about how to reset and refresh fabric js canvas. For any queries see my previous questions including code.
I would like to pan the zoomed area in a sencha chart. Currently I'm only able to zoom in and out on the chart as you can see in this sample: Sample Chart. I'm using the app on a desktop PC.
At the moment there is no posibility to pan in the zoomed chart. I'm managed to get panning working but then zooming is not possible. Is there a way to get both? Is there a setting I'm missing?
Thanks in advance!
The PanZoom-object has a proberty called modeToggleButton. Getter methode returns a button, which can be added to the UI. Clicking on it toggles between panning and zooming in the chart.