Inside the UIView subclass, I override the Draw sub to draw some custom text, but the text allways is drawn as flip text.
This is the code I am using:
class TextViewProblem : UIView
{
public override void Draw (RectangleF rect)
{
base.Draw (rect);
CGContext g = UIGraphics.GetCurrentContext();
UIColor.White.SetFill();
g.SelectFont("Arial",16f,CGTextEncoding.MacRoman);
UIColor.White.SetFill();
g.SetTextDrawingMode(CGTextDrawingMode.Fill);
g.ShowTextAtPoint(1,25,"Yiannis 123");
}
}
And this is the output of this code:
Why is the text drawn flipped?
I am running:
MonoDevelop 2.4.2
iPhone Simulator 4.2
MonoTouch 3.2.6
You can download a project to reproduce this issue from this link: www.grbytes.com/downloads/TextProblem.zip
The image is flipped because the coordinate system for CoreGraphics is not the same as for UIKit, you need to apply a transformation that includes flipping around the rendering (scale by x=1, y=-1) and then translate by the height (x=0, y=height).
You do this by applying the transformation to your graphics context.
Here's code that works:
CGContext g = UIGraphics.GetCurrentContext();
UIColor.White.SetFill();
g.ScaleCTM(1f,-1f);
g.SelectFont("Arial",16f,CGTextEncoding.MacRoman);
UIColor.White.SetFill();
g.SetTextDrawingMode(CGTextDrawingMode.Fill);
g.ShowTextAtPoint(1,-50,"Yiannis 123");
Once you set the scale to -1 for Y, now your coordinate system is upside down. So (0,0) is top left, but bottom left is now (0,-480), not (0,480). So note the -50 in ShowTextAtPoint.
using (CGContext g = UIGraphics.GetCurrentContext()) {
g.ScaleCTM (1f, -1f);
g.TranslateCTM (0, -Bounds.Height);
....
This code works fine:
public override void Draw (System.Drawing.RectangleF rect)
{
base.Draw (rect);
CGContext g = UIGraphics.GetCurrentContext();
g.TranslateCTM(0,Bounds.Height);
g.ScaleCTM(1f,-1f);
g.DrawImage ..........
}
The tip is: first TranslateCTM and then ScaleCTM.
Related
I was trying to print rectangle in Codenameone.
fun showCustomForm() {
val hi = Form("", BorderLayout())
hi.add(BorderLayout.CENTER, getGreenLine())
hi.show()
}
fun getGreenLine(): Component {
return object : Component() {
override fun paint(g: Graphics) {
println("Graphics Printing starts")
g.color = 0x00ff00
g.fillRect(x, y, width, height)
}
override fun calcPreferredSize(): Dimension {
return Dimension(1, 20)
}
}
}
As showing above, the rectangle is supposed to have a width of 1 and height of 20
The height seems to be correct but the width goes across the screen.
What is the right way to display the rectangle with the correct dimension?
I've never used Kotlin, however... in this example, try to replace BorderLayout() with BorderLayout(BorderLayout.CENTER_BEHAVIOR_CENTER) to give to the component its preferred size.
In general, the layout managers can or cannot use the preferred size, see: https://www.codenameone.com/manual/basics.html
For example, FlowLayout always gives a component its preferred size; BoxLayout.y() always gives a component its preferred height, but using the maximum available width; etc.
I am trying to create a circle in itext 7 and then place this circle anywhere in I need to in the document.
The document is laid out using divs and I have managed to create the circle using a PdfCanvas.
Below is a snippet of what I am trying to achieve and there may well be a better way to do this:
PdfDocument pdfDoc = new PdfDocument(writer);
Document doc = new Document(pdfDoc);
PdfPage pdfPage = pdfDoc.addNewPage();
Div div = new Div();
div.setBackgroundColor(Color.CYAN);
div.setHeight(10.0F);
div.add(new Paragraph(" ").setFont(PdfFontFactory.createFont(FontConstants.COURIER_BOLD)));
doc.add(div);
PdfCanvas canvas = new PdfCanvas(pdfPage);
Color white = Color.WHITE;
Color black = Color.BLACK;
canvas.setColor(white, true)
.setStrokeColor(black)
.circle(15, 800, 8)
.fillStroke();
canvas.beginText()
.setFontAndSize(PdfFontFactory.createFont(FontConstants.COURIER_BOLD), 10)
.setColor(black, true)
.moveText(15 - 3, 800 - 3)
.showText("1")
.endText();
doc.close();
If there is a correct way of wrapping some text (number) in a circle that can be positioned inside a div then I will happily change to this method if someone can point me towards a tutorial or some documentation I can follow.
If anybody is looking for an easy way to do this then you can override the draw method of Div.
public class Circle extends Div
{
#Override
public IRenderer getRenderer()
{
return new CircleRenderer(this);
}
private class CircleRenderer extends DivRenderer
{
public CircleRenderer(final Circle circle)
{
super(circle);
setPadding(PADDING);
}
#Override
public void draw(final DrawContext drawContext)
{
final PdfCanvas canvas = drawContext.getCanvas();
final Rectangle area = this.occupiedArea.getBBox();
final float x = area.getX();
final float y = area.getY();
canvas.circle(x, y, 8);
canvas.fillStroke();
super.draw(drawContext);
}
}
}
After I draw the canvas I need to do some correction of the x and y positions and same for any text placed inside the circle.
Hello dear developers,
Im using xamarin (monotouch) i want to draw circle image view like google plus profile image or like otherones...
I was search on net but didnt find useful thing.
Somebody help me?
Thank you..
For your purposes you can use UIView or UIButton. With UIButton it is easier to handle touch events.
The basic idea is to create a UIButton with specific coordinates and size and set the CornerRadius property to be one half of the size of the UIButton (assuming you want to draw a circle, width and height will be the same).
Your code could look something like this (in ViewDidLoad of your UIViewController):
// define coordinates and size of the circular view
float x = 50;
float y = 50;
float width = 200;
float height = width;
// corner radius needs to be one half of the size of the view
float cornerRadius = width / 2;
RectangleF frame = new RectangleF(x, y, width, height);
// initialize button
UIButton circularView = new UIButton(frame);
// set corner radius
circularView.Layer.CornerRadius = cornerRadius;
// set background color, border color and width to see the circular view
circularView.BackgroundColor = UIColor.White;
circularView.Layer.CornerRadius = cornerRadius;
circularView.Layer.BorderColor = UIColor.Red.CGColor;
circularView.Layer.BorderWidth = 5;
// handle touch up inside event of the button
circularView.TouchUpInside += HandleCircularViewTouchUpInside;
// add button to view controller
this.View.Add(circularView);
At last implement the event handler (define this method somewhere in your UIViewController:
private void HandleCircularViewTouchUpInside(object sender, EventArgs e)
{
// initialize random
Random rand = new Random(DateTime.Now.Millisecond);
// when the user 'clicks' on the circular view, randomly change the border color of the view
(sender as UIButton).Layer.BorderColor = UIColor.FromRGB(rand.Next(255), rand.Next(255), rand.Next(255)).CGColor;
}
Xamarin.iOS is a wrapper over Cocoa Touch on UI side,
https://developer.apple.com/technologies/ios/cocoa-touch.html
So to draw circle you need to use the Cocoa Touch API, aka CoreGraphics,
http://docs.xamarin.com/videos/ios/getting-started-coregraphics/
I'm trying to draw some rotated texts by using the CGAffineTransform.MakeRotation method at specifc location. I also make use of the TranslateCTM, but something must be wrong as rotated texts do not appear aligned and at the correct x, y position where they should appear, here is simple the code I'm using, anyone know where the problem is? :
public override void Draw (RectangleF rect)
{
DrawTextRotated("Hello1",10,100,30);
DrawTextRotated("Hello2",50,100,60);
SetNeedsDisplay();
}
static public float DegreesToRadians(float x)
{
return (float) (Math.PI * x / 180.0);
}
public void DrawTextRotated(string text,int x, int y, int rotDegree)
{
CGContext c = UIGraphics.GetCurrentContext();
c.SaveState();
c.TextMatrix = CGAffineTransform.MakeRotation((float)DegreesToRadians((float)(-rotDegree)));
c.ConcatCTM(c.TextMatrix);
float xxx = ((float)Math.Sin(DegreesToRadians((float)rotDegree))*y);
float yyy = ((float)Math.Sin(DegreesToRadians((float)rotDegree))*x);
// Move the context back into the view
c.TranslateCTM(-xxx,yyy);
c.SetTextDrawingMode(CGTextDrawingMode.Fill);
c.SetShouldSmoothFonts(true);
MonoTouch.Foundation.NSString str = new MonoTouch.Foundation.NSString(text);
SizeF strSize = new SizeF();
strSize = str.StringSize(UIFont.SystemFontOfSize(12));
RectangleF tmpR = new RectangleF(x,y,strSize.Width,strSize.Height);
str.DrawString(tmpR,UIFont.SystemFontOfSize(12),UILineBreakMode.WordWrap,UITextAlignment.Right);
c.RestoreState();
}
Thanks !
Here's some code that will draw text rotated properly about the top-left corner of the text. For the moment, I'm disregarding your use of text alignment.
First, a utility method to draw a marker where we expect the text to show up:
public void DrawMarker(float x, float y)
{
float SZ = 20;
CGContext c = UIGraphics.GetCurrentContext();
c.BeginPath();
c.AddLines( new [] { new PointF(x-SZ,y), new PointF(x+SZ,y) });
c.AddLines( new [] { new PointF(x,y-SZ), new PointF(x,y+SZ) });
c.StrokePath();
}
And the code to draw the text (note I've replaced all int rotations with float, and you may want negate your rotation):
public void DrawTextRotated(string text, float x, float y, float rotDegree)
{
CGContext c = UIGraphics.GetCurrentContext();
c.SaveState();
DrawMarker(x,y);
// Proper rotation about a point
var m = CGAffineTransform.MakeTranslation(-x,-y);
m.Multiply( CGAffineTransform.MakeRotation(DegreesToRadians(rotDegree)));
m.Multiply( CGAffineTransform.MakeTranslation(x,y));
c.ConcatCTM( m );
// Draws text UNDER the point
// "This point represents the top-left corner of the string’s bounding box."
//http://developer.apple.com/library/ios/#documentation/UIKit/Reference/NSString_UIKit_Additions/Reference/Reference.html
NSString ns = new NSString(text);
UIFont font = UIFont.SystemFontOfSize(12);
SizeF sz = ns.StringSize(font);
RectangleF rect = new RectangleF(x,y,sz.Width,sz.Height);
ns.DrawString( rect, font);
c.RestoreState();
}
Rotation about a point requires translation of the point to the origin followed by rotation, followed by rotation back to the original point. CGContext.TextMatrix has no effect on NSString.DrawString so you can just use ConcatCTM.
The alignment and line break modes don't have any effect. Since you're using NSString.StringSize, the bounding rectangle fits the entirety of the text, snug up against the left and right edges. If you make the width of the bounding rectangle wider and use UITextAlignment.Right, you'll get proper right alignment, but the text will still rotate around the top left corner of the entire bounding rectangle. Which is not, I'm guessing, what you're expecting.
If you want the text to rotate around the top right corner, let me know and I'll adjust the code accordingly.
Here's the code I used in my test:
DrawTextRotated("Hello 0",100, 50, 0);
DrawTextRotated("Hello 30",100,100,30);
DrawTextRotated("Hello 60",100,150,60);
DrawTextRotated("Hello 90",100,200,90);
Cheers.
I'm using the ShowTextAtPoint method of CGContext to display a Text in a view, but it is displayed in flip mode, anyone knows how to solve this problem ?
Here is the code I use :
ctx.SelectFont("Arial", 16f, CGTextEncoding.MacRoman);
ctx.SetRGBFillColor(0f, 0f, 1f, 1f);
ctx.SetTextDrawingMode(CGTextDrawingMode.Fill);
ctx.ShowTextAtPoint(centerX, centerY, text);
You can manipulate the current transformation matrix on the graphics context to flip it using ScaleCTM and TranslateCTM.
According to the Quartz 2D Programming Guide - Text:
In iOS, you must apply a transform to the current graphics context in order for the text to be oriented as shown in Figure 16-1. This transform inverts the y-axis and translates the origin point to the bottom of the screen. Listing 16-2 shows you how to apply such transformations in the drawRect: method of an iOS view. This method then calls the same MyDrawText method from Listing 16-1 to achieve the same results.
The way this looks in MonoTouch:
public void DrawText(string text, float x, float y)
{
// the incomming coordinates are origin top left
y = Bounds.Height-y;
// push context
CGContext c = UIGraphics.GetCurrentContext();
c.SaveState();
// This technique requires inversion of the screen coordinates
// for ShowTextAtPoint
c.TranslateCTM(0, Bounds.Height);
c.ScaleCTM(1,-1);
// for debug purposes, draw crosshairs at the proper location
DrawMarker(x,y);
// Set the font drawing parameters
c.SelectFont("Helvetica-Bold", 12.0f, CGTextEncoding.MacRoman);
c.SetTextDrawingMode(CGTextDrawingMode.Fill);
c.SetFillColor(1,1,1,1);
// Draw the text
c.ShowTextAtPoint( x, y, text );
// Restore context
c.RestoreState();
}
A small utility function to draw crosshairs at the desired point:
public void DrawMarker(float x, float y)
{
float SZ = 20;
CGContext c = UIGraphics.GetCurrentContext();
c.BeginPath();
c.AddLines( new [] { new PointF(x-SZ,y), new PointF(x+SZ,y) });
c.AddLines( new [] { new PointF(x,y-SZ), new PointF(x,y+SZ) });
c.StrokePath();
}