So I have a canvas element and I want to draw a chart using Angular library. I manage to draw it but the problem is that the canvas element does not take the height of the containing div, it takes a random height. Has anybody had this problem before ? I also used the resize() method from the ChartJs library (http://www.chartjs.org/docs/) but it does not seem to work. Does anybody have an idea ?
Thanks in advance!
Try changing the default values.
// Boolean - whether or not the chart should be responsive and resize when the browser does.
responsive: true,
// Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
maintainAspectRatio: false
Read more at : http://www.chartjs.org/docs/#chart-configuration-global-configuration
Related
I have a simple bitmap image 3px wide and 150px high included as the top banner in my layout.
<s:BitmapImage id="blueBanner" source="{this.bmpimg}" width="100%"/>
The rest of the content is centered below this.
When the page opens no matter the size of the browser window, the image always fills the width available.
I have a browser window resize handler that resets my main content below the banner to the center of the new window size and this works perfectly.
But no matter how many times the browser is resized, the BitmapImage will never stretch wider than the original window width.
I have tried every property and method of BitmapImage that I think could affect this in the resize handler but nothing I can find has any effect at all.
I cannot understand how it remembers the original stage width to begin with.
Its parent containers are all set to 100% width and there are no unusual skins or any other reference to this object in the whole project except in a function where it can be included in the layout or not, but this function is never called in this case.
Can anyone offer any clue as to why it won't stretch automatically?
Doug
Simple , just set the width to screen.width and you are good to go.
<s:BitmapImage id="blueBanner" source="{this.bmpimg}" width="{screen.width}"/>
Thanks for all the responses. In fact I solved the problem by adding the BitmapImage line to the Application Skin. Once it's here as well as in the layout it works. I have no idea why it needs to be in both places, but once it's set up like this everything works correctly.
Setting ScaleMode makes no difference and setting screen.width either in the blueBanner tag or later in the resizeHandler (because not always available when the tag is run) also makes no difference in my layout.
Doug
I simply just need to find a way to determine the height of ProgressIndicator in my WP8 Silverlight solution. I know how to set the height, but I would just like to retrieve the height. This would be done in C#.
Use the ActualHeight property to retrieve the height of your control:
var height = this.ProgressIndicator.ActualHeight;
Note that the property will be filled only after the page has finished loading (more precisely, after the layout is computed)
I have found some problems in displaying images larger than 10000px width or height in spark Image component. Despite of setting maximum width/height or explicit width/height to larger sizes the image is being scaled down to 10000px.
<s:Image id="image" source="big.jpg" maxWidth="20000" maxHeight="20000" width="14400" height="10800" x="-9200" y="-8200" />
<s:Label id="debug" />
I set these coordinates to be sure I see the bottom right corner of image (it's scaled down proportionally). In debug I'm displaying the mouseX and mouseY of image.
protected function application1_mouseMoveHandler(event:MouseEvent):void
{
debug.text = image.mouseX + ", " + image.mouseY;
}
Image component uses BitmapImage internally: Image.imageDisplay.
If BitmapImage works fine, manually setting maxWidth and maxHeight of Image.imageDisplay might fix the bug.
Added:
When you manually setting the maxWidth and maxHeight of imageDisplay, I recommend using a custom Skin to set them. Or they could be set after the image is loaded and scaled already.
Additional Information:
The default value of BitmapImage.scaleMode is stretch, but the default value of Image.scaleMode is letterbox. So, if you see BitmapImage works fine but Image scales differently, check this property.
The answer is simple - check out the documentation: http://flex.apache.org/asdoc/spark/components/Image.html
Maybe I should write it here, as nobody actually reads that docs - 10k is the limit of both width and height for that component.
edit: Are you serious you need image larger than 10k?! Can you imagine how much memory this is? :)
I recently made and hosted Catifier.com.
It's working pretty good, except I have a bug with saving I have to work out, and it stretches images when you set them as the background.
Portrait images look horrible.
Would it be possible to detect the width and height of the image a user pastes in the box, then resize the canvas accordingly?
You have to load your picture in a DOM element to know its size.
So basicly when you want to do it, here are the steps :
Add your picture in an invisible DOM element.
You will be able to get picture width and heignt when onload event is lauched.
Then create your canvas depending those two variables.
All can be done in very few javascript lines.
Just gonna write up a very generic and likely not fully functional way to do this real quick just to give more of an idea.
var img = document.getElementByTagName('img');
for (var i = 0; i < img.length; i++) {
var width = img[i].width,
height = img[i].height;
// do some stuff with the img[i] width and height here if you like. for each image on the page...
}
Not how you'd end up actually doing it but it's just as simple as doing, img.width or height. If that helps more at all.
I've just started working with the html5 canvas element.
I'm using the latest firefox and chromium browsers. And so far, they're
responding alike.
What I'm trying to achieve is scaling of an image without having to
specify the canvas or image drawing sizes. I'd like the canvas to fill
the browser window, and for the image to fill the canvas without
specifying any sizes. And to readjust canvas and its image on the
fly when the user adjusts the browser's frame.
The mansion pic that I'm testing with is 4284x2844.
I've managed to achieve dynamic scaling, but there's a problem...
if I don't specify sizes the image becomes blurry.
This is my first stackoverflow question and I haven't conquered the
formatting. So, please take a look at the small amount of code over
at pastebin:
http://pastebin.com/88faqJUx
Thank you for your help.
I found the solution...
Adding two lines, with no other changes, did the trick, though at this point I'm not exactly sure
why it was originally failing, but thoroughly happy to move on...
<canvas id="taba_main_canvas">
Your browser does not support the canvas element.
</ canvas>
<script type="text/javascript">
var main_canvas=document.getElementById("taba_main_canvas");
var cxt=main_canvas.getContext("2d");
// adding these next two lines solved the blurriness issues
//Set the canvas width to the same as the browser
main_canvas.width = window.innerWidth;
main_canvas.height = window.innerHeight;
var img=new Image();
<!-- mansion pic 4284x2844 -->
img.src="images/mansion_3344.png";
img.onload = function()
{
<!-- use the graphics full size and scale the canvas in css -->
cxt.drawImage(img,0,0,main_canvas.width,main_canvas.height);
}
</script>
Just one tiny little problem, the vertical size of the image is apparently just a few lines taller
than the canvas and so I get a vertival scrollbar. Dragging the browser window taller, which normally
would eliminate the vertical scrollbar has no effect. I've tried manipulating the canvas or image height
in the code, but that didn't change anything.
Still, having the image look clean is a big win. I'm moving on for the moment and will revisit this
later.
The other way to do this is to latch on to the document onresize event and resize the canvas by using window.innerWidth and window.innerHeight or some such thing. I've used it that way myself, but that was for something which I didn't care about IE support - see W3C DOM Compatibility - CSS Object Model View at quirksmode for info about browser support. Note also that the scrollbar width is included in innerWidth and innerHeight; if your page may need scrolling, you may wish to do something like subtract 20 and pad the containing element with a suitable background colour.
I presume that you're not just trying to draw an image - if you were just doing that, <img> would be a much better match.
Edit: jQuery has $(document).width(); and $(document).height(); which seem to get the right figures. Another edit: actually they're wrong; they're the document width and height, not viewport width and height, so I think innerWidth and innerHeight may be all there is.