pro_imaj Posted September 24, 2022 Share Posted September 24, 2022 Hi, I want to make something like Paint that will allow the user to draw freely with Unigui, I searched in the forum but I couldn't find the right examples. There are also professional Javascript libraries adapted to Unigui. Thank you. Link to comment Share on other sites More sharing options...
Sherzod Posted September 24, 2022 Share Posted September 24, 2022 Hello, How about a demo example that uses canvas? Link to comment Share on other sites More sharing options...
pro_imaj Posted September 24, 2022 Author Share Posted September 24, 2022 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 More sharing options...
Sherzod Posted September 24, 2022 Share Posted September 24, 2022 Have you seen the related demos? Link to comment Share on other sites More sharing options...
pro_imaj Posted September 24, 2022 Author Share Posted September 24, 2022 6 minutes ago, Sherzod said: Have you seen the related demos? Yes I saw. I reviewed the "Canvas" example. I have seen people who have worked with java script libraries such as http://fabricjs.com/ in the forum, but I did not get any results, I am writing in case there is someone who can produce such a solution. Link to comment Share on other sites More sharing options...
Ron Posted September 25, 2022 Share Posted September 25, 2022 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. 1 Link to comment Share on other sites More sharing options...
pro_imaj Posted September 25, 2022 Author Share Posted September 25, 2022 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 More sharing options...
Ron Posted September 25, 2022 Share Posted September 25, 2022 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> mousemove.zip 1 Link to comment Share on other sites More sharing options...
Ron Posted September 25, 2022 Share Posted September 25, 2022 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 1 2 Link to comment Share on other sites More sharing options...
pro_imaj Posted September 26, 2022 Author Share Posted September 26, 2022 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 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 More sharing options...
Ron Posted September 26, 2022 Share Posted September 26, 2022 To make the stroke in red, use this JS: ctx.strokeStyle = "#FF0000"; Or from Delphi: uniSession.AddJS('ctx.strokeStyle = "#FF0000";'); 1 Link to comment Share on other sites More sharing options...
pro_imaj Posted September 27, 2022 Author Share Posted September 27, 2022 20 hours ago, Ron said: Konturu kırmızı yapmak için bu JS'yi kullanın: Veya Delphi'den: Thanks. @Ron Link to comment Share on other sites More sharing options...
Recommended Posts
Please sign in to comment
You will be able to leave a comment after signing in
Sign In Now