I have my my FabricJS canvas inside a container with a fixed height/width in pixels. On the side I have a dropdown to change the canvas size to various presets. What I would like to do is automatically zoom out whenever I select a size that is either taller and/or wider than the container. So for example, if my container div is 800x600 and I select a canvas size of 1024x768, I want to zoom out so that the entire canvas is still visible. Conversely, I'd like to zoom in up to 100% if I select a smaller size (e.g. 200x200).
I found this example of zooming, but no matter how much you zoom out, the canvas size appears to stay the same. See screenshot:
How can I accomplish this?
As you can see here, the area with the thin red border is the canvas container. The white box is the canvas.
You can use the canvas.setDimensions function to accomplish this. You pass two arguments to it; the first is an object specifying the height and width to change the canvas to and the second indicates whether to change the css, the actual size of the canvas, or both.
For example,canvas.setDimensions({width: 750, height: 750}, {backstoreOnly: true} will set the actual size of the canvas to be 750x750, regardless of the display.
canvas.setDimensions({width: '750px', height: '750px'}, {cssOnly: true}) will set the display size of the canvas to be 750x750, regardless of the actual size.
I'm not 100% sure whether the width or height require a px after it for css or for backstore, but that's a pretty simple thing to check. Also, if no argument is passed for the second parameter, it will change both.
Related
I Have a viewport and a scaled image inside like this:
both the images are scaled to 0.1 but the one inside the viewport is of less resolution
Is there anyway to fix this?
The Viewport has a size, that size sets the resolution at which the contents of the Viewport will be rendered. And it does not have to match the size at which it is displayed (it could be stretched/scaled).
With the ViewportContainer you can decide if it will automatically set the size of the Viewport or if it will stretch it (scaling the ViewportContainer will also result in stretchering). If you prefer to not use the ViewportContainer※, set the size of the Viewport in the Inspector or form code.
※: For example, you can display a ViewportTexture with a TextureRect, which will give you more control on how it is displayed. But it is less convinnient to setup.
Say I have a row of 3 icons, each 20px x 20px, then some links (however wide the link text is) then another couple of links. I'm using flexbox to space the elements and what I would like to happen is that the space between is evenly distributed between the elements. What actually happens is that the svg will increase its size to take up the entirity of the free space.
I have tried taking out the height and width attributes from the svg but the image disappears altogether. I haver also tried a wrapper div but the svg forces it to take up the remainder of the space.
In case anyone finds this post, svg does not have any intrinsic width or height so by removing the width and height attribute from the svg something higher up in the chain needs to have an explicit width or height, then the svg will fill that space.
I need to make an SVG that is to be used as a background-image with "cover", so the tile in the mosaic could be rescaled.
I'd like to have the icon at a fixed size and the posibility to always fill with a background color, because, to make matters more complicated, my image is going to be inside a container that is inside the tile
this is my example
my icon should go inside that red outlined box, fixed size and the background in gray
could i get that done?
I'm using several libraries to generate SVG images in-browser, which can be bounced off the server through svgexport to generate PNGs or JPEGs at user-specified resolutions. (This works as expected.)
I'd like to offer the user the option of downloading the SVG that gets fed into the conversion, with the resolution used to set the width and height attributes. When I do that, the viewbox is not scaled to the specified width and height, but is padded so that the image occupies the original size area in the upper left.
While looking for solutions, I found images in the W3C documentation that illustrate the problem. If you open these images in Chrome and use the inspector to change the width and height properties,
ViewBox.svg will expand to fill the width and height (linked from here)
PreserveAspectRatio.svg will be padded to stay in the upper left (linked from here)
This does not appear related the presence or value of thepreserveAspectRatio property, or the nesting of svg tags. My files are rendered as padded rather than scaled in Chrome/Chromium, Firefox, Safari/WebKit, Opera, Inkscape, and Gapplin.
How do I ensure that my SVG is scaled rather than padded to fill the width and height?
The viewbox is not scaled when it's entered as viewbox rather than viewBox; svg attribute names are case sensitive.
The second link does not have a viewBox attribute, and adding a viewbox (lowercase) attribute has no effect.
tl;dr: When an image takes up 100% width and height and the user resizes their browser down, the width and the height of the document don't change because the image keeps it from shrinking.
I have a dynamically drawn SVG image (created by RaphaelJS) that takes up 100% of the screen width and height. The space it takes up includes space that is not visible but can be seen by scrolling (so it's not just viewport width and height, it is possible for it to go beyond that). I need to resize the SVG canvas to the size of the document so that scrollbars won't appear just for the image when the user resizes his browser smaller and so that the image won't appear to be cut-off when the user resizes the browser to be bigger.
The resizing up works fine, but there is a glitch in resizing down. When the user resizes from small to big, this works fine and the SVG expands to fit the window, but when the user resizes from big to small, the actual image keeps the document from becoming smaller because it is part of the document. The effect is that the image will grow but never shrink, causing scrollbars just for the image, even though the actual content all fits inside the screen.
Here is how I currently calculate the size of the SVG canvas:
function getDocHeight() {
var D = document;
return Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight)
);
}
function getDocWidth() {
var D = document;
return Math.max(
Math.max(D.body.scrollWidth, D.documentElement.scrollWidth),
Math.max(D.body.offsetWidth, D.documentElement.offsetWidth),
Math.max(D.body.clientWidth, D.documentElement.clientWidth)
);
}
So how can I get the image not to keep the document from getting smaller? Basically the getDocWidth and -Height needs to ignore the dimensions of the image when it calculates the width and height of the document.
If it's the window you want the width of rather than the current width of the document (with your image in it, making it wider), why not just use that?