We're running into a problem trying to use GWT sprites for different-sized buttons, using the same background image, like so:
#Source("background.png")
#ImageOptions(width=200,height=50)
ImageResource wideButton();
#Source("background.png")
#ImageOptions(width=100,height=50)
ImageResource narrowButton();
In the css we use the image resource like so:
#sprite .wideButton {
gwt-image: "wideButton"; }
#sprite .wideButton {
gwt-image: "narrowButton"; }
This produces DIV elements with the proper dimension, but it does not display the image properly when these dimensions are smaller than the image's original width and height: the picture is cropped to fit, rather than scaled.
Setting the width and height in the css does not solve the display problem.
#sprite .wideButton {
gwt-image: "narrowButton";
width: 100px;
height: 50px;
}
Is there a way to make this work, or were sprites simply not designed to be used in this way? Thanks in advance.
Related
I have two pictures of different dimensions meant to be rendered as per the screen size of the phone the app is being run on which I suppose is something that can be achieved using MediaQuery in the following way:
if(MediaQuery.of(context).size.height < initialSize) {
return Image.asset('Image meant for smaller screens')
} else {
return Image.asset('Image meant for bigger screens')
}
What I don't understand is what initialSize value I should be putting in to check and resize accordingly? Hope I have been able to make my question clear!
initialSize differentiate the small image and large image screen based on screen height.
Let say if device's height is less than 200px we want to show X image, else show Y image.
Image getImage() {
if (MediaQuery.of(context).size.height < 200) {
return Image.asset('Image meant for smaller screens');
} else {
return Image.asset('Image meant for bigger screens');
}
}
You need to choose how you like to define small and large screen image, like here 200, initialSize.
Hi I'm new to blackberry. I want to show the image within the circle using qul.
The easiest way to vignette an image is to overlay it with another image. In Cascades if you create a Container using either DockLayout or AbsoluteLayout you can position multiple ImageView objects on top of one another. The first object will be on the bottom, last on the top, by default. You simply create an image with a transparent viewport of the shape you want. You can scale the image at runtime but you should make it about the size of the largest frame you will need to preserve quality. I used Gimp to create a 786 x 78x pixel image with a white frame and a transparent circle in the middle and saved it to the assets directory as frame.png. I grabbed another image I had easily to hand and create a BlackBerry project with this QML code in an appropriate place:
Page {
Container {
layout: DockLayout {
}
ImageView {
imageSource: "asset:///FusionMap.PNG"
preferredHeight: 360
preferredWidth: 360
}
ImageView {
imageSource: "asset:///frame.png"
preferredHeight: 360
preferredWidth: 360
}
}
}
This is the result:
I have .jpg file that I want to display. I have some Horizontal and Vertical panels and I would like to have it somewhere in there. It is a fairly large image but I would like to make a class or an object that will scale it down for me.
My first thought was to just put it in a Horizontal Panel like so but that does not seem to work as I intended
HorizontalPanel picturePanel = new HorizontalPanel();
picturePanel.setPixelSize(600, 300);
picturePanel.addStyleName("pic");
Css.css
.pic
{
background: url(images/mypic.jpg);
height: auto;
width: auto;
}
I'd like to set the pixel size of an object (panel) and add an image to that panel so that it fits within the bounds (while making sure the ratio is the same as in the picture) so I can programatically add it to a panel somewhere.
public interface MyResources extends ClientBundle {
MyResources INSTANCE = GWT.create(MyResources.class);
#Source("logo.png")
ImageResource logo();
}
in your view class
Image logo = new Image(MyResources.INSTANCE.logo());
add image to panel;
set resolution to your panel and also set the same to your image by using
setPixelSize(int,int);
This works:
Image image = new Image();
Image.setWidth("100px");
image.setUrl('http://127.0.0.1:8888/images/accounts.png');
Loads image form local server and will limit size of image.
After I use CSS transition or animation that includes rotate the whole containing div gets a little bit blurry,
I read that it is some kind of side effect from redrawing the element, but is there a way to prevent it?
.toggle {
position: absolute;
width: 36px;
height: 36px;
bottom: 7px;
right: 94px;
z-index: 200;
background: transparent url("../img/handle-open.png") no-repeat;
-webkit-transition: all 1s cubic-bezier(0.91,0.00,1.00,1.00);
-moz-transition: all 1s cubic-bezier(0.91,0.00,1.00,1.00);
transition: all 1s cubic-bezier(0.91,0.00,1.00,1.00);
}
.toggle-closed {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
}
I tries to achieve the same with animate and got the same result
Update: I noticed something weird happening - in chrome, when the animation runs the element gets blurry and when the animation stops it return to normal,
on iOS however it happens the other way around - the image is clear while animated but gets blurry when completed! another weird #$$ bug!?
Ive seen issues such as this before after doing animations. Check the dimensions of the object after the transition, it may very well have changed in size by a few points causing blurry-ness. i,e:
Before transition: 36x36
After Transition: 36.2 x 36.8
I'm wondering about the behavior of {Shape}.attr("fill","url({image.path})").
when applying a fill image to a shape:
public class AppMapCanvas extends Raphael {
public AppMapCanvas(int width, int height) {
super(width, height);
this.hCenter = width / 2;
this.vCenter = height / 2;
...
Rect rect = this.new Rect(hCenter, vCenter, 144, 40, 4);
rect.attr("fill", "url('../images/app-module-1-bg.png')"); // <--
...
}
}
The background image seem to teal accross the canvas behind the shape, thus gets weird positioning (an illustration snapshot is enclosed - i marked the original image borders in red).
This seem to resolve itself in the presence of an animation along a path (a mere path.M(0,0) is sufficiant).
How can i position the fill-image properly in the first place?
The proper way to do this from what I can understand would be to use an SVG pattern declaration to specify the portion and position of the image you would want to use. Then you would use that pattern to fill the rectangle element. Unfortunately, the Raphael javascript library doesn't have support for patterns... so there's no direct way to use an image to fill a rectangle.