Jump to content


Photo

How can I create a triangle?


  • Please log in to reply
3 replies to this topic

#1 Mar

Mar

    FireworksCommander

  • Members
  • Pip
  • 8 posts

Posted 13 November 2010 - 03:45 PM

Hi,

I am trying to draw a simple triangle shape on the document stage from within a Command Panel using Javascript.

This seems like it should be simple enough, but I can't find a way to accomplish it using JS.

I have tried using the addNewLine() function to draw three lines and then use the joinPaths() function to link all the paths together. I can do this, however, I then can not fill in the triangle.

I thought I could also create a newRectangle and then move two anchor points to create the triangle. However, could not figure out how to move an anchor point as well.

Does anyone have any advice or know if I can essentially mimic the Pen Tool using JS commands from a command panel?

Thanks,

Mariano

Posted Image

#2 jdunning

jdunning

    Fireworks Ninja

  • Members
  • PipPipPipPipPip
  • 173 posts

Posted 22 November 2010 - 02:33 PM

Does anyone have any advice or know if I can essentially mimic the Pen Tool using JS commands from a command panel?

A good approach to figuring these kinds of things out is to perform the operations using the normal tools, then select the steps in the History panel, click the copy button, and then paste in a text editor. This should display the JS equivalents of what you did via the UI, though not everything can be replicated via the API.

I tried this by selecting the pen tool, clicking three times, and then clicking on the starting point to close the path. This was the resulting code:

fw.getDocumentDOM().addNewSinglePointPath({x:87, y:208}, {x:87, y:208}, {x:87, y:208}, true);
fw.getDocumentDOM().appendPointToPath(0, 1, {x:150, y:174}, {x:150, y:174}, {x:150, y:174});
fw.getDocumentDOM().appendPointToPath(0, 2, {x:169, y:246}, {x:169, y:246}, {x:169, y:246});
fw.getDocumentDOM().modifyPointOnPath(0, 0, {x:87, y:208}, {x:87, y:208}, {x:87, y:208}, true, true);

Looks like you'll need to use modify the individual path points to create your triangle.

Hope that helps.

#3 phpmaestro

phpmaestro

    FireStarter

  • Members
  • PipPip
  • 20 posts
  • Location:india

Posted 27 April 2011 - 09:50 PM

Only clicking once, you will get the Star Tool Options pane. This is where you can reduce the number of points to “3.” The trick is to set one radius 2 at your desired size for your triangle, then set the other radius at exactly half. Note: It doesn’t matter which radius is which. Radius 1 and 2 can be reversed as long as one is double/half the other. Choose the size of your triangle and click OK.
You can take help from
Bittbox

#4 Jeff Young

Jeff Young

    FireworksCommander

  • Members
  • Pip
  • 7 posts

Posted 27 April 2011 - 10:31 PM

I think what you want is this
dom.addNewStar()

this creates a triangle
fw.getDocumentDOM().addNewStar(3, -1, false, {x:558, y:218}, {x:650, y:310});