I have a canvas in my project where you can draw a signature and save it. I'm using React JS and https://github.com/szimek/signature_pad which is great. But the problem i have is that i need to set the default orientation to landscape on mobile (I dont want to display a message like 'please use landscape' and then show the canvas).
If i rotate the canvas with something like: div.style.webkitTransform = 'rotate(90deg)';
visually it looks good, the problem is that when I draw a line to the right it goes down, if I draw a line to the left it goes up, etc (as if the canvas is in the original 0°)
Is there a way to change the orientation of canvas in anyway?
I found some library which was able in React Native only, tried to find a workaround with css and using The Screen Orientation API but nothing seems to work
Related
I'm making a game for android, the game and all the files are on my server and I'm using a webView to display the game in the app
So after I got the app and everything created I noticed no matter what I change on the webView or on the server it always zooms in so the user has to zoom out In order to play
Does anybody know how I can make the canvas and background image scale to width and height
I tried
var c = document.getElementById ('canvas');
c.width = window.innerWidth;
This works to resize the canvas but the enemy's will still follow the path of the image
Here is a link to the game http://deathcrow.altervista.org/0android/td/index.php
If you need any of the code let me know I didn't post any cause I am on my phone
Here are links to all my coding I'm not able to put it on here due to being on my phone
http://deathcrow.altervista.org/0android/td/js/mainLoop.js
http://deathcrow.altervista.org/0android/td/js/attackerUnits.js
http://deathcrow.altervista.org/0android/td/js/towerUnits.js
http://deathcrow.altervista.org/0android/td/js/bullets.js
http://deathcrow.altervista.org/0android/td/js/mouseClick.js
You should be able to get the webview not to zoom with:
webview.getSettings().setBuiltInZoomControls(false);
webview.getSettings().setSupportZoom(false);
webview.getSettings().setLoadWithOverviewMode(true);
Have you actually moved to coding it on a canvas instead? Am I answering your question?
I am currently working on a website which uses a banner image on a profile. However if a user uploads an image the position of the banner may not be correct and they may want to change it to display the correct position of the image they want. So I have been following this guide: http://w3lessons.info/2014/08/31/facebook-style-cover-image-reposition-using-jquery-php/
I have used this guide and it works without error when I am on desktop screen sizes like 20" and above... However when ever I try to change the image position on mobile it doesn't scale correctly and the image thumb nail is not cropped correctly. But it works when the website is on a desktop because the image banner is full size... There is a demo on the website with the guide if you want to check it out and see what I am on about. I tried to see changing the crop width and height to match the mobile size but that means when it resizes back to a desktop the image is only scaled for a mobile then.
The problem is to do with:
$default_cover_width = 918;
$default_cover_height = 276;
As the screen size changes the default cover size changes as well...
I was wondering if anyone could point me in the right direction so that I could get this working on a mobile device as well.
Thanks.
I'm building a authoring tool in FabricJS which is meant to export something for android devices. It's decided that I will support only 6/9 screen ratio (other screens will get black borders).
My problem is that I open the page on my pc, add and edit some elements and export ( using the fabricjs serializer ) and then I open on a laptop (different display size), the canvas gets resized correctly (with some js magic) but the elements are still at the same location and same size as on the big display
.
The problem is that FabricJS does not create elements relative to canvas size.
I can write my own export/load functions, but it feels wrong because each element has width, height, scaleX and scaleY. Using the handles changes the scale for some reason. This leads me to think that there is something like a canvas scale, but there is not.
Am I missing something? How does one go about exporting and then opening on a different screen, but maintaining the canvas ratio and having elements relative to the canvas size.
I followed the tutorial below to create a Windows Phone 8.1 app for previewing the camera capture:
http://msdn.microsoft.com/en-us/library/windows/apps/Hh452789(v=win.10).aspx
However, there is an undesired behavior of this basic app. When the device is placed horizontally, with the top pointing to the left, the orientation of the preview is the same as the scene, which is fine. However, when the device rotates to the portrait position (top up), the preview auto rotates to a confusing orientation. Below is a picture demonstrating this behavior.
I guess what I want is the same behavior as the built-in Camera app of a Windows Phone, that the preview orientation always follows the camera (image panel) orientation. In other words, no matter how the device is rotated, the house roof tip should always point upward. Is that possible using the developer API? If so, what function or attributes should I use?
One potential solution I can think of is to disable auto rotate for the element that is used to hold the preview. However, I don't know how to do that. In addition, can one disable the auto rotate for only some elements in an app page instead of the entire page? I ask because I want to display some text over the video preview and I want the text to auto rotate for legibility.
MediaCapture _mediaCapture = new MediaCapture();
_mediaCapture.SetPreviewRotation(VideoRotation.Clockwise90Degrees);
await _mediaCapture.InitializeAsync();
await _mediaCapture.StartPreviewAsync();
Check the phone orientation on orientation changed and set the MediaCapture .SetPreviewRotation(VideoRotation.Clockwise90Degrees) as you want.
I got problem on Android Tablet (Galaxy Tab 2). When having a big image, and using paper.js to draw paths on it, everything is fine, but when I zoom the image (only if it is big enough), paper.js stops drawing paths on a certain width and height... the image on canvas is still being displayed (background-image with width and height set to 100%), but it seems that paper.js is unable to draw farther than some width and height. Any idea what is going on or how to fix it?
If something isn't well explained, please give me feedback. I really need to get it working. Today.