I'm making an angular js application and I'm using the icons found https://materialdesignicons.com/
I'm having trouble creating large icons in my project. I'm currently assigning the icons like so.
app.config(function($mdIconProvider) {
$mdIconProvider
.defaultIconSet('assets/icon/materialdesignicons.svg')
.iconSet(['large'], 'assets/icon/materialdesignicons.svg');
});
I know the default size is 24px, but if I put in a number like 48, the image shrinks instead of gets larger.
What should I put in instead of large?
If your icon svg element has a viewBox attribute, it won't be overwritten by the $mdIconProvider size attribute.
The size parameter defines the viewBox height and width. viewBox only affects the coordinate system of an SVG element. It should match the dimension of your icon; if they don't match, md-icon might show a zoomed in/out view of the icon.
However, the actual size of a md-icon element will be defined by its height and width (defined with css); the SVG element will scale up and down inside the md-icon.
viewBox is a requirement for a svg element to scale. It sets which portion of its grid to show and how the element in the svg element should scale with it. it just doesn't decide the actual size of the icon which grow with md-iconelement size.
If viewBox is not set, the svg elements will not scale (that's the
jQuery bug); one unite will be 1px regardless of the svg element
size.
If you set the size to something smaller than the svg grid (e.g. "0 0
12 12" for a 24x24 grid), you will zoom onto the top left corner of
the icon.
If you set the size to something bigger than the grid (e.g. "0 0 48
48" for a 24 x 24 grid), you will zoom out with the the icon placed
in the top left corner of the svg element.
You can find lot more details here.
I managed to figure out the problem. The icon was being used as a button, but I had the class md-icon-button for the button in addition to the icon. Removing the class from the button fixed the issue.
Related
I'm new on Windows development and more in Windows Phone Development.
I'm trying to create a grid view composed of three cell.
Each grid view are composed of one image (for the background) and a textblock.
My background image is a cloud image and I want the first image partialy hidden by the second one and the second one partially hidden by the third one.
I tried to play with the margin of the cell for the y part, that's works but my cloud image doesn't make the entire width of my cell. So I tried the "UnifirmToFill" option but my images are cropped...
On iOS development in this case we can use the magic property "ClipToBounds", everywhere I saw the answer "use the clip to bounds property" but apparently this property is a legend or Visual Studio lie me...
Do you have an idea to resolve my problem ?
Thank you in advance!
To resume:
If I use the "uniformToFill" stretch option, my image is zoomed. It is ok for me.
But there is a way to display the cropped part? I want my image zoomed and displayed out the cell view.
In XAML there are four possible Stretch options:
None
The image is shown in it's original size. If its larger than the parent element, it'll only show the top left portion of the image that fits inside. If the image is smaller than the parent element, then it's shown in it's entirety.
Fill
The image is resized to fill the parent element. If the aspect ratios are different, then the image will be stretched to fit the parent. This will distort the image.
Uniform
The image will be scaled up as large as it can be, while still being completely inside of the parent. Unlike Fill which will stretch the image to make it fit perfectly, Uniform will keep the aspect ratio of the image and stop scaling when it reaches the bounds of the parent.
UniformToFill
This is the bastard child of the previous two. It will scale the image, while keeping the aspect ratio, until it fills the parent element. This means that some parts of the image will be clipped if the aspect ratios are different.
For more information on the Stretch enumeration, hit it up on MSDN
UPDATE
If you want to show the image outside of the bounds of the parent you could do something like this:
<Grid Width="100" Height="50">
<Grid.Clip>
<RectangleGeometry Rect="0 0 100 50"/>
</Grid.Clip>
</Grid>
This was suggested here on SO
I have a fixed container of 100vh x 100vw that contains 6 absolutely positioned divs that are 100vh x 100vw.
I use a dummy element that is positioned relative w/ 6 divs that are 100vh to trigger each scene.
When I resize the window, the scene's animation moves forward and backward in time. Is there a way to prevent that from happening?
The issue is that when you resize the window, the position of the scroll bar remains fixed at an absolute number of pixels. However, because your content is based on view height, the height of the document changes dynamically as you resize the window. Thus, the window scroll position as a percentage of the document body height is also changing, and this is what ScrollMagic bases progress on.
To illustrate with simplified math:
A) Given a window height of 1000px, your document height will be 6vh * 1000px = 6000px tall. If your window scroll position is 1200px, you'll be 20% of the way through the overall ScrollMagic timeline.
B) If you resize the browser to 800px tall, that changes the document height to 6hv * 800px = 4800px tall. However the window scroll position will remain at 1200px, which is now 25% of the way through the ScrollMagic timeline.
The simplest solution is probably to keep your document a fixed height.
The overall goal is to have a pic which resizes to fit a portion of the screen, working all from the designer (no code).
I set an image as a a background for a container. Should work except that as long as I don't add a component in the container, the container remains of size 0, so the pic is not showing.
How do I add a pic to the background of a container and set a size for the container?
The background image is a styling element and isn't defined as content. Hence, it has no effect on the preferred size of the container which remains 0 thus the container has no size.
You can place the container in the center of a border layout. Border layout's center constraint is a special case (unless absolute center is used) where the component is given available space regardless of its preferred size.
ImageViewer should have the image fit the space it occupies, that is its default behavior. Make sure its sized correctly with the layout manager.
I have an image in WPF which I would like to enlarge to a fixed width (say 800px).
The image should stretch to this width using the original aspect ratio (so not as to distort) and the height should be scaled as necessary.
If the height is not too large for the container the top of the image should show at the top of the container. The image should then slide upwards until the bottom of the image reaches the bottom of the container via an animation (so at some point the whole image has been displayed).
Links or suggestions highly appreciated
I have an Image control with Stretch==Uniform which means larger images will be scaled down. In my case the Image control fills the whole client space, the scaled down image is being displayed centered inside the control. What now will happen: the size of the rendered image and the Image control do not have the same size - the Image control is usually larger than its content (since I use uniform stretching).
I now need to know the position of the actual image inside the Image control. Some background: the user can place a rectangle on the image to crop it. To match the rectangle with the image coordinates I need to know exactly where the image is.
Is there a way to determine the position of the rendered image inside the Image control? Or is the only solution to make the control the same size as the image content?
To get more control, you might want to put the image on a canvas inside a viewbox.
That way you get pixel control via the canvas, but a scaled view via the outer viewbox. Set the canvas dimensions to match the image and add any decorations to the canvas.
You may need to inverse-scale the rectangle stroke width so that it is visible when the canvas is small.