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(); } Link to comment Share on other sites More sharing options...
andyhill Posted May 7, 2020 Author Share Posted May 7, 2020 Farshad, please advise 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. 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. 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. 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. Link to comment Share on other sites More sharing options...
Administrators Farshad Mohajeri Posted May 8, 2020 Administrators Share Posted May 8, 2020 Link to comment Share on other sites More sharing options...
Administrators Farshad Mohajeri Posted May 8, 2020 Administrators Share Posted May 8, 2020 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. 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. 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. 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(); '+ '} ' ); 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 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. 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 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; 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 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. 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