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();
}
Related
I am writing a spatial shader in godot to pixelate an object.
Previously, I tried to write outside of an object, however that is only possible in CanvasItem shaders, and now I am going back to 3D shaders due rendering annoyances (I am unable to selectively hide items without using the culling mask, which being limited to 20 layers is not an extensible solution.)
My naive approach:
Define a pixel "cell" resolution (ie. 3x3 real pixels)
For each fragment:
If the entire "cell" of real pixels is within the models draw bounds, color the current pixel as per the lower-left (where the pixel that has coordinates that are the multiple of the cell resolution).
If any pixel of the current "cell" is out of the draw bounds, set alpha to 1 to erase the entire cell.
psuedo-code for people asking for code of the likely non-existant functionality that I am seeking:
int cell_size = 3;
fragment {
// check within a cell to see if all pixels are part of the object being drawn to
for (int y = 0; y < cell_size; y++) {
for (int x = 0; x < cell_size; x++) {
int erase_pixel = 0;
if ( uv_in_model(vec2(FRAGCOORD.x - (FRAGCOORD.x % x), FRAGCOORD.y - (FRAGCOORD.y % y))) == false) {
int erase_pixel = 1;
}
}
}
albedo.a = erase_pixel
}
tl;dr, is it possible to know if any given point will be called by the fragment function?
On your object's material there should be a property called Next Pass. Add a new Spatial Material in this section, open up flags and check transparent and unshaded, and then right-click it to bring up the option to convert it to a Shader Material.
Now, open up the new Shader Material's Shader. The last process should have created a Shader formatted with a fragment() function containing the line vec4 albedo_tex = texture(texture_albedo, base_uv);
In this line, you can replace "texture_albedo" with "SCREEN_TEXTURE" and "base_uv" with "SCREEN_UV". This should make the new shader look like nothing has changed, because the next pass material is just sampling the screen from the last pass.
Above that, make a variable called something along the lines of "pixelated" and set it to the following expression:
vec2 pixelated = floor(SCREEN_UV * scale) / scale; where scale is a float or vec2 containing the pixel size. Finally replace SCREEN_UV in the albedo_tex definition with pixelated.
After this, you can have a float depth which samples DEPTH_TEXTURE with pixelated like this:
float depth = texture(DEPTH_TEXTURE, pixelated).r;
This depth value will be very large for pixels that are just trying to render the background onto your object. So, add a conditional statement:
if (depth > 100000.0f) { ALPHA = 0.0f; }
As long as the flags on this new next pass shader were set correctly (transparent and unshaded) you should have a quick-and-dirty pixelator. I say this because it has some minor artifacts around the edges, but you can make scale a uniform variable and set it from the editor and scripts, so I think it works nicely.
"Testing if a pixel is modifiable" in your case means testing if the object should be rendering it at all with that depth conditional.
Here's the full shader with my modifications from the comments
// NOTE: Shader automatically converted from Godot Engine 3.4.stable's SpatialMaterial.
shader_type spatial;
render_mode blend_mix,depth_draw_opaque,cull_back,unshaded;
//the size of pixelated blocks on the screen relative to pixels
uniform int scale;
void vertex() {
}
//vec2 representation of one used for calculation
const vec2 one = vec2(1.0f, 1.0f);
void fragment() {
//scale SCREEN_UV up to the size of the viewport over the pixelation scale
//assure scale is a multiple of 2 to avoid artefacts
vec2 pixel_scale = VIEWPORT_SIZE / float(scale * 2);
vec2 pixelated = SCREEN_UV * pixel_scale;
//truncate the decimal place from the pixelated uvs and then shift them over by half a pixel
pixelated = pixelated - mod(pixelated, one) + one / 2.0f;
//scale the pixelated uvs back down to the screen
pixelated /= pixel_scale;
vec4 albedo_tex = texture(SCREEN_TEXTURE,pixelated);
ALBEDO = albedo_tex.rgb;
ALPHA = 1.0f;
float depth = texture(DEPTH_TEXTURE, pixelated).r;
if (depth > 10000.0f)
{
ALPHA = 0.0f;
}
}
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 tweaked https://github.com/daCapricorn/ArcMenu library to make it work from my purpose and that is working fine. Is there anyway I can build a menu like as in tumblr app or is it possible by tweaking the ArcMenu project or https://github.com/siyamed/android-satellite-menu ? I have doubts on the mathematical functions to be applied to create the style.
I am looking for a animation similar to tumblr app's animation.
try to use , Arc Menu
implement RayMenu and modify RayLayout
and modify the private static AnimationcreateExpandAnimation()` method with your specific coordinate.
There are many ways I do this in iOS. In iOS we have Views similar to that of Android and we can specify coordinates (frame of view) to place them in their superview.
Assumptions :
1)Assume you have a locus i.e circle with equation x^2 + y^2 = c
( Hint : All views are on this locus i.e center of all views coincide with this circle)
2) You need select a value of C depending on the curve you need and initial point which is
(0,HEIGHT_OF_SCREEN) as stating point for placing views.
Algorithm :
int angularDisplacementBetweenEachView = 10; // distance between two views in radians
// coordinates of X button in your screen
int startPositionOfViewX = 0;
int startPositionOfViewY = HEIGHT_OF_SCREEN;
// constant to decide curve
int C = 125;
-(void) main (){ // this is generally done in view controller
for(int i = 1; i< menu_items.count; i++){
Rect position = getCoordinatesForView(menu_item.get(i),menu_item.get(i-1).rect.x,menu_item.get(i-1).rect.y);
addView(menu_item.get(i),position.x,position.y);
}
}
// method returns the coordinates (x,y) at which the view is required to be
//placed.
-(Rect)getCoordinatesForView(View currentView, int prevViewX, int prevViewY){
// convert to polar cordinates
// refer diagram
// this is also the radius of the virtual circle
float r = sqrt(pow(x,2),pow(y,2));
float theta = atan(y,x);
//r & theta are polar coordinates of previous menu item
float theta2 = (angularDisplacementBetweenEachView + r*theta)/r;
// convert back to cartesian coordinates
int x2 = r * cos (theta);
int y2 = r * sin (theta);
return new rect(x2,y2);
}
try this for Arc menu. u can use this sattelite menu
https://github.com/ketanpatel25/android-satellite-menu-center
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.
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.