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.
Related
Given: A local HTML page (in assets) that contains an SVG and a Rect of certain sizes in it. The page is loaded when the application starts in the WebView.
How to zoom in to this Rect dynamically while the application is running so that it occupies the entire visible area of the screen using WebView.zoomBy or JS?
P.S. I tried to calculate the ratio of zoom to the areas of rectangles, manipulations with JS and WebView, but maybe I was thinking wrong.
Thank you!
Illustration:
Illustration
Found a solution by calculating the required scale depending on the aspect ratio and display dimensions and the zoom factor for webView.zoomBy().
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
I'm drawing a chart to an in-memory canvas with strictly defined width and height, I'm then converting this canvas to base 64 using toDataUrl(). Everything was working fine until I use my code on a high density screen (Full HD notebook), where the Windows' Display, Scale and Layout > Change the size of text, apps, and other items option was at 125%, with this config, Chart.js is automatically resizing my canvas to 125% of its original size.
Is this a bug or a feature that I can disable?
Presumably the option you need is devicePixelRatio, which will:
Override the window's default devicePixelRatio.
I've not tested it, and the documentation isn't 100% clear, but I assume this goes in the root of the options object:
options: {
devicePixelRatio: 1
}
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.
I got my KineticJS game working inside CocoonJS quite nicely, except scaling the canvas. I have 1024x768 canvas, which is great for iPad 2. But for iPad 4, due to retina screen, the game takes only 1/4th of the screen.
CocoonJS says this about the scaling:
CocoonJS automatically scales your main canvas to fill the whole screen while you still
continue working on your application coordinates. There are 3 different ways to specify how
the scaling should be done:
idtkScale
'ScaleToFill' // Default
'ScaleAspectFit'
'ScaleAspectFill'
canvas.style.cssText="idtkscale:SCALE_TYPE;"; // The SCALE_TYPE can be any of
the ones listed above.
I have tried this adding this:
layer.getCanvas()._canvas.style.cssText='idtkScale:ScaleAspectFit;';
But it is not working. Any idea how to get KineticJS created Canvases to scale in CocoonJS?
When dealing with making a canvas object full screen if on mobile. In CocoonJS this feature is out of the box. So we patched the code to set
document.body.style.width
and
document.body.style.height
These are DOM related and not supported (nor needed on full screen mode). Also code related to canvas style and position was patched, since it isn’t needed.
For now on, the correct way of getting screen size is
window.innerWidth
and
window.innerHeight
To make your Canvas objects full screen, set
canvas.width= window.innerWidth; canvas.height= window.innerHeight
One thing you must know about CocoonJS is that you don’t have to change your canvas size to make it run fullscreen. CocoonJS will up/down scale your canvas and have correct touch coordinates sent. You could choose how you’d like your canvas to be scaled, either keeping aspect ratio or not, and also if you want to have no blurring filter applied to the scaling operation, which comes handy for games relying on pixel art. Refer to the official CocoonJS Wiki pages to know how to control scale operations.
REFERENCE
http://blog.ludei.com/cocoonjs-a-survival-guide/
Okay, I found an answer to this question myself and since there are so many up votes, I want to share the solution.
The solution was to comment some code within KineticJS and then add the CocoonJS scaling to the canvas creation.
Comment these lines (not all at one place):
inside _resizeDOM:
this.content.style.width = width + PX;
this.content.style.height = height + PX;
inside setWidth of Canvas:
this._canvas.style.width = width + 'px';
inside setHeight of Canvas:
this._canvas.style.height = height + 'px';
Add this inside Canvas prototype init:
this._canvas.style.idtkscale = "ScaleAspectFill";
This does the trick for me. Now what I do is I calculate the correct aspect ratio for the canvas and let CocoonJS scale it for me. Hope this is as useful for others as it has been for me!