I want to resize compass image on android and I used the following snippet to show the image. I could not resize the compass button by resizing image view. I wish to give a dp value to resize the compass image button.
ContextCompat.getDrawable(mapView.context, R.drawable.ic_compass_solid)?.let {
mapView.compass.updateSettings {
image = it
marginBottom = allMargin.toFloat()
marginLeft = allMargin.toFloat()
marginRight = allMargin.toFloat()
marginTop = allMargin.toFloat()
}
}
Margins show fine, just the compass is big in size.
Related
Among the functions of fabric js, there is a method or property that crops objects except canvas, but I did not find a function to crop the canvas itself. I tried changing the canvas to an image in the following way, cropping it, and then inserting it back into the canvas.
fabric.Image.fromURL(canvas.toDataURL(), img => {
currentImage = img; //save current canvas as image
currentImage.set({
scaleX : canvas.width / currentImage.width,
scaleY : canvas.height / currentImage.height,
cropX: selectionRect.left,
cropY: selectionRect.top,
width: selectionRect.getScaledWidth(),
height: selectionRect.getScaledHeight(),
});
canvas.setDimensions({
width: selectionRect.getScaledWidth(),
height: selectionRect.getScaledHeight()
});
canvas.setBackgroundImage(currentImage).renderAll();
but in this case, an image with a transparent background becomes a background.
If you look at the following picture, a picture of a flower without a background is on the canvas, and What I want is to resize the canvas by the dotted rectangle area without making any objects on the canvas an image as follows.
before crop:
after crop:
Just as the starting range and area are determined with attributes such as cropX or cropY when cropping an object, I would like to know how to apply this to the canvas as well.
I have tried to download canvas as an image, but it is downloading with transparent background. How do I set the background color to an image?
This is the code I've tried:
this.canvas = document.getElementById('barchart') as HTMLCanvasElement;
var download = document.getElementById("download");
let url = this.canvas.toDataURL("image/png").replace("image/png","image/octet-stream");
download.setAttribute("href", url);
I'm new with Xamarin. I'm actually trying to set the background image of a view and stretch it.
The image is a 2048x1536 pixels png.
nfloat vpHeight = View.Bounds.Height;
nfloat vpWidth = View.Bounds.Width;
Console.WriteLine(vpWidth);
Console.WriteLine(vpHeight);
The above code will return me 1024x768 (it's a landscape position).
var img = UIImage.FromFile("pages/p1.png");
UIImageView imgView = new UIImageView(img);
imgView.ContentMode = UIViewContentMode.ScaleAspectFit;
var prevPage = new UIView()
{
Frame = new CoreGraphics.CGRect(0, 0, vpWidth, vpHeight)
};
prevPage.Add(imgView);
this is the code where I set the background, but the result is just the half of the image in x and y just like the image bellow:
So, how to make the image to adjust to the width and height of the view ?
ty !!
I would create an UIImageView as a background like so:
var img = UIImage.FromFile("pages/p1.png");
UIImageView imgView = new UIImageView(img);
imgView.ContentMode = UIViewContentMode.ScaleAspectFit;
then add this to whatever view you are using.
ContentMode can be used like so:
Update
I would add it to the prevPage like so:
var prevPage = new UIView()
{
Frame = new CoreGraphics.CGRect(0, 0, vpWidth, vpHeight)
};
var img = UIImage.FromFile("pages/p1.png");
UIImageView imgView = new UIImageView(new CGRect(0,0,vpWidth,vpHeight));
imgView.Image = img;
imgView.ContentMode = UIViewContentMode.ScaleAspectFit; // or ScaleAspectFill
prevPage.Add(imgView);
Also its worth noting that using the View.Bounds to position the view is bit clunky. I would take a look into Autolayout as you will encounter problems on different devices and orientations. These are some good tutorials on Autolayout they might be native code but you are looking for the relationships of the views rather than the code.
Raywenderlich tutorial
Other Tutorial
Any probs with autolayout just ask another question.
I would recommend you stay away from FromPatternImage unless you are really using a pattern.
For the lowest memory consumption and best UI performance, this is what I do:
1st) Resize your image using an image context to match the size of the view:
UIGraphics.BeginImageContext(View.Frame.Size);
UIImage.FromBundle("bg.jpg").Draw(View.Bounds);
var bgImage = UIGraphics.GetImageFromCurrentImageContext();
UIGraphics.EndImageContext();
2nd) Display the resized image in a UIImageView and send it to the lowest Z-order:
var uiImageView = new UIImageView(View.Frame);
uiImageView.Image = bgImage;
View.AddSubview(uiImageView);
View.SendSubviewToBack(uiImageView);
There're lot of Watch apps which has rounded corners for their WKInterfaceImages. I'm trying to round even some WKInterfaceImages in my test app but I can't understand how to do that.
I can't work with imageView.layer. ... as with normal iPhone apps and I can't find an alternative to do that using code or storyboard.
Do I have to mask all PNGs or there's a simpler way?
I solved removing the WKInterfaceImage from storyboard then replacing it with an WKInterfaceGroup which I set with same sizes of previous Image then, from attribute inspector, I setted his radius (yes, with groups it's possible!) then I declared group in controller and setted the image using row.flagView.setBackgroundImageNamed(imageName).
You are right CALayer and UIView are not directly available on watchOS 2. But you are able to use graphic functions and for instance this approach is perfectly acceptable on Watch.
The analogue in Swift:
class ImageTools {
class func imageWithRoundedCornerSize(cornerRadius:CGFloat, usingImage original: UIImage) -> UIImage {
let frame = CGRectMake(0, 0, original.size.width, original.size.height)
// Begin a new image that will be the new image with the rounded corners
UIGraphicsBeginImageContextWithOptions(original.size, false, 1.0)
// Add a clip before drawing anything, in the shape of an rounded rect
UIBezierPath(roundedRect: frame, cornerRadius: cornerRadius).addClip()
// Draw the new image
original.drawInRect(frame)
// Get the new image
let roundedImage = UIGraphicsGetImageFromCurrentImageContext()
// Lets forget about that we were drawing
UIGraphicsEndImageContext()
return roundedImage
}
}
Somewhere in your WKInterfaceController class:
let originalImage = UIImage(named: "original-image")!
let roundedImage = ImageTools.imageWithRoundedCornerSize(60, usingImage: originalImage)
// Set `UIImage` for your `WKInterfaceImage`
imageOutlet.setImage(roundedImage)
I'm working with a function that uses an image to set a div's margin-top.
It finds the image height and the window height and sets the divs margin-top to the lesser of the two values. It works perfectly fine for all local browsers (IE, Chrome, Firefox).
When I upload it to GitHub it fails to recognize the image height however. Now when I run the code below on GitHub the console.log of the image height is 0. When I run it locally the console.log of the image height is correct. The image is loaded on GitHub, so it's not an issue of the image not making into the web page.
It seems like the script runs before the image loads on GitHub, but not locally. Anyone have any ideas?
var portfolioMargin = function() {
var windowHeight = window.innerHeight;
var imageHeight = $('#imageWrap img').height();
//if windowheight is bigger than image height make portfolio div margin equal to image height, else do the opposite
console.log("window height " + windowHeight);
console.log("image height " + imageHeight);
if (windowHeight > imageHeight) {
$('#portfolio').css('margin-top', imageHeight);
} else {
$('#portfolio').css('margin-top', windowHeight);
}
};//end portfolioMargin function
So I figured it out I think. You have to wrap the function in a window.load function to make sure all images have been loaded. From what I understand this won't work for dynamically added images however. Here is the code that fixed it:
//make sure images have loaded before running image height
$(window).load(function() {
portfolioMargin();
});