Repository navigation
Graphics new method 'drawPolygon' #1058
Description
/**
* Draw Polygon
* @param {[x, y][]} posList Position List
*/
createjs.Graphics.prototype.drawPolygon = function (...posList) {
const copyPosList = [...posList];
if (copyPosList.length === 0) return this;
const firstPos = copyPosList.splice(0, 1)[0];
let chain = this.moveTo(firstPos[0], firstPos[1]);
for (const pos of copyPosList) chain = chain.lineTo(pos[0], pos[1]);
return chain.lineTo(firstPos[0], firstPos[1]);
};This is a method that I defined in my project.
I searched for that how to draw polygon using EaselJS.
There were no methods of that. people have their own method for drawing a polygon.
It's not that hard to make your own method for it.
But I think It would be better that EaselJS provides us the method.
Activity
danzen commentedon Jan 22, 2021
Very nice. There is a drawPolyStar for regular polygons with a tiny API of dp(). I guess something like pg() might work - anyone else have a thought? I know most draws start with d but not drawRoundRectComplex. Another option might be dg(). We could double up in the chart below with dp/pg.
Another thing that I have found that even if you cp() a the end - which may be done automatically under the hood, that the line corner does not take the same corner point setting. So I think on our version of createjs drawPolyStar for ZIM, we keep going for one more turn - we will check that out as we consider the addition.
danzen commentedon Mar 27, 2021
@hsk-kr - would you like to try a pull request? Also, note that the version 1 of CreateJS is ES5. If that is too much to ask, we can recode it. Also, when you do, I would suggest wrapping around beyond the end point to the second point again so that the bevel or miter on the polygon is consistent. Otherwise, even with cp() it is just straight line across. See #1046
hsk-kr commentedon Mar 27, 2021
I haven't used CreateJS for a while because of my works. when I have some time, I'll try it.
Thanks for your suggestion.
danzen commentedon Apr 2, 2021
@hsk-kr I coded this in es5. In ZIM we offer options for parameters like pass in [{x,y},}{x,y}] or [[x,y],[x,y]] or [x,y,x,y,x,y] or x,y,x,y,xy - it takes a few lines to test this and accommodate this. For createjs do we think it is best to offer one way for minimal size? It seems that way, so we will probably use one way. The question is... which way is consistent with the others. Graphics.BezierCurveTo ( cp1x, cp1y, cp2x, cp2y, x, y ) uses individual parameters. This I think is a little harder to use for a series of points - not so bad with the ES6 spread operator but annoying in ES5. I think the array of arrays is probably the most organized and basic way. That is the way that you chose and that seems based on other library implementations I presume.
I have yet to work out how to change the docs - but will add the code to the Graphics class and post here.
danzen commentedon Apr 2, 2021
This has been committed - thanks @hsk-kr for the suggestion!
5366838
Not in the docs yet... so will leave this open until that happens.
danzen commentedon Apr 2, 2021
Here is an example of it working on the ZIM version of CreateJS - with same code as added to the repo here.
https://zimjs.com/explore/molnar.html
hsk-kr commentedon Apr 3, 2021
I'm sorry. I couldn't give you a good advice.
Thanks for taking my opinion.
ZIM Cat 04 - added PWA(), custom ease, and more
jackpunt commentedon May 30, 2026
Can you also add these methods to @types/easeljs/index.d.ts ?
Graphics: