In Poppler, PDF files are rendered as images,
I'm trying to determine the suitable zoom ratio to be able to render an image that can fit the full screen.
I have all parameter but I don't know why the result is always wrong.
myDPIx = 96
screenX = 1366px
screenY = 768px
imageX = 720px
imageY = 720px
zoomX = screenX/imageX
zoomY = screenY/imageY
newDPIx = myDPIx * zoomX
newDPIy = myDPIy * zoomY
let's assume that we have a render() function, it will be called as follow :
new_image = render(image, newDPIx, newDPIy)
Unfourtunately, the rendered image is too big, which means that my calculations are wrong ?
newImageX = 1840
newImageY = 1045
which is about 2.5 times bigger !
PS: if I set a zoom as 1.4 I get a suitable zoom, but I try to make this generic for all screen resolutions.
Am I missing something ?
Related
Every value I set for .scale() lower than 0.01 will be handled as I set 0.01, rendering a text that is not lower than when I set it to 0.01.
FreetypeFontLoader.FreeTypeFontLoaderParameter sizeParams = new FreetypeFontLoader.FreeTypeFontLoaderParameter();
sizeParams.fontFileName = "MyFont.ttf";
sizeParams.fontParameters.size = (int)Math.ceil(2*MINIMUM_VIEWPORT_SIZE_PIXEL/9f/2f/2f);
sizeParams.fontParameters.color = new Color(Color.Red);
sizeParams.fontParameters.borderColor = new Color(Color.Green);
sizeParams.fontParameters.borderWidth = 2;
sizeParams.fontParameters.minFilter = Texture.TextureFilter.Linear;
sizeParams.fontParameters.magFilter = Texture.TextureFilter.Linear;
assetManager.load("MyFont.ttf", BitmapFont.class, sizeParams);
assetManager.finishLoading();
BitmapFont fontFreeType = assetManager.get("myFont.ttf", BitmapFont.class);
Label.LabelStyle miniLabelStyle = new Label.LabelStyle();
miniLabelStyle.font = fontFreeType;
miniLabelStyle.font.getData().scale(0.005f);
Label labelDebug = new Label("my sample text", game.miniLabelStyle);
I tried this, without any change (either setting true or false):
miniLabelStyle.font.setUseIntegerPositions(false);
I tried this, but the text results so grainy:
labelDebug.setFontScale(0.5f);
How to get a lower scale than 0.01?
This is just a guess, since I don't use FreetypeFontGenerator, but maybe what you're missing is mip mapping, which is necessary for drawing images smaller than their original size without them getting blurry and chunky.
You'll want to make these two settings to enable it, I think:
sizeParams.fontParameters.minFilter = Texture.TextureFilter.MipMapLinearLinear;
sizeParams.fontParameters.genMipMaps = true;
You might also need to add padding around the glyphs so characters don't absorb some of their neighbors when shrunk down. (Settings padTop, padLeft, padBottom, padRight.)
However, there's a reason mip mapping defaults to being disabled. Text looks clearest if it's generated at exactly the size it will be on screen and is rendered with nearest filtering. This isn't universally true, since you might be projecting your text in 3D space or scaling it up and down in real-time. But if it's static text for a GUI, it's probably best to calculate exactly what size it would need to be for it to be one-texture-pixel to one-screen-pixel.
Ultimately I want to have a canvas that fills the entire viewport width of the browser and have an image on the canvas fill the entire width of that canvas. I'm taking advantage of pixi.js's displacement filter so that I can create a pseudo 3d effect using a depth map underneath it. The code I'm currently using is
let app = new PIXI.Application();
var w = window.innerWidth;
var h = w / ratio;
app.view.style.width = w + 'px';
app.view.style.height = h + 'px';
document.body.appendChild(app.view);
let img = new PIXI.Sprite.from("images/horses.png");
img.width = w;
img.height = h;
app.stage.addChild(img);
depthMap = new PIXI.Sprite.from("images/horses-depth.png");
depthMap.renderable = false;
depthMap.width = img.width;
depthMap.height = img.height;
img.addChild(depthMap);
app.stage.addChild(depthMap);
displacementFilter = new PIXI.filters.DisplacementFilter(depthMap, 0);
app.stage.filters = [displacementFilter];
Here's a screenshot of it in action.
I even tried manually setting the width to the viewport pixel width on the canvas and the sprite to the actual pixel width of the viewport width and it still wasn't the right size. Manually setting the width for the viewport and sprite to the exact same number also doesn't work; the sprite is inexplicably smaller than the canvas.
I tried to look at the documentation of the sprite class and see if there is something unusual about how sprites handle widths but I couldn't find anything https://pixijs.download/dev/docs/PIXI.Sprite.html
How can I create a pixi.js sprite that fills the entire width of the canvas in order to make both the canvas and the sprite fill the entire viewport width?
pixijs.download
PixiJS API Documentation
Documentation for PixiJS library
i wanted to develop a game which can support all types of display sizes,
so i am using following code to multiscale.
graphics.PreferredBackBufferHeight = 768;
graphics.PreferredBackBufferWidth = 1024;
shootrect = new Rectangle( 900,650 , 100, 100);
touchrect = new Rectangle(mouse.X, mouse.Y, 0, 0);
if (mouse.LeftButton == ButtonState.Pressed && !jump && shootrect.Intersects(touchrect))
{
jump = true;
}
using this code i am trying to intersect the mouse coordinates with shootrect (which is shoot button for make player to jump) if i touch in that rect intersection is working but somewhere else in the same width and height touch is working
when i remove graphics.PreferredBackBufferHeight = 768;
graphics.PreferredBackBufferWidth = 1024; those lines from code intersection is working fine but my scaling is not proper for other size of screens
You need to scale your logic by hand (rectangles for instance) if you use those magic numbers creating them. I suggest create those relative to the screen width and height.
actually graphics.PreferredBackBufferHeight = 768;
graphics.PreferredBackBufferWidth = 1024; because of this rectangle intersection is working properly if set my screens resolution to 1024 x768 then it works well but my resoolution is 1980x1020 so its not working
I want to run a two screen application with AIR on my Macbook Pro with Retina display.
On my left screen (the retina) there is kind of a console, with which you select a movie, on the right screen, there is the selected movie playing.
As usually, I use the StageScaleMode.SHOW_ALL to bring it nicely to fullscreen. But this time, it gets scaled way too big. Maybe 100 times too big. I see only a small top left corner of the movie. It only shows the correct size if I choose StageScaleMode.NO_SCALE;
Has anyone a guess why its like this?
here is the portion of the code, where I bring up the two windows and try to show it fullscreen.
public function setToFullscreen(e:Event):void {
startTimer.stop();
startTimer.removeEventListener("timer", setToFullscreen);
windowBig = new NativeWindow(new NativeWindowInitOptions());
windowBig.width = 1870;
windowBig.height = 468;
windowBig.stage.displayState = StageDisplayState.FULL_SCREEN;
windowBig.stage.scaleMode = StageScaleMode.SHOW_ALL;
windowBig.stage.align = StageAlign.TOP_LEFT;
windowBig.title = "Second Screen Window";
windowSmall = stage.nativeWindow;
windowSmall.width = 1280;
windowSmall.height = 1024;
windowSmall.stage.scaleMode = StageScaleMode.NO_SCALE;
windowSmall.stage.align = StageAlign.TOP_LEFT;
windowSmall.title = "First Screen Window";
ScreenManager.openWindowFullScreenOn(windowBig,2);
loader.load();
}
Thank you for your help!
Like OP said it is not possible automatically with SHOW_ALL, but you can do it manually (here it's not exactly as SHOW_ALL: I'm only fitting content to window height, so it works for a window aspect ratio equal or wider than the content ratio, else content will be cropped):
newWindow.addEventListener(Event.RESIZE, onResize);
function onResize(e:Event):void
{
content.height = newWindow.stage.stageHeight; // fit to height
content.scaleX = content.scaleY; // keep width ratio
// Extra: equivalent of StageAlign.TOP => centers horizontally
// (assuming a content registration point at top-left)
var contentRatio = 4/3; // in case content is wider than necessary, e.g. wide background
content.x = newWindow.stage.stageWidth/2 - (content.height * contentRatio )/2;
}
How do you find out the size of the system chrome so that I can specify the window size to achieve the stage size I want?
If my main window is set at 800 x 600 (stage), and I create a second window as below, it will be smaller.
public function Main():void
{
var windowOptions:NativeWindowInitOptions = new NativeWindowInitOptions();
windowOptions.systemChrome = NativeWindowSystemChrome.STANDARD;
windowOptions.type = NativeWindowType.NORMAL;
var newWindow:NativeWindow = new NativeWindow( windowOptions );
newWindow.width = 800;
newWindow.height = 600;
newWindow.stage.scaleMode = StageScaleMode.NO_SCALE;
newWindow.stage.align = StageAlign.TOP_LEFT;
newWindow.activate();
}
I assume you increase both newWindow.width = 800; and newWindow.height = 600;to account for the chrome, but how do you find this value?
you can calculate the size of the chrome by substracting the windows size (that include the chrome) with the inner size (that exclude the chrome).
From the width help of NativeWindows :
The dimensions reported for a native window include any system window
chrome that is displayed. The width of the usable display area inside
a window is available from the Stage.stageWidth property.
So the inner size can be obtained with stage object ( stage.stageWidth and stage.stageHeight: )
hence :
var chromeWidth=newWindow.width-newWindow.stage.stageWidth;
var chromeHeight=newWindow.height-newWindow.stage.stageHeight;
When creating ActionScript projects with NO_SCALE the stage.stageHeight and stage.stageWidth cannot be used to calculate chrome in the main application window as they do not resize to conform to the inner width. You must reference the main window stage.
To find the main windows inner stage height and width you can use the stage.nativeWindow.stage references stageHeight and stageWidth properties which gives inner width.
e.g. for a 1280x720 desired inner size:
// width stage.nativeWindow.width = 1280 + (stage.nativeWindow.width -
stage.nativeWindow.stage.stageWidth);
// height stage.nativeWindow.height = 720 + (stage.nativeWindow.height
- stage.nativeWindow.stage.stageHeight);
For reference, as I feel the other answers aren't clear enough. To set a new window to the desired dimensions:
// first set the desired window dimensions to set the (smaller) stage dimensions:
newWindow.width = 1024;
newWindow.height = 768;
// then reset the window dimensions and add chrome dimensions:
newWindow.width = 1024 + (1024 - newWindow.stage.stageWidth);
newWindow.height = 768 + (768 - newWindow.stage.stageHeight);