Jump to content

How drawing a circle in TuniCanvas?


erich.wanker

Recommended Posts

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

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

  • 4 years later...

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 ?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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;

 

  • Like 1
Link to comment
Share on other sites

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;

 

  • Like 1
Link to comment
Share on other sites

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.

 

 

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...