When insert an image into TLF in flex3, I found that image in TLF is displayed in a square area. so there is some space at the top of the image. See the attached image for this problem.
How to remove this space? I try the following method, But it doesn't work!
var graphic_element:InlineGraphicElement = IEditManager(activeFlow.interactionManager).insertInlineGraphic(foreignElementUrl, width, height, "none");
graphic_element.paddingTop = 0;
graphic_element.paddingBottom = 0;
graphic_element.paddingRight = 0;
graphic_element.paddingLeft = 0;
IEditManager(activeFlow.interactionManager).applyParagraphFormat(graphic_element);
Maybe this?
inlineGraphicElement.textDecoration = null;
inlineGraphicElement.alignmentBaseline = TextBaseline.ASCENT;
inlineGraphicElement.lineHeight = "100%";
The following code is useful if you create your textFlow from an HTML source. It will correct for every images in the textflow the display.
static private function _InlineGraphicElementCorrection(children:Array):void
{
var numChildren:int = children.length;
for (var i:int=0; i<numChildren; i++)
{
if( children[i].hasOwnProperty('mxmlChildren') )
_InlineGraphicElementCorrection(children[i].mxmlChildren);
if( !(children[i] is InlineGraphicElement) )
continue;
var graphicElement : InlineGraphicElement = children[i];
graphicElement.textDecoration = null;
graphicElement.alignmentBaseline = TextBaseline.ASCENT;
graphicElement.lineHeight = "100%";
}
}
static public function importHtmlToFlow(html:String):TextFlow
{
var flow : TextFlow = TextConverter.importToFlow(html.replace(/[\r\n]/ig, ""), TextConverter.TEXT_FIELD_HTML_FORMAT);
_InlineGraphicElementCorrection(flow.mxmlChildren);
return flow
}
Related
I have been trying to add images to an array and then access their properties to change their source image in a loop.
Detailed: I create a grid with a layout for each for each grid element, in that layout there is a GridImage, who's source folder is set to "ClosedFolder.png", when I click one of the layouts it should change the clicked layouts folder to "OpenFolder.png".
for (int eachCount = 0; eachCount <= MaxRows / MaxCols; eachCount++)
{
Selectedrid.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(80, GridUnitType.Absolute) });
for (int newCol = 0; newCol <= MaxCols; newCol++)
{
for (int newRow = 0; newRow <= MaxRows / MaxCols; newRow++)
{
if (folderIndex >= DirectoryArrayList.Count) { break; }
var folder = DirectoryArrayList[folderIndex];
var label = new Label()
{
Text = folder.Name,
FontSize = 12,
VerticalTextAlignment = TextAlignment.Center,
HorizontalTextAlignment = TextAlignment.Center
};
var GridImage = new Image() { Source = "ClosedFolder.png", StyleId = "Image" };
var GridTap = new TapGestureRecognizer();
var Layout = new StackLayout() { StyleId = "StackContent" };
var folderSelection = _mainFolder + "/" + folder.Name;
GridTap.Tapped += async(object sender, EventArgs e) =>
{
FileHandler.CreateTextFiles(folderSelection, "File_" + FileID + ".txt");
files = FolderOptions.AddFilesToList(folderSelection);
lst.ItemsSource = files;
//foreach (Image img in ImageList) I know this i incorrect, just an example of what I think!
//{
// img.Source = "ClosedFolder.png";
//}
GridImage.Source = "OpenFolder.png"; // clicked layout gets its openfolder.png
};
Layout.Children.Add(label);
Layout.Children.Add(GridImage);
Layout.GestureRecognizers.Add(GridTap);
Selectedrid.Children.Add(Layout, newCol, newRow);
folderIndex += 1;
FileID += 1;
}
}
}
Not sure on the declaration of the array and how to implement it.
I added the following into my BasicGrid method ...
var GridImage = new Image() { Source = "ClosedFolder.png", StyleId = "Image" };
var ImageList = new List<Image>{};
ImageList.Add( GridImage );
for (var i = 0; i < ImageList.Count; i++)
{
var img = ImageList[i];
img.Source = "ClosedFolder.png";
} GridImage.Source = "OpenFolder.png"
Just adding to say that Jason's information is the most likely direction I will go in, but as I am still learning it will take me time and I dint want to keep this open while I do that :-)
I'd like to understand how the options for the screen adjustments such as "Fit Screen", "Original", "Best Fit" are set, if it's possible to keep only specific options.
I tried this bellow, the video opens in fill size, but if I press the Size button it still has the other options:
var myString = "Fit screen";
byte[] bytes = Encoding.Default.GetBytes(myString);
myString = Encoding.UTF8.GetString(bytes);
MediaPlayer = new MediaPlayer(media) { EnableHardwareDecoding = true, AspectRatio = myString };
Also, I'd like to know if I can open the video in another view in fullscreen mode when tapping the button, just like youtube does.
Given that LibVLCSharp is fully opensource, I encourage you to have a look at the code whenever you have questions.
Aspect ratio management is provided as a feature of the MediaPlayerElement component, but you can easily retrieve and use that code if you are not using that component.
private void UpdateAspectRatio(AspectRatio? aspectRatio = null)
{
var mediaPlayer = MediaPlayer;
var videoView = VideoView;
if (aspectRatio == null)
{
aspectRatio = GetAspectRatio(mediaPlayer);
}
if (videoView != null && mediaPlayer != null)
{
switch (aspectRatio)
{
case AspectRatio.Original:
mediaPlayer.AspectRatio = null;
mediaPlayer.Scale = 1;
break;
case AspectRatio.Fill:
var videoTrack = GetVideoTrack(mediaPlayer);
if (videoTrack == null)
{
break;
}
mediaPlayer.Scale = 0;
mediaPlayer.AspectRatio = IsVideoSwapped((VideoTrack)videoTrack) ? $"{videoView.Height}:{videoView.Width}" :
$"{videoView.Width}:{videoView.Height}";
break;
case AspectRatio.BestFit:
mediaPlayer.AspectRatio = null;
mediaPlayer.Scale = 0;
break;
case AspectRatio.FitScreen:
videoTrack = GetVideoTrack(mediaPlayer);
if (videoTrack == null)
{
break;
}
var track = (VideoTrack)videoTrack;
var videoSwapped = IsVideoSwapped(track);
var videoWidth = videoSwapped ? track.Height : track.Width;
var videoHeigth = videoSwapped ? track.Width : track.Height;
if (track.SarNum != track.SarDen)
{
videoWidth = videoWidth * track.SarNum / track.SarDen;
}
var ar = videoWidth / (double)videoHeigth;
var videoViewWidth = videoView.Width;
var videoViewHeight = videoView.Height;
var dar = videoViewWidth / videoViewHeight;
var rawPixelsPerViewPixel = DisplayInformation.ScalingFactor;
var displayWidth = videoViewWidth * rawPixelsPerViewPixel;
var displayHeight = videoViewHeight * rawPixelsPerViewPixel;
mediaPlayer.Scale = (float)(dar >= ar ? (displayWidth / videoWidth) : (displayHeight / videoHeigth));
mediaPlayer.AspectRatio = null;
break;
case AspectRatio._16_9:
mediaPlayer.AspectRatio = "16:9";
mediaPlayer.Scale = 0;
break;
case AspectRatio._4_3:
mediaPlayer.AspectRatio = "4:3";
mediaPlayer.Scale = 0;
break;
}
}
if (_aspectRatio != aspectRatio)
{
_aspectRatio = (AspectRatio)aspectRatio;
AspectRatioChanged?.Invoke(this, EventArgs.Empty);
}
}
See here https://code.videolan.org/videolan/LibVLCSharp/blob/3.x/LibVLCSharp/Shared/MediaPlayerElement/AspectRatioManager.cs
Do note that both the AspectRatio and Scale properties need to be updated when changing aspect ratio, as they are intertwined.
I'd like to know if I can open the video in another view in fullscreen mode when tapping the button, just like youtube does.
I'm not sure what you mean by this. If you refer to navigation, see my blogpost about it.
Fitscreen is simply stretching the video. But remember it will effect video quality. And also you will have to update it whenever video rotates or size changed.
You can try this working and tested code:
MediaPlayerElement1.MediaPlayer.AspectRatio = $"{MediaPlayerElement1.Width.ToString()}:{MediaPlayerElement1.Height.ToString()}";
MediaPlayerElement1.Scale = 0;
Someone helped me get this code for taking a picture using xamarin forms labs camera:
picker = DependencyService.Get<IMediaPicker> ();
task = picker.TakePhotoAsync (new CameraMediaStorageOptions {
DefaultCamera = CameraDevice.Rear,
MaxPixelDimension = 800,
});
img.BackgroundColor = Color.Gray;
Device.StartTimer (TimeSpan.FromMilliseconds (250), () => {
if (task != null) {
if (task.Status == TaskStatus.RanToCompletion) {
Device.BeginInvokeOnMainThread (async () => {
//img.Source = ImageSource.FromStream (() => task.Result.Source);
var fileAccess = Resolver.Resolve<IFileAccess> ();
string imageName = "img_user_" + User.CurrentUser().id + "_" + DateTime.Now.ToString ("yy_MM_dd_HH_mm_ss") + ".jpg";
fileName = imageName;
fileAccess.WriteStream (imageName, task.Result.Source);
fileLocation = fileAccess.FullPath(imageName);
FileStream fileStream = new FileStream(fileAccess.FullPath(imageName), FileMode.Open, System.IO.FileAccess.Read);
imageUrl = (string)test[0]["url"];
img.Source = imageUrl;
});
}
return task.Status != TaskStatus.Canceled
&& task.Status != TaskStatus.Faulted
&& task.Status != TaskStatus.RanToCompletion;
}
return true;
});
It saves the image, but the actual size of the phone picture taken is huge, is there a way to resize it.
UPDATE: The original answer is not useful, see below for updated answer. The issue was the PCL library was very slow and consumed too much memory.
ORIGINAL ANSWER (do not use):
I found an image I/O library, ImageTools-PCL, which I forked on github and trimmed down what wouldn't compile in Xamarin, keeping the modifications to minimum and the result seems to work.
To use it download the linked repository, compile it with Xamarin and add the DLLs from Build folder to your Forms project.
To resize an image you can do this (should fit the context of your question)
var decoder = new ImageTools.IO.Jpeg.JpegDecoder ();
ImageTools.ExtendedImage inImage = new ImageTools.ExtendedImage ();
decoder.Decode (inImage, task.Result.Source);
var outImage = ImageTools.ExtendedImage.Resize (inImage, 1024, new ImageTools.Filtering.BilinearResizer ());
var encoder = new ImageTools.IO.Jpeg.JpegEncoder ();
encoder.Encode (outImage, fileAccess.CreateStream (imageName));
ImageSource imgSource = ImageSource.FromFile (fileAccess.FullPath (imageName));
UPDATED ANSWER:
Get Xamarin.XLabs from nuget, learn about using Resolver, create an IImageService interface with Resize method.
Implementation for iOS:
public class ImageServiceIOS: IImageService{
public void ResizeImage(string sourceFile, string targetFile, float maxWidth, float maxHeight)
{
if (File.Exists(sourceFile) && !File.Exists(targetFile))
{
using (UIImage sourceImage = UIImage.FromFile(sourceFile))
{
var sourceSize = sourceImage.Size;
var maxResizeFactor = Math.Min(maxWidth / sourceSize.Width, maxHeight / sourceSize.Height);
if (!Directory.Exists(Path.GetDirectoryName(targetFile)))
Directory.CreateDirectory(Path.GetDirectoryName(targetFile));
if (maxResizeFactor > 0.9)
{
File.Copy(sourceFile, targetFile);
}
else
{
var width = maxResizeFactor * sourceSize.Width;
var height = maxResizeFactor * sourceSize.Height;
UIGraphics.BeginImageContextWithOptions(new CGSize((float)width, (float)height), true, 1.0f);
// UIGraphics.GetCurrentContext().RotateCTM(90 / Math.PI);
sourceImage.Draw(new CGRect(0, 0, (float)width, (float)height));
var resultImage = UIGraphics.GetImageFromCurrentImageContext();
UIGraphics.EndImageContext();
if (targetFile.ToLower().EndsWith("png"))
resultImage.AsPNG().Save(targetFile, true);
else
resultImage.AsJPEG().Save(targetFile, true);
}
}
}
}
}
Implementation of the service for Android:
public class ImageServiceDroid: IImageService{
public void ResizeImage(string sourceFile, string targetFile, float maxWidth, float maxHeight)
{
if (!File.Exists(targetFile) && File.Exists(sourceFile))
{
// First decode with inJustDecodeBounds=true to check dimensions
var options = new BitmapFactory.Options()
{
InJustDecodeBounds = false,
InPurgeable = true,
};
using (var image = BitmapFactory.DecodeFile(sourceFile, options))
{
if (image != null)
{
var sourceSize = new Size((int)image.GetBitmapInfo().Height, (int)image.GetBitmapInfo().Width);
var maxResizeFactor = Math.Min(maxWidth / sourceSize.Width, maxHeight / sourceSize.Height);
string targetDir = System.IO.Path.GetDirectoryName(targetFile);
if (!Directory.Exists(targetDir))
Directory.CreateDirectory(targetDir);
if (maxResizeFactor > 0.9)
{
File.Copy(sourceFile, targetFile);
}
else
{
var width = (int)(maxResizeFactor * sourceSize.Width);
var height = (int)(maxResizeFactor * sourceSize.Height);
using (var bitmapScaled = Bitmap.CreateScaledBitmap(image, height, width, true))
{
using (Stream outStream = File.Create(targetFile))
{
if (targetFile.ToLower().EndsWith("png"))
bitmapScaled.Compress(Bitmap.CompressFormat.Png, 100, outStream);
else
bitmapScaled.Compress(Bitmap.CompressFormat.Jpeg, 95, outStream);
}
bitmapScaled.Recycle();
}
}
image.Recycle();
}
else
Log.E("Image scaling failed: " + sourceFile);
}
}
}
}
#Sten's answer might encounter out-of-memory problem on some android devices. Here's my solution to implement the ResizeImage function
, which is according to google's "Loading Large Bitmaps Efficiently" document:
public void ResizeImage (string sourceFile, string targetFile, int reqWidth, int reqHeight)
{
if (!File.Exists (targetFile) && File.Exists (sourceFile)) {
var downImg = decodeSampledBitmapFromFile (sourceFile, reqWidth, reqHeight);
using (var outStream = File.Create (targetFile)) {
if (targetFile.ToLower ().EndsWith ("png"))
downImg.Compress (Bitmap.CompressFormat.Png, 100, outStream);
else
downImg.Compress (Bitmap.CompressFormat.Jpeg, 95, outStream);
}
downImg.Recycle();
}
}
public static Bitmap decodeSampledBitmapFromFile (string path, int reqWidth, int reqHeight)
{
// First decode with inJustDecodeBounds=true to check dimensions
var options = new BitmapFactory.Options ();
options.InJustDecodeBounds = true;
BitmapFactory.DecodeFile (path, options);
// Calculate inSampleSize
options.InSampleSize = calculateInSampleSize (options, reqWidth, reqHeight);
// Decode bitmap with inSampleSize set
options.InJustDecodeBounds = false;
return BitmapFactory.DecodeFile (path, options);
}
public static int calculateInSampleSize (BitmapFactory.Options options, int reqWidth, int reqHeight)
{
// Raw height and width of image
int height = options.OutHeight;
int width = options.OutWidth;
int inSampleSize = 1;
if (height > reqHeight || width > reqWidth) {
int halfHeight = height / 2;
int halfWidth = width / 2;
// Calculate the largest inSampleSize value that is a power of 2 and keeps both
// height and width larger than the requested height and width.
while ((halfHeight / inSampleSize) > reqHeight
&& (halfWidth / inSampleSize) > reqWidth) {
inSampleSize *= 2;
}
}
return inSampleSize;
}
You can do this natively for each platform and use an interface. Heres an example for IOS
In your PCL project you need to add an interface
public interface IImageResizer
{
byte[] ResizeImage (byte[] imageData, double width, double height);
}
Then to resize an image in your code, you can load the IOS implementation of that interface using the DependencyService and run the ResizeImage method
var resizer = DependencyService.Get<IImageResizer>();
var resizedBytes = resizer.ResizeImage (originalImageByteArray, 400, 400);
Stream stream = new MemoryStream(resizedBytes);
image.Source = ImageSource.FromStream(stream);
IOS Implementation, add this class to your IOS project.
[assembly: Xamarin.Forms.Dependency (typeof (ImageResizer_iOS))]
namespace YourNamespace
{
public class ImageResizer_iOS : IImageResizer
{
public byte[] ResizeImage (byte[] imageData, double maxWidth, double maxHeight)
{
UIImage originalImage = ImageFromByteArray (imageData);
double width = 300, height = 300;
double maxAspect = (double)maxWidth / (double)maxHeight;
double aspect = (double)originalImage.Size.Width/(double)originalImage.Size.Height;
if (maxAspect > aspect && originalImage.Size.Width > maxWidth) {
//Width is the bigger dimension relative to max bounds
width = maxWidth;
height = maxWidth / aspect;
}else if (maxAspect <= aspect && originalImage.Size.Height > maxHeight){
//Height is the bigger dimension
height = maxHeight;
width = maxHeight * aspect;
}
return originalImage.Scale(new SizeF((float)width,(float)height)).AsJPEG ().ToArray ();
}
public static MonoTouch.UIKit.UIImage ImageFromByteArray(byte[] data)
{
if (data == null) {
return null;
}
MonoTouch.UIKit.UIImage image;
try {
image = new MonoTouch.UIKit.UIImage(MonoTouch.Foundation.NSData.FromArray(data));
} catch (Exception e) {
Console.WriteLine ("Image load failed: " + e.Message);
return null;
}
return image;
}
}
}
An update from the Xamarin Media Plugin allows you to resize the image
https://github.com/jamesmontemagno/MediaPlugin
... barring that, and you need a more generic resize option (say the image comes from a web call, and not the device, then have a look at:
https://github.com/InquisitorJax/Wibci.Xamarin.Images
I'm trying to make a image editor in Flex 4.5.
However, there's one little thing that doesn't work as appropriate. Here's my code:
private function returnCropIndicatorBmpDataForTopLeft():BitmapData{
var topLeftX:int = 0;
var topLeftY:int = 0;
var topRightX:int = _bmpData.width;
var topRightY:int = 0;
var bottomRightX:int = _bmpData.width;
var bottomRightY:int = _bmpData.height;
var bottomLeftX:int = 0;
var bottomLeftY:int = _bmpData.height;
var cropIconX:int = _mouseX;
var cropIconY:int = _mouseY;
var temporaryBitmapData:BitmapData = _bmpData;
var originalColor:uint;
var dimmedColor:uint = 0x202020;
for (var i:int = 0; i < _bmpData.width; i++)
{
for (var j:int = 0; j < _bmpData.height; j++)
{
originalColor = _bmpData.getPixel(i,j);
if(i>cropIconX && j>cropIconY){
temporaryBitmapData.setPixel(i,j,originalColor);
}else{
temporaryBitmapData.setPixel(i,j,dimmedColor);
}
}
}
/*
*by the end of this loop, we have, in the temporaryBitmapData variable, a version of the _bmpData,
*the area to be cropped out dimmed a little bit.
*/
return temporaryBitmapData;
}
if you look carefully inside the first if statement in the innermost for loop,
temporaryBitmapData.setPixel(i,j,originalColor);
that bit of code should do the following:
If this (i,j) pixel is outside of the "to-be-cropped-out area", then repaint it with the original pixel color.
It just can't seem to get that to work!!!!
I've substituted that line with some hardcoded value (say, 0xFFFFFF for white) and it did work, so the problem is not there....
Hope you guys can help me out I've spent more than 4 hours on this already trying many different approaches!!
P.S.> I debugged this code in FB 4.5 and placed a breakpoint in that very if statement. For some reason, the _bmpData variable, which is where I want to get the original pixel color from , shows a small red square next to it.... Perhaps that is indicative of something.. perhaps it's somehow thread-'locked'?? I don't know, hope someone can figure out!
EDIT the problem I'm having is the following: the dimming of the image works fine, but if I then move the mouse cursor back to an area that got dimmed out, then the original image doesn't get repainted, as expected.
There must be something else going on there... I just tested your code and it worked fine for me.
package {
import flash.display.MovieClip;
import flash.display.BitmapData;
import flash.display.Bitmap;
import flash.net.*;
import flash.display.Loader;
import flash.events.Event;
public class ImageCropper extends MovieClip {
protected var _bmpData:BitmapData;
protected var _mouseX:int;
protected var _mouseY:int;
var imageLoader:Loader;
public function ImageCropper() {
_mouseX = 80;
_mouseY = 50;
imageLoader = new Loader();
var image:URLRequest = new URLRequest("http://www.travelooce.com/pics/bear_picnic_table.jpg");
imageLoader.load(image);
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, _imageLoaded);
imageLoader.x = 0;
imageLoader.y = 0;
}
public function _imageLoaded($evt:Event):void {
_bmpData = new BitmapData(imageLoader.width, imageLoader.height, false);
_bmpData.draw(imageLoader);
var bmp2:BitmapData = returnCropIndicatorBmpDataForTopLeft();
var bmp:Bitmap = new Bitmap(bmp2);
addChild(bmp);
}
private function returnCropIndicatorBmpDataForTopLeft():BitmapData{
var topLeftX:int = 0;
var topLeftY:int = 0;
var topRightX:int = _bmpData.width;
var topRightY:int = 0;
var bottomRightX:int = _bmpData.width;
var bottomRightY:int = _bmpData.height;
var bottomLeftX:int = 0;
var bottomLeftY:int = _bmpData.height;
var cropIconX:int = _mouseX;
var cropIconY:int = _mouseY;
// This is the important line to change.
var temporaryBitmapData:BitmapData = _bmpData.clone();
var originalColor:uint;
var dimmedColor:uint = 0x202020;
for (var i:int = 0; i < _bmpData.width; i++)
{
for (var j:int = 0; j < _bmpData.height; j++)
{
originalColor = _bmpData.getPixel(i,j);
if(i>cropIconX && j>cropIconY){
temporaryBitmapData.setPixel(i,j,originalColor);
}else{
temporaryBitmapData.setPixel(i,j,dimmedColor);
}
}
}
/*
*by the end of this loop, we have, in the temporaryBitmapData variable, a version of the _bmpData,
*the area to be cropped out dimmed a little bit.
*/
return temporaryBitmapData;
}
}
}
Output:
http://cl.ly/3d0h023C1p392O270I2L
Hi i am trying to show my popup on the image mouse over
it is showing fine
when i trying mouse over right side last images popup is going out of the screen
Here TalentInfoPopUp is **TitleWindow
This is my sample code
private static var staticWindow :TalentInfoPopUp = null;
private static var visibleWindow:TalentInfoPopUp = null;
public static function show(t:Object, parent : DisplayObject, x:Number , y:Number):void
{
if(staticWindow == null)
{
visibleWindow = staticWindow = PopUpManager.createPopUp( parent , TalentInfoPopUp , false) as TalentInfoPopUp;
}
else if(visibleWindow == null)
{
visibleWindow = staticWindow;
PopUpManager.addPopUp(staticWindow, parent, false);
}
PopUpManager.centerPopUp(staticWindow);
staticWindow.talent = t;
staticWindow.x = x;
staticWindow.y =y;
PopUpManager.bringToFront(staticWindow);
staticWindow.talent = t;
staticWindow.move(x,y);
staticWindow.callLater(staticWindow.setPosition,[x,y]);
//staticWindow.setPosition(x,y);
}
private function setPosition(nx:int,ny:int):void
{
var maxWidth:int = stage.width ;
var maxHeight:int = stage.height;
if(nx>maxWidth-width)
{
nx=nx-width;
}
if(ny>maxHeight-height)
{
ny=ny-height;
}
this.move(nx,ny);
}
Try using systemManager.screen.width and systemManager.screen.height instead of stage.width and stage.height; also learn about the localToGlobal and globalToLocal methods and how to use them.