I want my canvas-Element to always have the same size - independent of the client's screen-resolution.
If the user zooms with the browser, the canvas-element should always have the same size.
Furthermore, the aspect-ratio should always be the same - I want a coordinate-space of 1920-1080 points. (There can be a border on the side of the canvas-element, if the browser doesn't have the same ratio).
I managed to implement this with html + css:
with = 100% of screen
max. coordinates are 1920 x 1080
But when I imlemented fabric.js, it changed the size of canvas. And I cant set it back, to have a responsive design.
How can I achive this with fabric.js?
After experimenting a bit, I finally found a solution where I only have to modify css-properties.
The answer is very simple, although it's very long.
This is my html-body:
<body onload='init()'>
<div id="canvasWrapper">
<canvas id="canvas" width="100px" height="100px"></canvas>
</div>
</body>
And this is my css:
*{
padding: 0;
margin: 0;
border: 0;
}
body{
overflow: hidden;
}
#canvasWrapper {
background-color: red;
display: inline-block;
}
The important parts are the "inline-block" of my canvas-wrapper, and the "overflow: hidden" of the body-element. It seems that there are some pixels below the canvas, which would make both scrollbars appear.
After some experimenting, I got the following js-code:
function init(){
resizeCanvas(); //resize the canvas-Element
window.onresize = function() { resizeCanvas(); }
}
Whenever the screen-size changes, my "resize"-Function will be called.
The whole trick is done in this resize-Function:
function resizeCanvas() {
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
var cv = document.getElementsByTagName("canvas")[0];
//var cc = document.getElementsByClassName("canvas-container")[0]; //In case of non-Static Canvas will be used
var cc = document.getElementById("canvasWrapper");
var cx,cy; //The size of the canvas-Element
var cleft=0; //Offset to the left border (to center the canvas-element, if there are borders on the left&right)
if(x/y > sizeX/sizeY){ //x-diff > y-diff ==> black borders left&right
cx = (y*sizeX/sizeY);
cy = y;
cleft = (x-cx)/2;
}else{ //y-diff > x-diff ==> black borders top&bottom
cx = x;
cy = (x*sizeY/sizeX);
}
cc.setAttribute("style", "width:"+x+"px;height:"+y+"px;"); //canvas-content = fullscreen
cv.setAttribute("style", "width:"+cx+"px;height:"+cy+"px;position: relative; left:"+cleft+"px"); //canvas: 16:9, as big as possible, horizintally centered
}
This function calculates the window-width, and the biggest canvas-size that is possible without changing the ratio.
After that, I set the wrapper-div to fullscreen-size, and the size of the canvas-Element to the previously calculated size.
Everything works without the need of changing the content of the canvas element and without redrawing anything.
It's cross-browser compatible (tested on Firefox 25, Chrome 31 and Internet Explorer 11)
a solution in version 2.4.2-b， It's official Api method:http://fabricjs.com/docs/fabric.js.html#line7130
it works in my code, set width and height 100% :
fabricCanvas.setDimensions({
width: '100%',
height: '100%'
},{
cssOnly: true
});
Related
I'm being ambitious and attempting to show a React Three Fibre Canvas inside of a React Flow node.
This works, however when the view zooms, the canvas resizes inside the node
Zoomed out
Zoomed in
I'm trying to figure out who to affect the size of the canvas so the image stays the same size (and the other things that will be appearing above it)
The canvas wrapper is
const Wrapper = styled.div`
width: 100%;
height: 100%;
margin: 0 0;
padding: 0 0;
`;
And the image is scaled to fit to screen
const scale = useAspect(
1024, // Pixel-width
512, // Pixel-height
1, // Optional scaling factor
);
The node container is fixed
style={{ width: '200px', height: '200px' }
I suppose I need to work out what is changing when you zoom on the ReactFlow diagram, and how I can adjust the size of the container or Three viewport to respect this zoom level?
I am using react and three.js to display some 3D models in the browser. Everything works fine as long as the three.js component is the only element with visible content on the page. The three.js canvas will resize bigger and smaller just fine. You can wrap it in other containers and it still works fine. The issue starts when another element or component is added as a sibling.
I want to have a viewport with a fixed width sidebar. I'm doing this with a flexbox row container, wrapped around a sidebar component (a simple div with min-width set), and the responsive three.js component.
Resizing the window bigger works fine, the canvas fills the browser window appropriately. However, when resizing the window smaller, the canvas does not properly re-calculate it's size in relation to the available space left over by the static width sidebar, resulting in a canvas that does not fully fit in the browser and introducing scrollbars.
The canvas does shrink some, but not enough to keep it fully in the browser window. The same issue occurs vertically if a component sits above or below the three.js component. If you recompile the app while the browser window is smaller, the refreshed view will have the canvas properly resized.
Following the advice of many of the answers here on StackOverflow, the three.js react code looks something like this:
export class Viewport extends React.Component {
componentDidMount() {
const width = this.mount.clientWidth;
const height = this.mount.clientHeight;
window.addEventListener("resize", this.handleWindowResize);
// setup scene
this.scene = new THREE.Scene();
//setup camera
this.camera = new THREE.PerspectiveCamera( 75, width / height, 0.1, 1000 );
this.camera.position.set( 0, 5, 10 );
// setup rendering
this.renderer = new THREE.WebGLRenderer({ antialias: true });
this.renderer.setClearColor('#666666');
this.renderer.setSize(width, height, false);
this.mount.appendChild(this.renderer.domElement);
// setup geo
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: '#433F81' });
this.cube = new THREE.Mesh(geometry, material);
this.scene.add(this.cube);
...
}
componentWillUnmount() {
window.removeEventListener("resize", this.handleWindowResize);
this.mount.removeChild(this.renderer.domElement);
}
handleWindowResize = () => {
const width = this.mount.clientWidth;
const height = this.mount.clientHeight;
this.camera.aspect = width / height;
this.camera.updateProjectionMatrix();
this.renderer.setSize(width, height, false);
};
render() {
return (
<div className="viewport" style={{display: 'flex', width: "100%", height: "100%"}} ref={(mount) => { this.mount = mount }} />
);
}
}
The styling is simple css flexbox, with the elements set to full width and height (100%), with the sidebar having a set min-width.
.flex-row-container {
display: flex;
flex-flow: row;
height: 100%;
width: 100%;
}
.sidebar {
display: block;
min-width: 250px;
background-color: var(--color-mid-gray);
margin: 3px 4px 3px 4px;
box-sizing: border-box;
border: 1px solid var(--color-mid-gray);
outline: 3px solid var(--color-mid-gray);
}
What am I missing?
So after commenting, I think I got it working how you want.
Basically,
I removed setting display:flex on the viewport, as this is a child of an element (the flex-row-container div) with display:flex, it does not need it, but does need flex:1 1 auto to set how it will display within the flexbox (which I did in the css rather than the JSX).
The problem then became that the viewport div would expand, but not contract (because it contains the canvas), so adding overflow:hidden fixed that.
After making those changes, this.mount.clientWidth would get the desired result that could then be used to set the three canvas size.
See This Fiddle.
I added rendering and animation to the example so the result could be easily seen.
Hope this helps.
You might be getting incorrect values by using element.clientWidth. Have you tried using element.getBoundingClientRect() instead?
const rect = this.mount.getBoundingClientRect();
const width = rect.width;
const height = rect.height;
I am facing problem with c3 charts sizing issue with in gridster. Can any one help me how can I make there charts to be properly auto resized according to the gridster box they are in? Please find the Plunker
I have given size in options :
size: {
height: 100,
width: 100
}
If I remove this size property the charts are going out of box. But they are too small in gridster boxes. How can I make these chart to automatically occupy the full height and width of the gridster boxes that they are in?
The options you are using:
size: {
height: 100,
width: 100
}
are setting the height and width of the svg element to 100px instead of 100%
I tried
size: {
height: '100%',
width: '100%'
}
Which will successfully set the width to 100% but somehow the height will be set to 320px
So if you add this to your css:
.c3 svg {
width: 100%;
height: 100%;
}
That will solve your sizing issue.
EDIT
Just a small change to set up an initial size and some comments added to your controller on the resize - stop event handler, where you will need to add some resizing of your charts based on the new sizes. See it here
resizable: {
enabled: true,
handles: ['n', 'e', 's', 'w', 'ne', 'se', 'sw', 'nw'],
// optional callback fired when resize is started
start: function(event, $element, widget) {},
// optional callback fired when item is resized,
resize: function(event, $element, widget) {},
// optional callback fired when item is finished resizing
stop: function(event, $element, widget) {
// here should update the size according to the widget size
// widget.sizeX (* 160px) and widget.sizeY (* 160px)
// and further adjustments
}
},
I had a similar problem not long ago. What I did is use scale(), but it doesn't work on firefox.
Basically find the width when loading, and make a new scale when the user changes the screen size (or any other event like resizing your containers).
add this at the bottom of your plunker :
<script>
let width = window.innerWidth;
window.addEventListener('resize', (event) => {
let newWidth = window.innerWidth;
let ratio = newWidth / width;
let ctnr = document.getElementById('widget1');
ctnr.style.transform = "scale(" + ratio + ")";
});
</script>
That will scale widget 1. Of course you might have to play with the numbers a bit to find what works for you.
The widget will stay in place however; thus if you want it to be aligned on the left you can use in your css :
transform-origin: 0;
I hope this helps.
Use nvd3 plugin this is same as c3 plugin also this smoothly works with gridster, Please find the below link
https://krispo.github.io/angular-nvd3/#/dashboard
Using ExtJS 4, I have the following window:
var mainWin = Ext.create('Ext.Window',{
title: 'IE Screwup Illustration',
id: 'MAINWIN',
constrain: true,
constrainTo: 'appdiv',
x: 0,
y: 0,
width: '100%',
height: 518,
moveable: false,
closable: false,
layout: {
type: 'border',
padding: 3
},
renderTo: Ext.Element.get('appdiv'),
}).show();
Note the rendering to an element called "appdiv", which is a element whose style is shown below:
#appdiv {
position: absolute;
left: 10px;
width: 90%;
height: 520px;
border: 1px solid;
overflow: hidden;
border-color: #000000;
}
There is no problem rendering the window. It appears within the appdiv without problems with a nice border around it.
The problem begins when I resize the browser. It appears that the window attempts to center itself on the screen instead of within the appdiv DIV. This causes it to be displaced within the DIV so that it renders below and to the right of the left corner.
I have tried various tricks, including an attempt to reposition the window when it resizes. Nothing seems to work and I cannot think of anything else.
Could someone please give some idea how to keep this window within its DIV when a browser is resized? Thanks...
I have created a JS Fiddle to illustrate how I usually solved the problem in my projects.
The solution is to listen to the resize event of the Component over which you would like to center your window, and then calculate your window's new position. In my example this component was the viewport.
Here is the listener, that gets the job done:
viewPort.on('resize', function(vp, width, height) {
var me = this,
winWidth = me.getWidth(),
winHeight = me.getHeight(),
left = (width -winWidth) / 2,
top = (height -winHeight) / 2;
me.setPosition(left, top);
}, mainWin);
I found the answer to the problem. It turns out to be a question of timing.
It didn't make sense that the setPosition() method suggested by Matyas seemed to be ignored, so I checked the "move" event. Apparently, when an Ext window is rendered to a <div>, it receives move events after resize events. I do not know why (perhaps experts in ExtJS internals can help here?).
So instead of doing the calculations shown in Matyas' resize listener, I created a move listener in mainWin. Mine was somewhat simpler, since I wanted the window to stay put at the <div>'s upper left corner:
listeners: {
move: function(theWin,xP,yP,theOp) {
if((xP != 0) || (yP != 0)) {
theWin.setPosition(0,0);
}
}
This way, any time the browser moved the window to a position other than where I wanted it, I would set it back. This solved the problem.
Thanks for all who responded to this question (including the comments). Without those responses, I would not have had the clues I needed to solve this problem.
Try this:
Ext.EventManager.onWindowResize(function()
{
mainWin.doComponentLayout();
}, this, {buffer: 1});
Ext.EventManager.onWindowResize(function() {
if(mainWin.isVisible()) {
mainWin.center();
}
}, this, {buffer: 1});
I am asking a question about Isotope
It is a great plugin for jQuery.
I have been playing with it for a while now, but I don't know enough about javascript to combine two of the Isotope techniques, responsive Isotope and centered Isotope.
I have sucessfully used the responsive mod and it worked pretty well, except now I need to center the whole thing within a div. The centered layout mode isn't documented as well as the responsive mode, so I am having some trouble getting it to work. Basically the inscructions for the centered layout mode are :
To use this mod, copy the revised methods found in the demos’ page source.
Unfortunately, there are all sorts of javascript things going on in the view source and I don't have enough experience with javascript to pick it out and also combine it with the responsive script I already have working.
Any help would be greatly appreciated.
A site with a working example of what I need.
My site that I am experimenting with.
Works better in Firefox I think.
Here is an example provided by David DeSandro himself:
http://jsfiddle.net/desandro/P6JGY/6/
This jsfiddle will probably solve your problem: http://jsfiddle.net/schmidjon/6Z3sn/.
It's a simple extension to Isotope with breakpoints:
(function ($) {
var $container = $('.example'),
colWidth = function () {
var w = $container.width(),
columnNum = 1,
columnWidth = 0;
if (w > 1200) {
columnNum = 5;
} else if (w > 900) {
columnNum = 4;
} else if (w > 600) {
columnNum = 3;
} else if (w > 300) {
columnNum = 2;
}
columnWidth = Math.floor(w/columnNum);
$container.find('.item').each(function() {
var $item = $(this),
multiplier_w = $item.attr('class').match(/item-w(\d)/),
multiplier_h = $item.attr('class').match(/item-h(\d)/),
width = multiplier_w ? columnWidth*multiplier_w[1]-4 : columnWidth-4,
height = multiplier_h ? columnWidth*multiplier_h[1]*0.5-4 : columnWidth*0.5-4;
$item.css({
width: width,
height: height
});
});
return columnWidth;
},
isotope = function () {
$container.isotope({
resizable: false,
itemSelector: '.item',
masonry: {
columnWidth: colWidth(),
gutterWidth: 4
}
});
};
isotope();
$(window).smartresize(isotope);
}(jQuery));
Source: Using jQuery Isotope for masonry in fluid layouts
try using the transition on your css file for each of your classes on child content. it should be helpful and it can be more slowmo
.css
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
hope this working