I want to detect when a user is zooming in or out on a document that is opened with the pdf.js library on an iframe. I'm pretty much looking for the term of "whatGoesHere" on the code below. The equivalent of 'pagechange' or 'pagesloaded' only for zooming.
innerDoc.addEventListener('whatGoesHere', function(e)
{console.log("zoom changed!");});
I found that 'pagerendered' does trigger after every zoom, but it also triggers on page moves. If there's an event strictly for zooming that'd be ideal.
there are 3 events for zooming:
zoomIn
zoomOut
zoomReset
Related
My question is how to disable the bouncing effect while scrolling in Figma? I can't find any information about it in the documentation and I was thinking if is it possible to remove that effect at all. I mean scrolling in the emulator of figma.
To date, there is no way to disable that effect.
Workaround:
To demonstrate scrolling without the bounce effect, you have to present part of your prototype as an animation, specific to that scrolling scenario. Then explain to the viewers that all scrolling behavior should follow that.
I have a "cover" image for the top of one of my views that i'd love to be able to blur out as you scroll it out of view as a cool effect.
My state contains a blurRadius property, which i am binding to the blurRadius={this.state.blurRadius} prop on my <Image> component.
I have a <ScrollView> and am monitoring when it's scrolled with onScroll, where i am calling setState({blurRadius: value}) - value being the distance that you've scrolled the view.
I've also set the scrollEventThrottle={30} prop on the scrollview so that i'm receiving the event regularly as the user scrolls.
The issue seems to be that the blurRadius updates but after a significant delay - and only to the maximum value. Am i missing something in order to make the image apply the new blurRadius with every call of setState?
Could it be that the image is just too large?
You should not use setState to set anything as a response to onScroll, as this leads to poor performance. The reason is that the whole view will rerender for every call to setState, which leads to "view thrashing".
Instead, you should use the Animated API, as this 'declares' the animation to the native UI thread, thus avoiding rerenders.
Brent Vatne (from the Expo team) gives a great explanation of Animated as well as a concrete example of animations as a response to onScroll events in ScrollView here
Hope it helps someone :-)
You can try using setNativeProps instead of setState to see if the performance improves. You just need to give your Image a ref.
this.refs.myImage.setNativeProps({ blurRadius: myValue });
Reducing the image size would also help as it would not need to blur as many pixels.
I have been working on getting this seat mapping chart for a while and have created a few iterations, and the problem I keep finding is when I get to IE8 the panning for this is way to slow and delayed.
What I have at this point to cut down on load time is created a png to replace my "strokes" since I assume ie8 wanted to re-render each time I dragged the map.
I also added controls hoping to force IE8 users this option, but still there is a delay in the pan, and if I can have users with IE8 (and ie7 if possible) still drag/pan without the controls and the respond time a little faster that would be great.
Here is my current JSFiddle
I am still a little green with JS so if you have any suggestions it would be much appreciated. (PS Chrome frame is awesome but is not a option for me)
Update
I have removed the original dragging function and replaced the code using jqueryui's draggable function. Martin had suggested to just drag the div, and not the Raphael elements. Doing so lets this thing fly in ie6-8 which is great, but then came my concern about scaling. What I was seeing before on zoom my paper element WxH would stay the same ratio, cutting off my drawing when it zoomed in. After digging through the Raphael documentation I came across paper.setSize. setSize was exactly what I needed to allow this project to move and groove in ie6-8 and pretty much conquer all browsers in its path.
So in short, using jqueryui's draggable and paper.setSize has cured my cross browser zoom n' pan blues.
From what can be seen in the Fiddle, you are triggering a new rendering of the image by calling .translate() inside of a mousemove event handler:
mapContainer.translate(currentMapPosX, currentMapPosY);
rsrGroupies.translate(currentMapPosX, currentMapPosY);
This approach is toxic for performance in all browsers, let alone IE8. When dealing with VML in IE8 you should consider that each and every DOM change inside the image will result in the image being rendered again. Doing that while panning will always be painfully slow.
I see that you are already using jQuery in your Fiddle. If you want to increase performance of your panning, you should consider doing the following:
Render the image in Raphaël exactly once for the current zoom level. Do not attempt to change transformations in your VML/SVG image at any point in time while panning.
With the mousemove implementation of panning you already have, move or scroll the HTML container that holds your VML/SVG image instead. Imagine a <div> with overflow: hidden and simply move the image inside relatively, or scroll to the appropriate position.
This will require some adjustment of your coordinate calculations, but it will improve your performance in all browsers.
For I have a javascript version GMap.html, I can successfully display it in the WP7 WebBrowser, but I cannot make it pan or zoom in; is there a way to disable the default gesture behavior(such as fix the position the map's div; if I slide up, the map pans to north, when I double touch, it zooms) to allow the GMaps panning or zooming?
Here attached a very simple sample, when opening the emulator, you can see the map is displayed, but when we want slide up/down to pan north or south, it works like panning the web browser up or down.
http://hotfile.com/dl/135072503/ec55e86/PhoneApp1.7z.html
Thanks,
You should be able to hook the manipulation events from the Border that surrounds the ContentPresenter in the visual tree for the WebBrowser control to intercept them before they get to the PanZoomContainer, which would allow you to do whatever you need to with the content.
Colin Eberhardt has a great post about it on his blog where he basically disabled the standard manipulation events for doing HTML5 apps on Windows Phone, but the concept is still the same.
with windows phone 7 i am using teh bing map control. i have it working just fine. however, the zoom buttons (+,-) are at the bottom of the page and difficult to see.
The buttons have black border with black text. They are easy to see on a light map background, but with black background they are in essence hidden.
Does anyone have an idea on how to make them easier to see?
As invalidusername said you can use the pinching to zoom in and out and it is probably a better way to do it. But in my case I haven't a device or touch screen so needed to use buttons in this way to test my map.
Rather than using the built-in zoom buttons I looked at the sample code from this tutorial which has icons for zoom in/out and data bound them to the zooming of the map. Adapting it to my needs. It works pretty well:
http://msdn.microsoft.com/en-us/wp7trainingcourse_usingbingmapslab_topic2
You can change the positioning/images etc.
As per DanielBallinger's comment the link above seems to no longer work. The following does:
Bing Maps Tutorial