I need a functionality where i need to be able to position image properly inside the frame of the image itself.
As you can see in the image, the image container will be of a fixed size, and if the image is bigger than the frame itself, I need to be able to reposition image inside the frame. I tried clipping the image with a rectangle and positioning the image inside the rectangle but the clip creates a new image equal to the size of the rectangle so it has not worked so far. Is there any property in the fabric.Image class that lets us move image position inside?
Since Fabric.js v2, image cropping can be done using a combination of four properties: width, height, cropX, and cropY. (http://fabricjs.com/v2-breaking-changes#image)
As an example, an image with native dimensions of 500x500 pixels can be center cropped to 300x300 pixels like this:
img.set({
width: 300,
height: 300,
cropX: 100,
cropY: 100
});
Related
I've got app based on google maps. Each user is one pin on it.
I want to create pin image basing on user profile photo.
What I need to do is
Resize given image to given size (50x50px)
Make this image circle
Below this image, put base pin image (png) that has place on it for circle photo
Save final image as pin photo
Final image should be png with transparency enabled.
Is there any node library that can do such things?
Imagemagick supports image composition, and node has Imagemagick bindings.
Even though, I guess you can achieve your goal via CSS only:
resize -> browser will do;
make it circle -> border-radius: 50%;
base pin image background -> background-image.
I'm trying to create a game, and the images, both png and svg formats, seems to get pixelated, no matter how
I export them, I can't get to the HD images like angry birds for example.
I tried with illustrator exporting large PNG (512X512) or SVG basic 1.1 export and still nothing seems to get near the high quality I need, especially when you move to tablets, there you can see the image even in SVG being ruined, I guess the engine creates a bitmap out of the SVG and then scaling it to fit the screen resolution (!?).
is there any reference or tutorial on the right way to create images for games to get a good result and prevent
images of being pixelated?
I think you may be loading in your images incorrectly for SVGs as they should be "Pixel Perfect"
final PictureBitmapTextureAtlasSource textureSource = new SVGAssetBitmapTextureAtlasSource(activity, assetPath, width, height);
Bitmap pBitmap = null;
try {
pBitmap = textureSource.onLoadBitmap(Config.ARGB_8888);
} catch (Exception e) {
e.printStackTrace();
}
Key is to pay attention to the "width" & "height" parameters, this should refer to the original size of your graphic multiplied by your screen scaling.
For example if you are using 800x480 as a default and you design a sprite with a sprite of 100x100 that works perfectly with this resolution. When your game comes to creating the SVG on a device with dimenions 800x480 your sprite will be saved with width and height of 100x100. However if the device was 1000x700 the "scaleX" would be 1000/800 which is 1.25 and scaleY would be 1.46, this would yield a sprite with dimensions 125x146 and would be pixel perfect for this device.
When creating the TextureRegion later on make sure you specify a width and height of 100x100 otherwise your sprite will change size based on the resulting SVG Bitmap
I have a function that adds an imageOverlay and a semitransparent Rectangle on top of that image (so as to tint the image, and draw a keyline around it).
activeUserImage = new L.imageOverlay(imageUrl, imageBounds).addTo(map);
activeUserTile = new L.rectangle(imageBounds, {stroke: true, color: "#ffffff", opacity:1, weight: 1, fillColor: "#003572", fillOpacity: 0.7, clickable:true}).addTo(map);
this works great, but then I want to remove the image and rectangle with:
map.removeLayer(activeUserImage);
map.removeLayer(activeUserTile);
This seems to work well...
However when I try and add a second Image & Rectangle (using the same function) the rectangle SVG is being rendered underneath the image, so I don't see the colored overlay.
This seems to be because the element is being left behind from the first creation, and then when the image is being added a second time it appears in front of the SVG.
Q:
Is this a bug? Should the SVG element not be cleared too?
Can I adjust z-index of the image or SVG on creation?
should i be containing to rectangle in a different layer to the images? How?
Many Thanks
OK, so the Leaflet bringToFront() method didn't work, but instead I have used a bit of JQuery to force the same approach.
svgObj = $('.leaflet-overlay-pane svg');
svgObj.css('z-index', 9999);
This works, but still feels like a hack... however if (?) there is a bug in LEaflet, then maybe this will have to do???
Any better ideas?
The bringToFront() function alows you to bring layer to the top.
Search it in the docs.
I want to add image and some text on another image and create a single image. I have got to add text but not able to figure out that how to add image. Any help?
This snippet assumes you have UIImage's named bottomImage for the base image to be drawn upon, and topImage that will be drawn ON (above) the bottomImage. xpos,ypos are floats to describe the target x,y (top left) position where topImage will be drawn, and targetSize the size in which topImage will be drawn on bottomImage.
...
UIGraphicsBeginImageContext( bottomImage.size );//create a new image context to draw offscreen
[bottomImage drawInRect:CGRectMake(0,0,bottomImage.size.width,bottomImage.size.height)];//draw bottom image first, at original size
[topImage drawInRect:CGRectMake(xpos,ypos,targetSize.width,targetSize.height) blendMode:kCGBlendModeNormal alpha:1];//draw the image to be overlayed second, at wanted location and size
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();//get newly drawn image context into a UIImage
UIGraphicsEndImageContext();//stop drawing to the context
return newImage;//return/use the newly created image
This is not thread safe - creating a UIImage in a thread is not recommended.
I want to merge two images in blackberry. one image is a big image and other image is a small one. position of small image will be define by developer. what are the possible ways?
You can use the Graphics class to draw multiple Bitmaps onto it in different offsets. Look into the Graphic.drawBitmap function. We use something like:
graphics.drawBitmap(x1, y1, icon.getWidth(), icon.getHeight(), icon, 0, 0);
Where the graphics object is the one passed by the paint method we override and icon is the large image. Than determine the x y position for the smaller image and use the same method on the graphics object:
graphics.drawBitmap(x2, y2, mark.getWidth(), mark.getHeight(), mark, 0, 0);
Where mark is the smaller image.
Hope this helps :)