Jump to content

Function that will allow the user to draw freely with Unigui (Paint)


pro_imaj

Recommended Posts

5 hours ago, Sherzod said:

Hello, 

How about a demo example that uses canvas?

It would be very useful, if you know anything, I would be very happy if you share it.

*I reviewed Unigui's own demos.

i want to do
-Drawing in different colors
-Adding some simple shapes
-Add and scale images
-Save the action as a picture

Link to comment
Share on other sites

As long as you do not need mouse move data, you can solve it all in Unigui. Like creating objects and placing them, or creating a line between two points, as you then only need to catch mousedown/up events.

But if you want to draw freehand lines, then you need mouse move data, which cannot be sent to the server as it is just too much, so it has to be solved in the client using JS.

Mouse move data is the red line, and if you do not need to cross it, things will be easier.

  • Like 1
Link to comment
Share on other sites

5 hours ago, Ron said:

As long as you do not need mouse move data, you can solve it all in Unigui. Like creating objects and placing them, or creating a line between two points, as you then only need to catch mousedown/up events.

But if you want to draw freehand lines, then you need mouse move data, which cannot be sent to the server as it is just too much, so it has to be solved in the client using JS.

Mouse move data is the red line, and if you do not need to cross it, things will be easier.

Is there a sample application on this subject has been done and shared before.

This is not the main topic of my project but I need something like this in some part.

Link to comment
Share on other sites

Attached is a sample application to give you an idea, for simple freehand drawing, based on this JS in an HTMLFrame:

<canvas id="mycanvas" width="1200" height="500" style="border:1px solid #000000;">
<script type="text/javascript">

var canvas = $('#mycanvas')[0];
var ctx = canvas.getContext("2d");
var mDown = false; 
var X, Y, oldX, oldY = 0;
  
function relMouseCoords(event){
    var totalOffsetX = 0;
    var totalOffsetY = 0;
    var canvasX = 0;
    var canvasY = 0;
    var currentElement = this;
    do{
        totalOffsetX += currentElement.offsetLeft - currentElement.scrollLeft;
        totalOffsetY += currentElement.offsetTop - currentElement.scrollTop;
    }
    while(currentElement = currentElement.offsetParent);
    canvasX = event.pageX - totalOffsetX;
    canvasY = event.pageY - totalOffsetY;
    return {x:canvasX, y:canvasY}
}  
HTMLCanvasElement.prototype.relMouseCoords = relMouseCoords;

$("#mycanvas").mousemove(function(event){
   event.stopPropagation(); 
   if(mDown){
   coords = canvas.relMouseCoords(event);
   X = coords.x;
   Y = coords.y;
   ctx.moveTo(oldX, oldY);
   ctx.lineTo(X, Y); 
   ctx.stroke();
   oldX = X;
   oldY = Y;
   }	 
});

$("#mycanvas").mousedown(function(event){
   event.stopPropagation(); 
   if(mDown)return;
   mDown = true;
   coords = canvas.relMouseCoords(event);
   oldX = coords.x;
   oldY = coords.y;
   ctx.strokeStyle = 0;
   ctx.lineWidth =1;
   ctx.lineCap = 'square';
   ctx.beginPath();
  });

 $("#mycanvas").mouseup(function(event){
   mDown = false;
   ctx.closePath();   
});	

</script>

 

works.jpg

mousemove.zip

  • Like 1
Link to comment
Share on other sites

By adding these lines you can export the canvas data to the server:

uses NetEncoding;

procedure TMainForm.UniButton1Click(Sender: TObject);
begin
  uniSession.AddJS('ajaxRequest(MainForm.form, [''export''], { data: canvas.toDataURL() } );');
end;

procedure TMainForm.UniFormAjaxEvent(Sender: TComponent; EventName: string;
  Params: TUniStrings);
var inStream, outStream:TStringStream;
begin
  if sameText(eventName,'export') then
  begin
    inStream:=TStringStream.Create;
    outStream:=TStringStream.Create;
    inStream.writeString(params.Values['data']);
    inStream.position:=22;
    TNetEncoding.Base64.Decode(inStream, outStream);
    outStream.position:=0;
    uniImage1.Picture.LoadFromStream(outStream);
    uniImage1.Picture.SaveToFile('image.png');
    inStream.Free;
    outStream.Free;
  end;
end;

 

Update: moved beginPath and closePath to mouseDown and mouseUp, for more fluid drawing.

For clearing the canvas use:

uniSession.AddJS('ctx.clearRect(0, 0, canvas.width, canvas.height);');

 

 

 

mousemove_ex.zip

signature.jpg

  • Like 1
  • Thanks 2
Link to comment
Share on other sites

10 hours ago, Ron said:

By adding these lines you can export the canvas data to the server:

uses NetEncoding;

procedure TMainForm.UniButton1Click(Sender: TObject);
begin
  uniSession.AddJS('ajaxRequest(MainForm.form, [''export''], { data: canvas.toDataURL() } );');
end;

procedure TMainForm.UniFormAjaxEvent(Sender: TComponent; EventName: string;
  Params: TUniStrings);
var inStream, outStream:TStringStream;
begin
  if sameText(eventName,'export') then
  begin
    inStream:=TStringStream.Create;
    outStream:=TStringStream.Create;
    inStream.writeString(params.Values['data']);
    inStream.position:=22;
    TNetEncoding.Base64.Decode(inStream, outStream);
    outStream.position:=0;
    uniImage1.Picture.LoadFromStream(outStream);
    uniImage1.Picture.SaveToFile('image.png');
    inStream.Free;
    outStream.Free;
  end;
end;

 

Update: moved beginPath and closePath to mouseDown and mouseUp, for more fluid drawing.

For clearing the canvas use:

uniSession.AddJS('ctx.clearRect(0, 0, canvas.width, canvas.height);');

 

 

 

mousemove_ex.zip 55.33 kB · 1 download

signature.jpg

Hi @Ron,

Reply, thank you for the example, I appreciate it.

In this example, since the user can use different colors while drawing, everything on the screen changes when I change the Color, how can I change the color without wiping the screen?

What I'm doing is briefly HTMLFrame.HTML.Text := memBlack.Text;
I have attached an example.

mousemove_ex.zip

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...