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. Quote 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? Quote 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 Quote 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? Quote 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. Quote 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 Quote 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. Quote 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 Quote 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 Quote 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 Quote 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 Quote 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.