I am trying to modify the canvas size changing
render.setsize(width,height);
but when I check canvas dimension on Chrome console it remains the same.
Did you check the JavaScript console for errors?
The method is: renderer.setSize(width, height)
Also make sure width and height is defined when the method is called.
Related
I need to place my three.js canvas in the dom with a very specific CSS, but three.js is overriding its style by setting a pixel-based width and height every time the renderer is resized.
I override it back to what I want afterwards, but it usually ends up being visibly glitchy for one frame due to that.
Is there any way to make three.js not decide the style of the dom element for me?
WebGLRenderer.setSize has an optional parameter updateStyle which expects a boolean.
When false, it prevents three.js canvas from updating DOM element style. JSFiddle
Yes. Pass "false" as the 3rd parameter to renderer.setSize().
I noticed while working with three.js that the webgl canvas element's height and width is getting set to double the css style height and width that's set in the window resize function. Wondering why this is because I'm running into some bugs while using some custom build shaders with Effects Composer.
This probably has to do with the device-pixel-ratio, which i think is 2 on retina-screens. Here is the code that sets the values for the canvas-element: https://github.com/mrdoob/three.js/blob/dev/src/renderers/WebGLRenderer.js#L353-L379
The default-value for the pixel-ratio is 1, and it should probably stay that way if you are doing pixel-shader heavy operations in full-screen. Search through your code for setPixelRatio() and remove it.
I'm looking to capture a 5000px long screenshot. But after capturing, it only captures content that is equal to the height of my desktop screen height which is 1080px and rest is blank.
casper.viewport(1024, 5000);
Make sure you set up your Casper options correctly. Look at their documentation at http://docs.casperjs.org/en/latest/modules/casper.html#index-1.
It appears there is a secion on viewport size here http://docs.casperjs.org/en/latest/modules/casper.html#viewportsize. From the docs: PhantomJS ships with a default viewport of 400x300, and CasperJS won’t override it by default.
I'm porting over a d3 application into Aurelia and need to access the width and height of the chart's SVG parent in order to fit the chart properly to the current screen dimensions.
Before porting, it looked like this, filling up the whole container properly:
This is what it looks like in Aurelia:
It sets its dimensions by calling d3.select('#timeline-svg').style('width') and d3.select('#timeline-svg').style('height'). But now, in Aurelia, whenever I call those it returns dimensions of 300 x 150, no matter what the dimensions of the SVG actually are. I tried calling the same code on the SVG's div parent (which has identical dimensions) and that didn't help either.
So then I thought to try two-way data binding and changed my SVG tag to <svg id="timeline-svg" width.two-way="width"></svg> (and declared a corresponding width variable in my view-model), but I get the error: Error: Observation of a "svg" element's "width" property is not supported.
I've even tried using aurelia-pal, injecting it as DOM and calling:
attached() {console.log(this.DOM.getElementById("timeline-svg").style.width);} but all that gives me is an empty string.
There's a gist here (minus the d3 code, but all I want to figure out is how to access the dimensions of the SVG element in app.html from within app.js). What am I doing wrong? Thanks!
I'm not sure if this is exactly what you're looking for, but you could use the ref custom attribute to get a reference the svg element itself.
<svg ref="svgElement"></svg>
Then use the getBBox() function. The result of that function will have a width property you can use.
this.svgElement.getBBox().width
Here's a simple gist example: https://gist.run/?id=0ed86f511533512a22d002675221d812
Here's a page with an SVG graphic I designed.
http://s383324595.onlinehome.us/HTML5-1
It looks and acts properly in Chrome (and Canary and Chromium), but the graphic itself is a tiny, square in Safari 5.1, and requires scrolling to see the whole image. What's wrong?
Moreover, it looks like the graphic is on the offset on the X axis in Firefox. How can I fix that?
Remove the width and height attributes on the root <svg> element, then tweak the CSS for the embed element so that it gets the width and height you want.
Safari don't understand float numbers as width and height on root SVG element. Make sure they are integers (round them up).