I have a pivot and it contains images. I have to make pinch zoom functionality in it. For that I took viewport and a canvas and inside it put the images. I am able to zoom the images. But I have problem with flick the images. When I am flicking the images images are scrolling, but I want that if user flick next image of pivot should come.And when images are zoomed then it should not be flicked.How I can do this?
You can use the behavior Pinch Zoom images bound in Listbox for pinch to zoom functionality. After that in the code behind, register the flick event, in that test the transform values of image, if there is no change to these values allow the event, else hold the event by handling it.
Related
I'm creating a mobile web application (HTML5/JavaScript/CSS only) that allows a user to take a picture. The picture from the camera is then loaded into a canvas HTML element. The user may rotate their phone when taking a photo so ultimately I want to rotate the output appropriately. Is there a way in a web page only to determine which degree a user has rotated when taking a picture? I'm not simply talking about whether they are in landscape mode. I'm meaning if you hold your phone straight up in portrait mode face it down at your desk (its now parallel with your desk) and then rotate it to landscape. This will not trigger an orientation change, but you will now be holding your phone in a "landscape" position if that makes sense. This will be a common way users will be taking the photos. I want to be able to rotate the image appropriately when uploading it.
Thank you
Is there a way in a web page only to determine which degree a user has rotated when taking a picture?
Yes there is! When photos are taken, they contain metadata - information about the image. This is called EXIF data.
It tells you things like the make of camera, whether the flash went off, and - usefully for you - the orientation of the camera.
If you are using JavaScript to draw the image onto the canvas, I can recommend BlueImp's JavaScript Load Image Library
Once you have loaded the image, you'll be able to do a call like:
var orientation = data.exif.get('Orientation');
That will tell you which way the camera was held when the photo was taken. Depending on the phone, you may also get rotation data, GPS data, compass heading, etc.
I'm a bit confused about what kind of tile I should choose to make my scenario work.
Scenario is as follows: my application supports small and medium tiles. By default in both these modes it shows an app icon on transparent background but user can choose a particular image to be a tile cover. When tile is covered with image I don't want it to flip or move - just a static image with app name on top of it.
I've tried TemplateCycle with app icon as default and user's selected image as an alternative but cycle tile moves these images up and down all the time and I don't want that. I've was considered TempalteIconic but it turned out it only supports images with transparent background so no option for user's image. So what kind of tile should I choose?
Use a normal fliptile but don't set anything(text, image) on the back. It won't flip if you do that.
I have created an expandable banner ad in Flash. Everything is great except one thing. How can I detect when the user is no longer hovering over the flash ad? I have tried to ad a "hit area" which can be used to detect MOUSE_OUT. The issue is, there is a video playing, as well as social media buttons which need to be clickable. If I place a hit area over these, they are no longer clickable. If I place the hit area behind the buttons, the MOUSE_OUT event triggers when you hover over the button.
What is the best practice for a scenario such as this? I have also tried detecting MOUSE_LEAVE on the stage object, but this doesn't seem to function correctly once deployed on an HTML page. Thanks for the assistance.
You can try adding an ENTER_FRAME event that constantly checks stage.mouseX and stage.mouseY. These values should report correctly while the mouse is on the Flash content, and will report the last known mouse coordinates when the mouse is no longer on the stage. However, the last known mouse coordinates may not always be the actual width or height of the stage, so you probably want to add some tolerance in there.
For instance, if your (expanded) Flash content width is 500px, in the ENTER_FRAME event you can check if stage.mouseX is less than 10px (mouse moving off to the left) or more than 490px (mouse is moving off to the right) and minimize the Flash content. Repeat for the height, and adjust tolerance values as needed.
This should give you the effect you want. The only downside that I can see is the overhead of the ENTER_FRAME event just to check whether the mouse has left the content, but I don't see any way around that.
I'm making a game with cocos2d-x HTML5.
On one layer there are two images which is almost same but have several different area and when I click one of them, if the clicked area of two images has a different pixel, I want to add a sticker to the same location to both images.
I want to ask that how can i compare the image pixel on cocos2d-x HTML5?
and how do I make the click event to place the sticker?
Probably CCImage class will help you.
What I suggest is, as you already have 2 images, and you have know the different area,
you can create a plist Dictionary recording the area position and size.
In your game scene, you can add transparent touchable Sprite created from your config list file, and set a color to it when it is touched.
I'm trying to figure out how to drag and drop an image from one canvas to another canvas. Assuming the canvases are next to each other, would it be possible to seamlessly drag something across the border? If not, is it a better idea to drag a div over the canvas, get its ID, and place it by responding to the mouseup location on the canvas?
You don't drag items on a canvas. A canvas is a non-retained mode (or immediate mode) graphics API. You issue draw commands and you get pixels. Simulating dragging is comprised of tracking the user's mouse movements and choosing to repeatedly clear and re-draw the canvas with different parameters to make some subset of the pixels appear to move as a cohesive object.
Contrast this with HTML or SVG where you actually change position/transform properties of a real DOM object and the watch as the visual representation of your document updates automatically.
If you have two canvases and want to drag something from one to the other, what I would do is:
On mouse down on the 'menu' canvas, create a new canvas programmatically just as large as the object, and (using absolute CSS positioning) place it over top of the item the user clicked on.
Draw the item onto that canvas.
Track the mousemove event on the document, and update the position of the canvas relative to the mouse.
When the user releases the mouse over the destination canvas, throw away (or hide) your tiny 'dragging' canvas, and re-draw the main canvas with the item that was dragged in the appropriate location.
Though, what I'd probably really do here is use SVG. ;)
Check this answer.
It is for multiple select drag & drop, but maybe will be useful.
Why does this need to be 2 canvases? The canvas is your drawing area, you control it. Why do you need 2?