I am trying to draw a diagonal line in my Xamarin.iOS app using the graphics context in my UIView:
public override void Draw(CGRect rect)
{
base.Draw(rect);
using (var gctx = UIGraphics.GetCurrentContext())
{
var path = new CGPath();
path.AddLineToPoint(rect.Width, rect.Size.Height);
gctx.AddPath(path);
gctx.SetLineWidth(5);
gctx.SetFillColor(UIColor.Red.CGColor);
gctx.FillPath();
gctx.DrawPath(CGPathDrawingMode.FillStroke);
}
}
I expect to see a red diagonal line, but I don't see anything?
Solution:
You can achieve that via the code like the below code snippet:
public override void Draw(CGRect rect)
{
base.Draw(rect);
using (var gctx = UIGraphics.GetCurrentContext())
{
gctx.SetStrokeColor(UIColor.Red.CGColor);
gctx.SetLineWidth(2.0f);
gctx.MoveTo(0, 0);
gctx.AddLineToPoint(rect.Width, rect.Height);
gctx.StrokePath();
}
}
It works like this:
Related
I want to draw with one finger on a UIImageView-Control with Xamarin iOS.
What I found:
First
Second
This two examples won't work properly because with the first link there are the following problems:
I have to use two fingers for drawing, but I want to use only one Finger (don´t be confused with the pictures, I have to use two fingers to active the touch function)
The positioning is wrong I guess the problems relies on due to wrong scaling (see the attached pictures)
This is the code I currently have:
public partial class DetailImageView : UIImageView
{
DetailImageViewController ctrl;
public DetailImageView (IntPtr handle) : base (handle)
{
}
public void Initialize(DetailImageViewController rootController)
{
ctrl = rootController;
}
public override void TouchesBegan(NSSet touches, UIEvent evt)
{
base.TouchesBegan(touches, evt);
UITouch touch = touches.AnyObject as UITouch;
drawOnTouch(touch);
//DrawLineOnImage();
}
public override void TouchesMoved(NSSet touches, UIEvent evt)
{
base.TouchesMoved(touches, evt);
UITouch touch = touches.AnyObject as UITouch;
drawOnTouch(touch);
//DrawLineOnImage();
}
private void drawOnTouch(object data)
{
UITouch touch = data as UITouch;
if (null != touch)
{
UIGraphics.BeginImageContext(this.Image == null ? this.Frame.Size : this.Image.Size);
//UIGraphics.BeginImageContext(this.Frame.Size);
using (CoreGraphics.CGContext cont = UIGraphics.GetCurrentContext())
{
if (this.Image != null)
{
cont.TranslateCTM(0f, this.Image.Size.Height);
cont.ScaleCTM(1.0f, -1.0f);
cont.DrawImage(new RectangleF(0f, 0f, Convert.ToSingle(this.Image.Size.Width)
, Convert.ToSingle(this.Image.Size.Height)), this.Image.CGImage);
cont.ScaleCTM(1.0f, -1.0f);
cont.TranslateCTM(0f, -this.Image.Size.Height);
} //end if
CGPoint lastLocation = touch.PreviousLocationInView(this);
CGPoint pt = touch.LocationInView(this);
using (CGPath path = new CGPath())
{
cont.SetLineCap(CGLineCap.Round);
cont.SetLineWidth(10);
cont.SetStrokeColor(0, 2, 3, 1);
var xMultiplier = Image.Size.Height / Frame.Height;
var yMultiplier = Image.Size.Width / Frame.Width;
var xLoc = lastLocation.X * xMultiplier;
var yLoc = lastLocation.Y * yMultiplier;
path.MoveToPoint(xLoc, yLoc);
path.AddLines(new CGPoint[] { new CGPoint(xLoc,
yLoc),
new CGPoint(pt.X * xMultiplier, pt.Y * yMultiplier) });
path.CloseSubpath();
cont.AddPath(path);
cont.DrawPath(CGPathDrawingMode.FillStroke);
this.Image = UIGraphics.GetImageFromCurrentImageContext();
}//end using path
}//end using cont
UIGraphics.EndImageContext();
this.SetNeedsDisplay();
}//end if
}//end void drawOnTouch
}
The positioning is wrong I guess the problems relies on due to wrong
scaling
Because when we use the image, the image's size is usually different from the UIImageView's size. You use the image's size to draw paths, so it will miss its position. Try to modify like this:
if (null != touch)
{
UIGraphics.BeginImageContext(this.Frame.Size);
using (CoreGraphics.CGContext cont = UIGraphics.GetCurrentContext())
{
if (this.Image != null)
{
cont.TranslateCTM(0f, this.Frame.Size.Height);
cont.ScaleCTM(1.0f, -1.0f);
cont.DrawImage(new RectangleF(0f, 0f, Convert.ToSingle(this.Frame.Size.Width)
, Convert.ToSingle(this.Frame.Size.Height)), this.Image.CGImage);
cont.ScaleCTM(1.0f, -1.0f);
cont.TranslateCTM(0f, -this.Frame.Size.Height);
} //end if
CGPoint lastLocation = touch.PreviousLocationInView(this);
CGPoint pt = touch.LocationInView(this);
using (CGPath path = new CGPath())
{
cont.SetLineCap(CGLineCap.Round);
cont.SetLineWidth(10);
cont.SetStrokeColor(0, 2, 3, 1);
var xLoc = lastLocation.X;
var yLoc = lastLocation.Y;
path.MoveToPoint(xLoc, yLoc);
path.AddLines(new CGPoint[] { new CGPoint(xLoc,
yLoc),
new CGPoint(pt.X, pt.Y) });
path.CloseSubpath();
cont.AddPath(path);
cont.DrawPath(CGPathDrawingMode.FillStroke);
this.Image = UIGraphics.GetImageFromCurrentImageContext();
}//end using path
}//end using cont
UIGraphics.EndImageContext();
this.SetNeedsDisplay();
}//end if
About
I have to use two fingers for drawing, but I want to use only one
Finger
What do you mean this? The code can be used drawing paths with only finger.
I implement a Xamarin.Forms control. The problem I'm currently experiancing is that an overridden Draw() method of a custom renderer blocks UI (at least for iOS platform). I've googled but with no success. Is is possible to perform the drawing in a background without blocking the UI?
Here is the code of a simple renderer for iOS platform that that demonstrates the issue.
public class MyCustomRenderer : ViewRenderer
{
protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
SetNeedsDisplay();
}
public override void Draw(CoreGraphics.CGRect rect)
{
var myControl = (MyControl)this.Element;
if (!myControl.IsRendered)
{
using (var context = UIGraphics.GetCurrentContext())
{
var token = CancellationToken.None;
var task = Task.Factory.StartNew(() => TimeConsumingRendering(context, token), token);
// task.Wait() blocks the UI but draws the desired graphics.
// When task.Wait() is commented out = the desired graphics doesn't get drawn and it doesn't block the UI
task.Wait();
}
}
}
private void TimeConsumingRendering(CGContext context, CancellationToken token)
{
try
{
for (int i = 0; i <= 100; i++)
{
token.ThrowIfCancellationRequested();
var delay = Task.Delay(50);
delay.Wait();
}
context.ScaleCTM(1f, -1f);
context.TranslateCTM(0, -Bounds.Height);
context.SetTextDrawingMode(CGTextDrawingMode.FillStroke);
context.SelectFont("Helvetica-Bold", 16f, CGTextEncoding.MacRoman);
context.SetFillColor(new CoreGraphics.CGColor(1f, 0f, 0f));
context.ShowTextAtPoint(0, 0, "Finished");
}
catch
{ }
}
}
Looks like that the only solution for that is to separate the time consuming drawing and drawing on the actual control.
The solution is
to generate an image in a background(triggered by an event). and only than use it within the Draw method.
to use the generated image within the overridden Draw method.
At least it works for me.
How do I print in monomac? This is as far as I can get, but I can't seem to get a reference to the graphics context in the NSView. If I add a control to the PrintDoc that's fine, but I want to draw.
//Print Function
void Print(){
PrintDoc NewDoc = new PrintDoc ();
NewDoc.SetFrameSize(new SizeF(600,1000));
NSPrintOperation P = NSPrintOperation.FromView (NewDoc);
P.RunOperation ();
}
//NSView to be printed
class PrintDoc:NSView
{
public PrintDoc ()
{
}
public override void DrawRect (System.Drawing.RectangleF dirtyRect)
{
//NSPrintOperation.CurrentOperation.Context !! this is null
//NSGraphicsContext.CurrentContext !! this hangs
}
}
I've managed to get it working by getting the context manually, instead of using NSGraphicsContext.CurrentContext:
https://github.com/picoe/Eto/blob/feature/printing/Source/Eto.Platform.Mac/Forms/Printing/PrintDocumentHandler.cs#L39
Snippet:
static IntPtr selCurrentContext = Selector.GetHandle ("currentContext");
static IntPtr classNSGraphicsContext = Class.GetHandle ("NSGraphicsContext");
public override void DrawRect (System.Drawing.RectangleF dirtyRect)
{
var operation = NSPrintOperation.CurrentOperation;
var context = new NSGraphicsContext(Messaging.IntPtr_objc_msgSend (classNSGraphicsContext, selCurrentContext));
// this causes monomac to hang for some reason:
//var context = NSGraphicsContext.CurrentContext;
}
I'm using MonoDevelop and xamarin for creating iOS application.
I have a view which looks like this:
public class MyView: UIView
{
private Timer _t = new Timer(1000);
private int _i = 0;
public MyView()
{
_t.Elapsed += (sender, e) => {
_i = (_i + 1) % 100;
this.Draw(new Rectangle(0, 0, 110, 110));
};
_t.Enabled = true;
}
public override void Draw(RectangleF rect)
{
base.Draw(rect);
var uiImage = UIImage.FromFile("myImage");
var uiImageView = new UIIMageView(new Rectangle(_i, 0, 10, 10));
uiImageView.Image = uiImage;
AddSubView(uiIMageView);
}
}
I expect that my image will move. But as a result I've only initial static image. Can anybody suggest approach how to do animation like described?
I would suggest modifying your code like so:
public MyView()
{
var uiImage = UIImage.FromFile("myImage");
var uiImageView = new UIIMageView(new Rectangle(0, 0, 10, 10));
uiImageView.Image = uiImage;
AddSubView(uiIMageView);
_t.Elapsed += (sender, e) => {
_i = (_i + 1) % 100;
this.Draw(new Rectangle(_i, 0, 110, 110));
};
_t.Enabled = true;
}
public override void Draw(RectangleF rect)
{
base.Draw(rect);
InvokeOnMainThread(()=>{
uiImageView.Frame = rect;
});
}
I think part of your issue was that the timer Elapsed handler runs on a separate thread than the main UI Thread. Also you it'll be more efficient to not recreate the UIImageView each time.
Simple concept: I have a custom UIView which draws a path (series of lines). These lines are defined by the user via touches. After a touch, I want the Draw method to redraw the updated path/lines. Code:
Here is my custom UIView called "Renderer":
public partial class Renderer : MonoTouch.UIKit.UIView
{
enum eClickMode
{
BeginPoint,
ControlPoint,
EndPoint
}
eClickMode _ClickMode = eClickMode.BeginPoint;
CGPath _Path = new CGPath();
PointF _ControlPoint, _EndPoint;
UIImage _ImageRough;
UIColor _Rough;
public Renderer (IntPtr ptr)
{
_ImageRough = new UIImage("/Users/general/Desktop/deeprough.jpg");
_Rough = UIColor.FromPatternImage(_ImageRough);
UIColor.Black.SetStroke();
// Set initial path to make sure something gets drawn
_Path = new CGPath();
_Path.MoveToPoint(100, 100);
_Path.AddQuadCurveToPoint(200, 200, 100, 300);
}
public override void Draw (RectangleF rect)
{
base.Draw (rect);
CGContext gfx = UIGraphics.GetCurrentContext();
_Rough.SetFill();
gfx.SetLineWidth(0);
gfx.AddPath(_Path);
gfx.DrawPath(CGPathDrawingMode.FillStroke);
}
public override void TouchesEnded (NSSet touches, UIEvent evt)
{
base.TouchesEnded (touches, evt);
UITouch touch = touches.ToArray<UITouch>()[0];
PointF pt = touch.LocationInView(this);
switch (_ClickMode)
{
case Renderer.eClickMode.BeginPoint:
_Path.MoveToPoint(pt);
_ClickMode = Renderer.eClickMode.ControlPoint;
break;
case eClickMode.ControlPoint:
_ControlPoint = pt;
_ClickMode = Renderer.eClickMode.EndPoint;
break;
case eClickMode.EndPoint:
_EndPoint = pt;
_Path.AddQuadCurveToPoint(_ControlPoint.X, _ControlPoint.Y, _EndPoint.X, _EndPoint.Y);
_Path.MoveToPoint(_EndPoint);
this.SetNeedsDisplay();
break;
}
}
}
Here is my MainWindow.Designer code:
[MonoTouch.Foundation.Register("AppDelegate")]
public partial class AppDelegate {
private MonoTouch.UIKit.UIWindow __mt_window;
private Renderer __mt_renderer;
#pragma warning disable 0169
[MonoTouch.Foundation.Connect("window")]
private MonoTouch.UIKit.UIWindow window {
get {
this.__mt_window = ((MonoTouch.UIKit.UIWindow)(this.GetNativeField("window")));
return this.__mt_window;
}
set {
this.__mt_window = value;
this.SetNativeField("window", value);
}
}
[MonoTouch.Foundation.Connect("renderer")]
private Renderer renderer {
get {
this.__mt_renderer = ((Renderer)(this.GetNativeField("renderer")));
return this.__mt_renderer;
}
set {
this.__mt_renderer = value;
this.SetNativeField("renderer", value);
}
}
}
// Base type probably should be MonoTouch.UIKit.UIView or subclass
[MonoTouch.Foundation.Register("Renderer")]
public partial class Renderer {
}
I know for sure that in the TouchesEnded method, this.SetNeedsDisplay() is getting hit. But the Draw method only gets called initially.
I've seen other threads indicating a similar problem in Objective-C, but the solution seems to always be about threading. Well, I'm not threading (at least I'm not trying to anyway). This seems like a simple concept (and it is in .Net). Any help is GREATLY appreciated.
You aren't calling the correct base constructor on your UIView subclass, you have:
public Renderer (IntPtr ptr)
You want
public Renderer (IntPtr ptr) : base (ptr)