According to this example: https://jsfiddle.net/pdfjs/wagvs9Lf/
What would be required to add zoomIn and zoomOut buttons(+ and -), and then add scroll buttons (left, right, up, down) or scroll bar so the user can access content that goes outside the borders after zooming.
The code below works for zooming in, however, there is no way to view content outside the edges after zooming
pdfDoc.getPage(pageNum).then(function(page){
var viewport = page.getViewport({scale: 2});
canvas.width = viewport.width;
canvas.height = viewport.height;
page.render({ canvasContext:ctx,
viewport: viewport })
})
Any help is greatly appreciated.
Related
I'm developing a drawing app, and I've encountered a problem which I have been trying to solve but I haven't found a reliable solution yet:
Sketches have an original resolution of 1280 x 720, and I would like to resize the canvas when the page is opened to the maximum size possible (given the screen dimensions minus a toolbar I have put on the upper side of the page) keeping the 1280 x 720 aspect ratio.
The canvas needs to be centered in the screen and black stripes will cover the rest: when the the browser window dimensions relation is less than the sketch original w/h relation there will be horizontal black stripes (fig 1), and when it is bigger, vertical black stripes (fig 2).
I've tried using javascript applying to the canvas the offsetWidth and offsetHeight of a div containing an auxiliar invisible image which I generate programatically with the original sketch dimensions, but doesn't seem to be a robust way to do this. Most of the time the offset properties aren't ready when the page is loaded and I have to wait for them using a timer (or mutation observers).
Some images of what I'm trying to do:
I've spend much time on this little thing and is driving me crazy, because every solution I found is way too hacky or unreliable. Any help will be very appreciated.
I'm using Angular + Ionic 4.
If I'm understanding you correctly, you want to dynamically change the size of your canvas based on how big the window is. The one stipulation is that it must maintain the 1280 x 720 (1:0.5625) ratio.
I'm going to attempt to provide a solution that will also listen for resizing of the window after it's been loaded. Keep in mind that this means you'll need to redraw everything on the canvas from there.
HTML
<body>
<canvas id="canvas"></canvas>
</body>
CSS
body {
background-color: black;
}
JavaScript:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
startListening();
function startListening() {
// resize the canvas every time the window is adjusted
window.addEventListener('resize', resizeCanvas, false);
// manually call the resizeCanvas() function as the window loads with it's starting dimensions (before a resize has happened)
resizeCanvas();
}
function resizeCanvas() {
// if the canvas height isn't maxed out, match it to the width of the page at the correct aspect ration (1:0.5625)
if(canvas.height < window.innerHeight){
canvas.width = window.innerWidth;
canvas.height = canvas.width * 0.5625;
}
// if the canvas height is maxed out, stop widening the canvas and lock the canvas height at 0.5625 of that locked height
if(canvas.height >= window.innerHeight){
canvas.height = canvas.width * 0.5625;
}
// lastly, if we are shrinking the width back down, readjust both the width and height to match
if(canvas.width > window.innerWidth){
canvas.width = window.innerWidth;
canvas.height = canvas.width * 0.5625;
}
// redraw the canvas with our newly calculated dimensions
redraw();
}
function redraw() {
ctx.fillStyle = "#FF0000";
// Draw the canvas in the center of the screen at the height and width calculated above in the resizeCanvas() function
ctx.fillRect((window.innerWidth - canvas.width) / 2, (window.innerHeight - canvas.height) / 2, canvas.width, canvas.height);
}
I'm using Easel JS to develop Canvas based Solitaire game.
TODO: Set height for canvas and draw all elements inside of that.
Issue: EaselJS change the canvas height automatically.
References:
How I set the height:
var gameBoard = document.getElementById("board");
gameBoard.style.height = window.innerHeight+"px";
gameBoard.height = gameBoard.offsetHeight;
gameBoard.style.height = "auto";
Without knowing what your goals are, it's hard to tell what the problem is exactly... but setting the CSS "canvas.style.height" property to "auto" seems to be the problem. The width and height properties (not CSS) are still what you set them to originally (1300 x 501).
Remove this line and you will be left with a canvas that is the size of the window when the page is loaded.
gameBoard.style.height = "auto";
If you want your canvas to have as many pixels as there are in the window, you will need to listen for the "resize" event and apply the values back to your canvas.
window.addEventListener("resize", function(){
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
I am currently trying to work on this script, which was created by someone else. Yes, I grabbed it, yes I will give credits.
The problem I am having, is trying to center the text even if the window has been resized. When you move the cursor on the text, it explodes randomly. When I resize the window, I need that same text (and those exploded characters) to move. I can easily just put new text in using fillText(), but then I replace the exploded characters.
Obviously I have tried this in my example:
window.onresize = function(event) {
reload(canvas_id);
}
var reload = function(canvas_id) {
canvas = document.getElementById(canvas_id);
context = canvas.getContext("2d");
canvas.width = window.innerWidth;
}
This resizes the canvas perfectly, but the text won't be centered anymore. To center the text when I place it, I do this:
(window.innerWidth / 2) - (Math.round(bgContext.measureText(keyword).width/2))
bgContext being the canvas.getContext("2d"); obviously.
Here's a JSFiddle showing this issue: http://jsfiddle.net/2e8o5db8/1/
First, tell canvas to draw text aligned from a center X rather than the default left-aligned
context.textAlign = 'center';
And then set the x,y in fillText to the center of the canvas.
fillText('Hello', canvas.width/2, 50);
By using canvas.width/2 you will redraw the text at center-canvas even if the canvas is resized.
You will have to redraw the text after using canvas.width=... because the canvas contents will automatically be cleared.
I'm working on a web app and now facing a rather tricky task.
I have an image that I have to add overlay for.
Let's say I have an image of a car. I need to add values, like outside and inside temperature, on top of the car image.
It would be easy to add fixed pixel offsets for those temperature labels, but the image need to be scalable to every screen height and width-wise. I can't think of easy way to scale div into div exactly as "background-size:contain;" does for images.
Could someone point me to right tracks before I write complex javascript scaling logic?
ww = window width
wh = window height
ow = Original Width of your image
oh = Original Height of your image
nw = New Width of your image
nh = New Height of your image
mt = Margin top to adjust image to the screen vertically
ox = overlay location x coordinate according to original size of the image
oy = overlay location y coordinate according to original size of the image
nox = New ox
noy = new oy
sf = scaling factor
based on screen size you'll have a scaling factor for your image.
sf = ww / ow -> we find our scaling factor
nh = oh * sf -> then calculate our new image height
mt = (oh - nh) / 2 -> amount we need to shift image up to center screen
nox = ox * sf -> new overlay x coordinate
noy = (oy * sf) - mt -> new overlay y coordinate
edit
if image is too wide then this logic needs to be adjusted to shift image horizontally not vertically
edit 2
If you're targeting modern browsers only, then you can use CSS transform: scale(sx[, sy]); . This will re-size your DIV and all it's content proportionally Use transform: scale() with transform-origin: 0 0; to re-size from top left corner.
If you are using a SVG image this would be easy:
http://css-tricks.com/svg-text-typographic-designs/
Here is two examples with CSS:
http://codepen.io/chriscoyier/pen/zxqdev
http://maketea.co.uk/2013/12/16/smooth-text-overlays-with-css-transforms.html
I'm never tested CSS3 object-fit , but I think it's very useful for your solution:
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
https://dev.opera.com/articles/css3-object-fit-object-position/
I am making for school a star catching game.
I want the enviroment to change dynamicly so that when i resize browser windows the game will resize with it.
I got the following running code:
http://jsfiddle.net/xigolle/yA74f/
The only problem with that is that the mouse isn't center on the witch.
What is the best way for me to get the mouse on the center on every size?
The problem lays for sure in this part:
ctx.drawImage(img, this.x, this.y, canvas.width/10, canvas.height/10);
The size of the browser window i get from a event listener who activates when i resize.
And the value is put in canvas.width and canvas.height.
I hope you guys can help me :)
For any more question or unclearance please ask :)
You have two problems
The first is your use of drawImage
ctx.drawImage(img, this.x, this.y, canvas.width/10, canvas.height/10);
This is going to rescale the witch image in a way that does not keep the proportions, which is why when resizing the window the witch either squishes or expands
You should resize the image based on a ratio of the original image size and original canvas size. Then use that ratio times the new canvas size to get the right image size.
//Original canvas width/height
var initialWidth = 500, initialHeight = 500;
var initialImgWidth = 120, initialImgHeight = 65;
var wRatio = initialImgWidth/initialWidth, hRatio = initialImgHeight/initialHeight;
...
ctx.drawImage(img, this.x, this.y, canvas.width*wRatio, canvas.height*hRatio);
Now that we have the image resize resolved now we can center the image on the mouse
Now to center you have to take the mouse x/y and minus each with 1/2 of width/height of the rescaled witch respectively
Witch.x = event.pageX-((canvas.width*wRatio)/2);
Witch.y = event.pageY-((canvas.height*hRatio)/2);
JSFiddle
EDIT
My rescale calculations were wrong, for now to scale the image for now just scale it by its original dimensions
var imgWScale = initialImgWidth/2;
var imgHScale = initialImgHeight/2;
...
ctx.drawImage(img, this.x, this.y, imgWScale,imgHScale);
...
Witch.x = event.pageX-(imgWScale/2);
Witch.y = event.pageY-(imgHScale/2);
Just remember to center just get the images width/height and divide in half and then take that from the mouse coordinates.