How drawing a circle in TuniCanvas?

[erich.wanker]

Hello folks,

 

i want to draw a circle in a uniCanvas ... but following code doesn´t work ?

 

    aktuell_uniCanvas:=TuniCanvas.Create(self);
    aktuell_uniCanvas.Parent:=aktuell_panel;
    aktuell_uniCanvas.Left:=1;
    aktuell_uniCanvas.Top:=1;
    aktuell_uniCanvas.Width:=20;
    aktuell_uniCanvas.Height:=20;
    aktuell_uniCanvas.Pen.Color := clred;
    aktuell_uniCanvas.Brush.Color := clred;
    aktuell_uniCanvas.BitmapCanvas.Ellipse(1,1,20,20);
    or
    aktuell_uniCanvas.Cirlcle(1,1,10);

.. How can i draw a circle?

 

ThanX

Erich

[Sherzod]

Hi Erich. 

 

I think there need to add little time delay and use javascript   

 

Try:

    aktuell_uniCanvas:=TuniCanvas.Create(self);
    aktuell_uniCanvas.Parent:=aktuell_panel;
    aktuell_uniCanvas.Left:=1;
    aktuell_uniCanvas.Top:=1;
    aktuell_uniCanvas.Width:=20;
    aktuell_uniCanvas.Height:=20;
    aktuell_uniCanvas.Pen.Color := clred;
    aktuell_uniCanvas.Brush.Color := clred;    
    
    //code below does not have time, but can be used anywhere in the code after creating canvas   
    //aktuell_uniCanvas.Cirlcle(1,1,10);   
    
    //use   
    UniSession.AddJS('setTimeout('''+ aktuell_uniCanvas.JSName + '.circle(1,1,10)'', 50);');

Rectangle:
aktuell_uniCanvas.Rectangle(10,10,100,100);
=
UniSession.AddJS('setTimeout('''+ aktuell_uniCanvas.JSName + '.rect(10,10,110,110)'', 50);');

... 

Sincerely.

[andyhill]

How do we draw:-

Arc

Polyline

Polygon

Ellipse

etc.

[Sherzod]

Hello,

Have you seen this demo for example?:

\FMSoft\Framework\uniGUI\Demos\Desktop\CanvasDemo

[andyhill]

Why would you say such a thing when CanvasDemo does not contain :-

Arc

PolyLine

PolyGon

Plus UniCanvas1.BitmapCanvas.Ellipse  does not exist in 6.6.0 as far as I can tell ?

Also UniCanvas1.SaveToFile('files\temp.jpg', tiJPG); does not save a valid image ?

[Sherzod]

34 minutes ago, andyhill said:

Why would you say such a thing when CanvasDemo does not contain :- 

Sorry, well, there is an Ellipse that you indicated )

For others I will analyze and let you know

 

[andyhill]

Sherzod, We need canvas drawing in both Desktop and Mobile.

Line, Rectangle (flood fill) and Circle (flood fill) appear to be there.

We need polygon (flood fill), Ellipse (flood fill) and Arc.

Polyline via a work around is possible but a true PolyLine function would be better.

Never got to test Text but that goes without saying.

We need SaveToFile and SaveToStream to work.

Scaling too.

[Sherzod]

Hi,

To start, I will try to give here gradually, JS functions for these features...

[andyhill]

Thank you, I look forward to the answers

[Sherzod]

Arc (also you can use UniCanvas.BitmapCanvas.Arc)

1. UniCanvas -> ClientEvents -> ExtEvents ->  function afterrender:

function afterrender(sender, eOpts) 
{
    sender.arc = function(x, y, r, sAngle, eAngle, counterClockWise) {
        if (this._cc_) {
            this._cc_.beginPath();
            this._cc_.arc(x, y, r, sAngle, eAngle, counterClockWise);
            this._cc_.fillStyle = this.brushColor;
            this._cc_.fill();
            this._cc_.lineWidth = this.lineWidth;
            this._cc_.strokeStyle = this.strokeStyle;
            this._cc_.stroke();
            this._cc_.closePath()
        }
    }
}

2.

procedure TMainForm.UniButton1Click(Sender: TObject);
var
  X1, Y1, R: Integer;
  sAngle, eAngle: Double;
  counterClockWise: Boolean;
begin
  Randomize;

  X1:=Random(Width div 2);
  Y1:=Random(Height div 2);
  R:=Random(Width div 4);

  sAngle := 0;
  eAngle := RandomRange(10, 200 + 1) * 0.01 * System.Pi;

  counterClockWise := Boolean(Random(2));

  UniCanvas1.Pen.Color:=Random($FFFFFF);
  UniCanvas1.Brush.Color:=Random($FFFFFF);

  UniCanvas1.JSInterface.JSCall(
    'arc',
    [
      X1,
      Y1,
      R,
      sAngle,
      eAngle,
      counterClockWise
    ]
  );

end;

 

[andyhill]

Arc 

[Sherzod]

Polygon (also you can use UniCanvas.BitmapCanvas.Polygon)

procedure TMainForm.UniButton1Click(Sender: TObject);
begin

  UniCanvas1.Pen.Color:=Random($FFFFFF);
  UniCanvas1.Brush.Color:=Random($FFFFFF);

  with UniCanvas1.JSInterface do
  begin
    // beginPath
    JSCode(#1'._cc_.beginPath();');

    // lines...
    JSCode(#1'._cc_.lineTo(10, 10);');
    JSCode(#1'._cc_.lineTo(125, 50);');
    JSCode(#1'._cc_.lineTo(50, 125);');
    JSCode(#1'._cc_.lineTo(10, 90);');

    // closePath, fillStyle and fill
    JSCode('var ctx='#1'._cc_; if (ctx) {ctx.closePath(); ctx.fillStyle='#1'.brushColor; ctx.fill()};');

  end;

end;

 

[andyhill]

Polygon 

[Sherzod]

What else do we need to do ?!

[andyhill]

Ellipse and Text.

I think off memory you have shown canvas text out in another post.

This must all work on Mobile.

[andyhill]

Sherzod, Where is the TUnimCanvas ???

[Sherzod]

Unfortunately not implemented yet

[andyhill]

How can we draw on any mobile object canvas ?

Please give me something to work with.

[Sherzod]

We will try to give you a "solution",

Although on the forum, there was an approximate implementation of the canvas:

 

[andyhill]

The above reference is to Touch (as you know we are now 6.6.0) with other forum users saying it does not work. (They use a Desktop Canvas in a Mobile project which no longer compiles).

As an interim, how can we use TUnimImage.

   Image: TUnimImage; // Contains Image URL (Parent is Panel)

...

procedure TMainmForm.UnimFormReady(Sender: TObject);
begin
  UniSession.AddJS('ajaxRequest(MainmForm.Panel, "_Draw", []);');
end;

procedure TMainmForm.PanelAjaxEvent(Sender: TComponent; EventName: string; Params: TUniStrings);
begin
  if EventName = '_Draw' then begin
    Image.Picture.Bitmap.Canvas.Lock;
    Image.Picture.Bitmap.Canvas.Pen.Width:= 4;
    Image.Picture.Bitmap.Canvas.Pen.Color:= clBlack; 
    Image.Picture.Bitmap.Canvas.MoveTo(10, 10);
    Image.Picture.Bitmap.Canvas.LineTo(20, 20);
    Image.Picture.Bitmap.Canvas.UnLock;
  end;
end;

Running on Desktop line fails to show ?
Running on Mobile project times out, does not run.