andyhill Posted May 6, 2020 Share Posted May 6, 2020 I have moved this from "Canvas Load PNG Image at X/Y with Transparency (Opacity)" so it can have it's own thread. I need to Draw a Closed Polygon with Fill, not draw a polygon, then locate that polygon, then fill that polygon which is inconsistent due to anti-aliasing issues with irregular shapes. It appears UniGUI Canvas has no Polygon function (please add in future). Farshad, I found this on the Internet and ask for help to make it work. var context='#1'._cc_; var poly = [5, 5, 100, 50, 50, 100, 10, 90]; var shape = poly.slice(0); { context.fillStyle = '#f00'; context.beginPath(); context.moveTo(shape.shift(), shape.shift()); while(shape.length) { context.lineTo(shape.shift(), shape.shift()); } context.closePath(); context.fill(); } Quote Link to comment Share on other sites More sharing options...
andyhill Posted May 7, 2020 Author Share Posted May 7, 2020 Farshad, please advise Quote Link to comment Share on other sites More sharing options...
andyhill Posted May 8, 2020 Author Share Posted May 8, 2020 Farshad, this is very important for me, please show using code above how to draw an irregular closed polygon with flood fill as one action, not separate actions. Quote Link to comment Share on other sites More sharing options...
Administrators Farshad Mohajeri Posted May 8, 2020 Administrators Share Posted May 8, 2020 I'm not good at HTML5 drawing library. You can find the solution by reviewing HTML5 tutorials. Quote Link to comment Share on other sites More sharing options...
Administrators Farshad Mohajeri Posted May 8, 2020 Administrators Share Posted May 8, 2020 function click(sender, e, eOpts) { var context=MainForm.UniCanvas1._cc_; var poly = [5, 5, 100, 50, 50, 100, 10, 90]; var shape = poly.slice(0); { context.fillStyle = '#f00'; context.beginPath(); context.moveTo(shape.shift(), shape.shift()); while(shape.length) { context.lineTo(shape.shift(), shape.shift()); } context.closePath(); context.fill(); } } Worked for me. Quote Link to comment Share on other sites More sharing options...
andyhill Posted May 8, 2020 Author Share Posted May 8, 2020 The code mimics your Draw PNG Image JS, when I run it, it says cannot run JS here, please look at the code - thanks. Quote Link to comment Share on other sites More sharing options...
Administrators Farshad Mohajeri Posted May 8, 2020 Administrators Share Posted May 8, 2020 Quote Link to comment Share on other sites More sharing options...
Administrators Farshad Mohajeri Posted May 8, 2020 Administrators Share Posted May 8, 2020 Quote Link to comment Share on other sites More sharing options...
andyhill Posted May 8, 2020 Author Share Posted May 8, 2020 Yes, but when I implement this code outside of the canvas click event, in other words from a button click, I get these errors below. Quote Link to comment Share on other sites More sharing options...
Administrators Farshad Mohajeri Posted May 8, 2020 Administrators Share Posted May 8, 2020 Please send your code. Quote Link to comment Share on other sites More sharing options...
andyhill Posted May 8, 2020 Author Share Posted May 8, 2020 It is a massive graphics webapp, please cut the above code out of the Events editor and put in a button click and you will get the same results. Quote Link to comment Share on other sites More sharing options...
andyhill Posted May 8, 2020 Author Share Posted May 8, 2020 cArea.JSInterface.JSCode('var context=MainForm.cArea._cc_; '+ 'var poly = ['+s+']; '+ 'var shape = poly.slice(0); '+ '{ '+ ' context.fillStyle = ''#f00'' '+ ' context.beginPath(); '+ ' context.moveTo(shape.shift(), shape.shift()); '+ ' while(shape.length) '+ ' { '+ ' context.lineTo(shape.shift(), shape.shift()); '+ ' } '+ ' context.closePath(); '+ ' context.fill(); '+ '} ' ); Quote Link to comment Share on other sites More sharing options...
andyhill Posted May 8, 2020 Author Share Posted May 8, 2020 I tried UniSession.AddJS( as well Quote Link to comment Share on other sites More sharing options...
Administrators Farshad Mohajeri Posted May 8, 2020 Administrators Share Posted May 8, 2020 Add a ';' to end of your code to see if it changes anything. Quote Link to comment Share on other sites More sharing options...
Administrators Farshad Mohajeri Posted May 8, 2020 Administrators Share Posted May 8, 2020 procedure TMainForm.UniButton1Click(Sender: TObject); begin UniCanvas1.JSInterface.JSCode('var context = MainForm.UniCanvas1._cc_; '+ 'var poly = [5, 5, 100, 50, 50, 100, 10, 90];'+ 'var shape = poly.slice(0); '+ ' context.fillStyle = "#f00"; '+ ' context.beginPath(); '+ ' context.moveTo(shape.shift(), shape.shift()); '+ ' while(shape.length) '+ ' { '+ ' context.lineTo(shape.shift(), shape.shift()); '+ ' } '+ ' context.closePath(); '+ ' context.fill();' ); end; 1 Quote Link to comment Share on other sites More sharing options...
andyhill Posted May 8, 2020 Author Share Posted May 8, 2020 Tried a few variations, still no go. with cArea do begin JSInterface.JSCall('var context=MainForm.cArea._cc_; '+ 'var poly = ['+s+']; '+ 'var shape = poly.slice(0); '+ '{ '+ ' context.fillStyle = ''#f00'' '+ ' context.beginPath(); '+ ' context.moveTo(shape.shift(), shape.shift()); '+ ' while(shape.length) '+ ' { '+ ' context.lineTo(shape.shift(), shape.shift()); '+ ' } '+ ' context.closePath(); '+ ' context.fill(); '+ '}; ' ); end; Quote Link to comment Share on other sites More sharing options...
Sherzod Posted May 8, 2020 Share Posted May 8, 2020 9 minutes ago, andyhill said: ' context.fillStyle = ''#f00'' '+ ' context.fillStyle = ''#f00''; '+ 1 Quote Link to comment Share on other sites More sharing options...
andyhill Posted May 8, 2020 Author Share Posted May 8, 2020 Yes, Yes, Yes, my humblest apologies for making such a stupid mistake - Thank You Farshad. 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.