Here's my problem, I need to scale and clip images into square sized tiles to put into a tile list. Here's how I want it to work:
I want all my tiles to be, say, 300px x 300px.
For each image, I want to scale the shorter side (either width or height) to fit in the tile using the "letterbox" scaleMode (so that it maintains aspect ratio).
Then I want to position the image in the center and clip away anything left over from either both sides or the top and bottom.
Here's an example to help clarify:
I have an image with width=600px and height=1200px. First I want to scale the image to width=300px and height=600px (notice that aspect ratio is maintained), then center the image vertically and clip the image to 300 x 300.
Is this possible? This is actually a pretty standard way of displaying square thumbnails in many photo-based web sites, but I can't find a way to make it work in flex.
Any help would be appreciated, thanks!
UPDATE JUNE 2012:
Just in case anyone finds this thread now, this issue has been resolved in the latest version of the Flex SDK. On the spark image object there is a new scaleMode of "zoom" which does exactly what I've asked for here.
Take your big image and draw it on BitmapData with scale and reposition:
const zoom:Number = Math.max(THUMB_WIDTH/image.width, THUMB_HEIGHT/image.height);
const x:int = (THUMB_WIDTH - image.width*zoom)/2;
const y:int = (THUMB_HEIGHT - image.height*zoom)/2;
var matrix:Matrix = new Matrix;
matrix.scale(zoom, zoom);
matrix.translate(x, y);
var _thumbBitmap:BitmapData = new BitmapData(THUMB_WIDTH, THUMB_HEIGHT, false, 0xFFFFFF);
_thumbBitmap.draw(image, matrix, null, null, null, true);
Then assign resulting BitmapData to the source of the BitmapImage.
More: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/BitmapData.html#draw%28%29
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/primitives/BitmapImage.html#source
Related
I'm creating an application using Paperjs to drawing some sketch on an image, persisting the sketch without the background and display back the sketch along with background image.
In my Paperjs canvas, I have a raster image and on top of that I'm making some sketch pointing a part of the background image. After the drawing is done, I'm doing JSON export, excluding background raster image, to persist the drawing. Now when I export it back, the background raster image is generated dynamically and the Paper canvas size is set to the size of the image. But if the browser window size is different then the size of the image will be different than where the original drawing is created.
The issue that I'm facing if the image size isn't the used while creating the sketch, its pointing to the different part of the image. Is there any way we can proportionally change the paperjs drawing so that the sketch points to the same point of the background raster image?
Any help would be appreciated.
Below is an example :
With actual size -
After resize
I'm able to achieve what I wanted to with the below changes. Thanks #arthur.sw for your help.
Here originalViewSize is the original size on which the actual sketch was created.
Steps:
Update view size
Calculate x-axis and y-axis scale factor
Update bounds for background image
Update active layer positions
Scale active layer
// Changing view size and calculating scale factor for x & y-axis
paperScope.view.viewSize = new Size(originalViewSize.width + 200, originalViewSize.height + 100);
const xScale = paperScope.view.viewSize.width /originalViewSize.width;
const yScale = paperScope.view.viewSize.height /originalViewSize.height;
// Update b/g image bounds
backgroundRaster.bounds = paperScope.view.bounds;
paperScope.project.activeLayer.position.x = paperScope.project.activeLayer.position.x * xScale;
paperScope.project.activeLayer.position.y = paperScope.project.activeLayer.position.y * yScale;
paperScope.project.activeLayer.scale(xScale, yScale);
I have 7*7 ImageViews and I want to put them scalingly in some positions.
I need to know how I scale ImageView and how to set their position relatively to screen size.
(I will need to reposition and animate them dynamically after program start)
You need to add a CGAffineTransormation onto the image view
imageView.transform = CGAffineTransformMakeScale(CGFloat sx, CGFloat sy);
This will scale down the image view, and will give you your desired output
Dealing with the repositioning, all you gotta do is add a CGAffineTransformationTranslation
imageView.transform = CGAffineTransformMakeTranslation(CGFloat tx, CGFloat ty)
Do this with all the image views that you watn, and you will get what you want
Hope this helps!
I want to create a tiled background in which each row of the background has a random x-offset. That would be ideal, but if that's not possible with CSS (I think not), at least what's the best way to use a single image to create a body background in which this several (let's say 4) rows of this image have different x positions?
Something like:
IMAGEIMAGEIMAGEIMAGE
MAGEIMAGEIMAGEIMAGEI
AGEIMAGEIMAGEIMAGEIM
GEIMAGEIMAGEIMAGEIMA
IMAGEIMAGEIMAGEIMAGE
MAGEIMAGEIMAGEIMAGEI
AGEIMAGEIMAGEIMAGEIM
GEIMAGEIMAGEIMAGEIMA
what would be the size of your image? If is is very small, an easy solution would be to do that in photoshop/paint. The resulting image would be 4x larger, but for small images (read less than 25ko), I think it is by far the easiest way. At least I don't see any easy CSS solution to your problem.
If your picture is quite big and you know its height, you could eventually have the following approach: http://jsfiddle.net/7GPTy/
The idea is to create several divs at z-index:-1 of height == image_height and absolute position with different left values... i'd see that as a coarse but working solution
var mybody = document.getElementById('body');
var bodyHeight = mybody.offsetHeight;
var imgHeight = 49; // you could get the size by opening the file
var offsetLines = 4; // this is the number of offset you asked, but you can change that!
var nbOfLines = Math.ceil(bodyHeight/imgHeight);
for(var i=0; i<nbOfLines; i++){
var newBgDiv = document.createElement('div');
newBgDiv.className = 'backgroundImg imgOffset_'+(i%offsetLines);
newBgDiv.style.top = (i*imgHeight) + 'px';
newBgDiv.style.height = imgHeight + 'px';
newBgDiv.style.width = '100%';
mybody.appendChild(newBgDiv);
}
to go through the js code quickly, I basically get the height of the page and divide it by the height of the picture to know how many divs i have to create to generate the entire background. Once done, you simply define the number of different row offset you want (offsetLines) and you generate your divs.
In my example, the offset depends on the size of the window (try to resize horizontally your window, you'll see that the offset changes). You can of course fix it to a defined number of pixels !
If CSS3 is appropriate for your project, you can use multiple backgrounds to do this.
Make an image that is twice the height of your pattern, with the top half filled with your pattern, and the bottom half transparent.
Then use multiple backgrounds to position them accordingly like so:
.div {
background: url(path/to/image.png) 0 0 repeat,
url(path/to/image.png) 0 {height of image in pixel} repeat
}
Its not a random offset, but with enough variations to this, it would be hard to tell the difference.
If you want to add to the perceived randomness, have a look at this post.
I have a qt label which by default has a place holder image in it:
self.label.setPixmap(QtGui.QPixmap(_fromUtf8("place_holder.jpg")))
There is a function to update the image contained in the label which is:
def selectFile(self):
image = QtGui.QFileDialog.getOpenFileName(None, 'Select Reference Image', '', '*.jpg')
self.label.setPixmap(QtGui.QPixmap(_fromUtf8(image)))
This works fine (the image is updated), but it is also deformed if the image used to update the label has different size from the place holder image.
Is there any way to fix this? I mean to adapt the image and to keep fix the size of the label?
You can try to set the scaledContents property:
self.label.setScaledContents(True)
self.label.setPixmap(QPixmap("your_image.jpeg"))
It works fine for me.
Beware that this scale the image to fill all available space. It means that the aspect ratio of the image wont be preserved unless the label size and the image have the same aspect ratio. You will have the same problem using the QPixmap.scale method as you can see in the images here.
Scale the image each time you import it. If you already have a size in mind for your label, you can even scale the place holder.
try (c++)
//initial setup
QPixmap pixPlaceHolder = QPixmap(_fromUtf8("place_holder.jpg");
QSize desiredsize = pixPlaceHolder.size(); // or any of the size you want
Each time you select a file:
label.setPixmap(QPixmap(_fromUtf8(image).scaled(desiredsize));
try this, this helped me for scaling the image to fit the label while maintaining the aspect ratio. Will also help to resize the image based on the label size.
pixmap = QPixmap(x)
pixmap = pixmap.scaled(self.label.size().width(),self.ui.label_4.size().height(), Qt.KeepAspectRatio)
self.label.setPixmap(QPixmap(pixmap))
I'm trying Seadragon Ajax with coordinates system in order to show in my website large images with big resolution .
I would to view a part of this image knowing their coordinates. The problem is that when I make zoom or drag the image , coordinates no longer correspond to the same part of the image.
I try with some code but no way.I need that coordinates system is fix for all the image .
As i can do?
Thanks
Sure, no problem. You have to transform the "real" pixelbased coordinate to the seadragon point-coordinate.
"Seadragon Ajax uses a normalized coordinate system. The top-left of the image is always at the origin (0, 0) while the width of the image is always 1. The height of the image is dependant on the aspect ratio, so an image which is half as tall as it is wide will have a height of 0.5"
So, if you know that your image is 500x500px, then point 1,1 = 500px,500px and 0.5,0.5 = 250px,250px.
Convert by writing a function like this:
var my_position_x=333; // the position you want to get point for
var my_position_y=666; // the position you want to get point for
var width=500;
var height=500;
var pointx=1/width * my_position_x;
var pointy=1/height * my_position_y;