I made a 24×24px square in Inkscape. I don’t understand why does the 24×24 icon view shows me a square with a gray pixel at its bottom? Any idea?
I found the solution: My page’s size was the default A4 and was in millimetres. It should be set in pixels!
Related
"A stackblitz is worth a thousand words": https://stackblitz.com/edit/angular-zoom-crop-marker
Basically what I'm trying to do is to have a square drawn above a certain position in an image (<img>), and have that dynamically adjust to the image while being zoomed in / out and cropped. The stackblitz link has 3 views, the basic view which is a plain image, a zoomable view (which I got working as well) and a view where the imaged is "zoomed in and cropped" while being zoomable - This is where I need your help.
Should I crop using object-fit in some way? Is it better if I use a canvas to handle this? I've been at this for a whole day I and I feel my css knowledge is too limited to pull this of.
Bonus question: How would I go about to have the zoom-in zoom-out buttons add/remove one image per row using only css flex-box? (ie: not statically adding x pixles in height and width, but rather increase or decrease the size of each image so that another image is removed or added (per row) while always filling up all the available space)
Thank you in advance!
Managed to solve it myself. stackblitz updated with a working solution.
I am applying a canvas as a texture to a plane. And it looks fine (The background is white by default) if I am displaying it within a browser itself.
But as I change to Virtual Reality Mode the background of the canvas is changing to black.
I know that i can place a white rect to have a white background, but this is not feasible due to performance issues.
Are there any other solutions to tackle this problems?
Thanks!
Try filling in the canvas as white (fillRect), or adding a background to the scene itself (<a-sky color="#FFF">). Let me know if that works, or provide a JSFiddle for us to play around.
iOS can use layer.cornerRadius to make a round UIButton.
Does WKInterfaceButton have this property?
If not, how can I make a round WKInterfaceButton in WatchKit.
If you put an image inside a group, you can then set the radius of the group. This crops the image into a circle. In the picture below, I have:
Group (radius 56)
Group (radius 52)
Image (a square image)
While this example is with an image, you can use the same technique for a button. Previously the dog was clickable as a button so this is doable.
WKInterfaceButton does not have a corner radius property. You can make a circular button by setting a circular image as the button's background image. You can generate the image in code doing something like this: Draw a simple circle uiimage
You don't need an image to make WKInterfaceButton rounded. Instead:
Go to Attributes inspector for the button, and select content type: Group
Inside the button find the group and set its corner radius to whatever you need.
Scroll down the inspector and set both fixed Width and Height to the value equal to the radius doubled. Here you go
You can put whatever you want inside the button, for example a text label. This way you also can make oval buttons.
I have a collapsing tab with Css Icon fonts, i want to keep the same distance between the Title and the Icon font arrow.
Here the example
http://jsfiddle.net/2D3V5/2/
If the Text on the left has the same length, the Icon font arrow keep the same distance and it's ok, but this is not going to happen in my tabs because obviously the texts are gonna be different, so i need to find out how to keep the Arrow Icon at the same distance from the text independently from the length of the text.
Hope the explanation is clear.
Thanks
You can float the images to right. That's a simple way to manage the equal distance.
Plus, the images of the rest of division are inverted. Do change their classes.
Here is the edited fiddle : Fiddle
See http://jsfiddle.net/2D3V5/3/
If you want to keep the Arrow Icon at the same distance from the text, but you want the arrows aligned too, you have to place the arrows at the left of your titles.
I used icon directly in html as below:
<div class="tabbertab" title='<img height="20" width="20" src="<%=contextPath%>/images/icons/bicycle.png"> Bicycle</img>'>
So the icon image got placed besides Bicycle text.
The text is a part of Tab. Which on selection changes color (white to light blue and vice versa).
The background of the icon also reflects this as icon is having a transparent background. And as you can see, I resized the image according to the place where it is going to be displayed.
However, now I got the requirement to use the icon inside javascript code as below:
iconFile = siteroot + '/images/icons/bicycle.png';
anchor.style.backgroundImage = 'url(' + iconFile + ')';
anchor.style.backgroundRepeat = 'no-repeat';
anchor.style.backgroundPosition = '1px 2px';
where siteroot is the path to the root of the application.
Since here I am directly using the icon file in the size it is available. I resized the icon image using mspaint to 20 by 20 pixel.
However, now the icon image seems to be in a white box (and not transparent) of 20 by 20 and so the icon background color is not changing as per the background of the tab it is in.
Are there any good open source tools to resize icon images without losing transparency. I am not having access to photoshop.
The reason you can see the background in the original one is because the icon file has a transparent background.
You say you resized the icon to 20x20 - I am guessing whatever program you used to do this lost the png transparency that was on the original .png file, and turned the background white.
Try using the non-resized image instead (even if it looks wrong) to verify this is correct, then use a css resizing solution or a better program to resize the icon that won't lose the transparency information.