Jump to content

Canvas Draw Polygon with Fill in one operation


andyhill

Recommended Posts

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

  • Administrators
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

  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

  • Administrators

 

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;

 

  • Like 1
Link to comment
Share on other sites

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

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...